---

Instructions

This example shows how to use the built-in circle tool to create a rubber-band circle on the map. As you can see it is quite similar to how you use a red-lining tool.

Source code

The JavaScript code for this demo is listed below.

  var mapview;
  var circleToolIns=new Array();
  var circleTool=null;

  function showMap()
  { 
    var baseURL  = "http://"+document.location.host+"/mapviewer";
    var mapCenterLon = -122.45;
    var mapCenterLat =  37.6706;
    var mapZoom      =  4;  
    var centerPoint = MVSdoGeometry.createPoint(mapCenterLon,mapCenterLat,8307);
    mapview = new MVMapView(document.getElementById("map"), baseURL);           
    mapview.addMapTileLayer(new MVMapTileLayer("mvdemo.demo_map"));   
    mapview.setCenter(centerPoint);   
    mapview.setZoomLevel(mapZoom);
    mapview.display();        
  }
  
  //create a circle tool
  function addCircleTool()
  {
    circleTool = new MVCircleTool("mvdemo.L.MAJOR STREET");
    mapview.addCircleTool(circleTool);
    circleToolIns.push(circleTool);
    refreshCircleToolList();
  }
  
  //initialize a circle tool
  function initCircleTool()
  {
    var circleToolList=document.getElementById("circleToolList");
    if((circleToolList.selectedIndex)<0)
    {
      alert("Please choose circle tool instance from the list above to initialize! ");
      return;
    }
    else
      circleTool=circleToolIns[circleToolList.selectedIndex];
    
    circleToolIns[circleToolList.selectedIndex].init();
    var listenerFlag=document.getElementById("listenerFlag");
    AddEventListener(listenerFlag.checked);
  }

  //clear a circle tool
  function clearCircleTool()
  {
    var circleToolList=document.getElementById("circleToolList");
    if((circleToolList.selectedIndex)<0)
    {
      alert("Please choose circle tool instance from the list above to clear! ");
      return;
    }
    circleToolIns[circleToolList.selectedIndex].clear();
  }
  
  function refreshCircleToolList()
  {
    var circleToolList=document.getElementById("circleToolList");
    
    circleToolList.options.length=0;
        
    for(var i=0; i<circleToolIns.length; ++i)
    {
      var option=document.createElement("option");
      option.text="CircleTool"+(i+1);
      option.value=circleToolIns[i].id;      
      circleToolList.options[circleToolList.options.length]=option;
    }     
  }

  function getOrdinates()
  { 
    var mouseLoc = mapview.getMouseLocation();
    var latLngStr = '<font color="#FF0000">The location to start dragging mouse:' 
      + mouseLoc.getPointX() + ', ' + mouseLoc.getPointY() + '</font>' ;
    document.getElementById("message").innerHTML = latLngStr;
  }

  function getCircle()
  { 
    var circle=circleTool.getCircle();
    
    if(circle!=null)
      document.getElementById("message").innerHTML+='<br><br><font color="#00FF00">The circle: '+
              circleTool.getCircle()+'</font>';
    else
      document.getElementById("message").innerHTML+='<br><br><font color="#00FF00">The circle: null</font>';
  }
  
  function getRadius()
  {
    document.getElementById("message").innerHTML='Raduis: '+circleTool.getRadius("meter")+' meters';
  }
  
  // add event listener for a circle tool
  function AddEventListener(flag)
  {
    circleTool.attachEventListener(MVEvent.DRAG, getRadius) ;
    if(flag)
    {
      document.getElementById("message").innerHTML = "<font color=\"#FF0000\">Message Area</font>";
      
      circleTool.attachEventListener(MVEvent.START, getOrdinates);
      circleTool.attachEventListener(MVEvent.FINISH, getCircle);
    }
    else
    {
      document.getElementById("message").innerHTML = "";
      circleTool.detachEventListener(MVEvent.START, getOrdinates);
      circleTool.detachEventListener(MVEvent.FINISH, getCircle);
    }      
  }