Oracle Maps example - simple red lining function

Follow the steps below.
  1. Click here to enter red-lining mode, then start drawing on the map
  2. When done drawing, click on the first point or click here to generate a red line polygon
  3. Click here to remove the red line polygon
  4. Please go back to step 1 if you would like to draw a new shape on the map.

Check here to see the Red Line shape coordinates.

Check here to automatically close the redline polygon when the starting node is clicked.


Instructions

This demo shows you how to initiate a red-lining tool and draw simple shapes on the map.

Source code

The JavaScript code for this demo is listed below.
  var mapview;
  var redline; //the red-lining tool 
  var rlflag=true;
  var ordflag=false;
  var mapMoveFlag=false;
  
  function init()
  {
  	document.getElementById("redLineOrdFlag").checked = false;
  	showMap();
  	redLine();
  }

  function showMap()
  {	
    var baseURL  = "http://"+document.location.host+"/mapviewer";
    var mapCenterLon = -122.45;
    var mapCenterLat =  37.6706;
    var mapZoom      =  4;  
    var mpoint = MVSdoGeometry.createPoint(mapCenterLon,mapCenterLat,8307);
    mapview = new MVMapView(document.getElementById("map"), baseURL);     			
    mapview.addMapTileLayer(new MVMapTileLayer("mvdemo.demo_map"));   
    mapview.setCenter(mpoint);   
    mapview.setZoomLevel(mapZoom);
    
    mapview.attachEventListener(MVEvent.RECENTER,checkMapMove);
    mapview.attachEventListener(MVEvent.MOUSE_CLICK,getRedLineOrd);

    mapview.display(); 				
  }
  
  //this method returns a new red-line tool
  
  function redLine()
  {
    redline = new MVRedlineTool("mvdemo.L.RAMP", "mvdemo.C.RED");
    mapview.addRedLineTool(redline);
  }
  
  
  function checkMapMove()
  { 
    mapMoveFlag = true;
  }

  
  function getRedLineOrd()
  { 
  	if(mapMoveFlag)
  	{
  	  mapMoveFlag = false;
  	  return;
  	}
  	
    if (rlflag && ordflag)
      alert("Redline coordinates:"+ redline.getOrdinates()+" ");
  }

  function showRedLineOrd(item)
  {
    ordflag=item.checked;
  }

  function setRLFlag(flag)
  {
    rlflag=flag;
  }
  
The onLoad function of the page body invokes the init() method above, which initializes the map as well as a red-line tool.
<body onload="javascript:init()">

The code below shows how this demo invokes various methods on the red-line tool to perform tasks such as displaying a finished shape.
	<LI><a href="javascript:redline.init();setRLFlag(true)">Click here to enter red-lining mode</a>...</LI>
	<LI>When done drawing, <a href="javascript:redline.generateArea();setRLFlag(false)">
	click here to generate a red line polygon</a></LI>
	<LI><a href="javascript:redline.clear();setRLFlag(false)">
	Click here to remove the red line polygon</a></LI>
	<LI>Please go back to step 1 if you would like to draw a new shape on the map.