---

Instructions

This example shows how to use the built-in rectangle tool to create a rubber-band rectangle 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 rectangleToolIns=new Array();
  var rectangleTool=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 rectangle tool
  function addRectangleTool()
  {
    rectangleTool = new MVRectangleTool("mvdemo.L.MAJOR STREET");
    mapview.addRectangleTool(rectangleTool);
    rectangleToolIns.push(rectangleTool);
    refreshRectangleToolList();
  }
  
  //initialize a rectangle tool
  function initRectangleTool()
  {
    var rectangleToolList=document.getElementById("rectangleToolList");
    if((rectangleToolList.selectedIndex)<0)
    {
      alert("Please choose rectangle tool instance from the list above to initialize! ");
      return;
    }
    else
      rectangleTool=rectangleToolIns[rectangleToolList.selectedIndex];
    
    rectangleToolIns[rectangleToolList.selectedIndex].init();
    var listenerFlag=document.getElementById("listenerFlag");
    AddEventListener(listenerFlag.checked);
  }

  //clear a rectangle tool
  function clearRectangleTool()
  {
    var rectangleToolList=document.getElementById("rectangleToolList");
    if((rectangleToolList.selectedIndex)<0)
    {
      alert("Please choose rectangle tool instance from the list above to clear! ");
      return;
    }
    rectangleToolIns[rectangleToolList.selectedIndex].clear();
  }
  
  function refreshRectangleToolList()
  {
    var rectangleToolList=document.getElementById("rectangleToolList");
    
    rectangleToolList.options.length=0;
        
    for(var i=0; i<rectangleToolIns.length; ++i)
    {
      var option=document.createElement("option");
      option.text="RectangleTool"+(i+1);
      option.value=rectangleToolIns[i].id;      
      rectangleToolList.options[rectangleToolList.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 getRectangle()
  { 
    var rectangle=rectangleTool.getRectangle();
    
    if(rectangle!=null)
      document.getElementById("message").innerHTML+='<br><br><font color="#00FF00">The rectangle: '+
              rectangleTool.getRectangle()+'</font>';
    else
      document.getElementById("message").innerHTML+='<br><br><font color="#00FF00">The rectangle: null</font>';
  }
  
  function showRectangleSize()
  {
    document.getElementById("message").innerHTML='
Width:'+rectangleTool.getWidth('meter')
              +' meters, height:'+rectangleTool.getHeight('meter')+' meters';
  }
  
  // add event listener for a rectangle tool
  function AddEventListener(flag)
  {
    rectangleTool.attachEventListener(MVEvent.DRAG, showRectangleSize);
    if(flag)
    {
      document.getElementById("message").innerHTML = "<font color=\"#FF0000\">Message Area</font>";
      
      rectangleTool.attachEventListener(MVEvent.START, getOrdinates);
      rectangleTool.attachEventListener(MVEvent.FINISH, getRectangle);
    }
    else
    {
      document.getElementById("message").innerHTML = "";
      rectangleTool.detachEventListener(MVEvent.START, getOrdinates);
      rectangleTool.detachEventListener(MVEvent.FINISH, getRectangle);
    }      
  }