Drawing shape on map question RRS feed

  • Question

  • Hi 

    We have one requirment to draw the free hand drawing on map. Currently we are using DrawingToolsModule but there is no any free hand drawing option as like we have in mspaint.

    Also is there any possibli to call the some function of DrawingToolsModule from our HTML page. Below is our scenario we provide way to user draw there shape as per there requirment and save it(we saved it in another table).When user open same records once again then we want to show there saved draw shapes. We are able to saved the coordinate and plot them on map when user open the saved shape. But we are facing issue while editing the saved shape because we are not able to call the edit function from our HTML. 

    Can you please and let us know your response for the same.  




    Thursday, July 7, 2016 12:48 PM


  • Freehand drawing is planned to be added to the drawing tools at a later date. However, if you need this feature now it is possible to create a custom free hand drawing tool. Here is a code sample:

    <!DOCTYPE html>
        <meta charset="utf-8" />
        <script type='text/javascript'
                src='' async defer></script>
          <script type="text/javascript">
          var map, isDrawing, polygon, lastMousePoint, eventIds = [];  
          function GetMap()
    		map = new Microsoft.Maps.Map('#myMap', {
    			credentials: 'YOUR_BING_MAPS_KEY'
    	  function DrawPolygon(){
    		//Clear existing shapes
    		//Add mouse down event to start drawing. 
    		eventIds.push(Microsoft.Maps.Events.addHandler(map, 'mousedown', startDrawing));		
    	  function startDrawing(e)
    		polygon = new Microsoft.Maps.Polygon([e.location, e.location], { fillColor: 'rgba(0,0,150,0.5)' });		
    		map.setOptions({ disablePanning: true, disableZooming: true });
    		//Add mouse events for the rest of the mouse events.
    		eventIds.push(Microsoft.Maps.Events.addHandler(map, 'mouseup', stopDrawing));
    		eventIds.push(Microsoft.Maps.Events.addHandler(map, 'mousemove', mouseMoved));
    	  function mouseMoved(e)
    		//If we simply add a coordinate for each mouse move we could end up with too much data. 
    		//We can add a check to make sure the mouse has moved a couple of pixels before capturing a new coordinate.
    		if (lastMousePoint)
    			var dx = lastMousePoint.x - e.point.x;
    			var dy = lastMousePoint.y - e.point.y;
    			var d = Math.sqrt(dx * dx + dy * dy);
    			//I'm checking that the mouse has moved at least 5 pixels. 
    			//If it hasn't then I ignore the event. This significantly reduces the size of the generated polygon.
    			if(d <= 5)
    		var locs = polygon.getLocations();
    		//Replace last coordinate of polygon as polygon automatically close the ring.
    		locs[locs.length-1] = e.location;
    		lastMousePoint = e.point;		
    	  function stopDrawing(e)
    		//Remove mouse events.
    		for(var i=0;i<eventIds.length;i++){
    		eventIds = [];
    		//re-enable panning and zooming.
    		map.setOptions({ disablePanning: false, disableZooming: false });
    		//Close the polygon
    		var locs = polygon.getLocations();
    		//Do something with the polygon locations (locs)
    		<div style="; width:800px; height:600px;">		
    			<div id='myMap' style="; width:800px; height:600px;"></div>
    			<input type="button" value="Draw Polygon" onclick="DrawPolygon()" style=";left:10px;top:10px;"/>
    If you are using the drawing tools you can edit any shape by passing it into the edit function of the drawing tools:

    [Blog] [twitter] [LinkedIn]

    Thursday, July 7, 2016 5:51 PM