none
Freehand Drawing on BingMaps

    Question

  • im trying to recreate something like this:

    http://www.zillow.com/homes/for_sale/1-_beds/1-_baths/days_sort/40.820695,-73.63595,40.768127,-73.747444_rect/13_zm/

    when you click on the "Draw Custom Region" tool on the map it lets you draw a shape on the map, and then it returns those boundaries. Ive looked into Bings Shape Toolbox Module, but it doesnt let you freehand draw shapes. Does Bing have the ability to do this? or is there a 3rd party plugin that ill need to use that would work with Bing?

    Thanks in advance

    Wednesday, February 12, 2014 5:23 PM

Answers

  • The Bing Shape Toolbox is a good starting point. If you want to let the user mouse down and drag all over to draw a path, this can be done and isn't overly difficult to do. Here is a code sample I just put together in a couple of minutes:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title>Event mouse down</title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
          
    	  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    	  
          <script type="text/javascript">
          var map, isDrawing, line;  
    	  
          function getMap()
          {
    		map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'YOUR_BING_MAPS_KEY'});
    
    		Microsoft.Maps.Events.addHandler(map, 'mousedown', startDrawing);
    		Microsoft.Maps.Events.addHandler(map, 'mouseup', stopDrawing);
    		Microsoft.Maps.Events.addHandler(map, 'mousemove', mouseMoved);
          }
    	  
    	  function startDrawing(e)
    	  {
    		try{		
    			var point = new Microsoft.Maps.Point(e.getX(), e.getY());
    			var loc = e.target.tryPixelToLocation(point);
    
    			line = new Microsoft.Maps.Polyline([loc, loc]);
    			
    			map.entities.push(line);
    			
    			isDrawing = true;
    			map.setOptions({disablePanning: true, disableZooming: true});
    		}catch(x){}
       	  }
    	  
    	  function mouseMoved(e)
    	  {
    		if(isDrawing){
    			try{
    				var point = new Microsoft.Maps.Point(e.getX(), e.getY());
    				var loc = e.target.tryPixelToLocation(point);
    				var locs = line.getLocations();
    				locs.push(loc);
    				line.setLocations(locs);
    			}catch(x){}
    		}
    	  }
    
    	  function stopDrawing()
    	  {
    		isDrawing = false;
    		map.setOptions({disablePanning: false, disableZooming: false});
    	  }
          </script>
       </head>
       <body onload="getMap();">
          <div id='myMap' style="; width:1000px; height:800px;"></div>
       </body>
    </html>


    http://rbrundritt.wordpress.com

    Wednesday, February 12, 2014 5:49 PM

All replies

  • The Bing Shape Toolbox is a good starting point. If you want to let the user mouse down and drag all over to draw a path, this can be done and isn't overly difficult to do. Here is a code sample I just put together in a couple of minutes:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title>Event mouse down</title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
          
    	  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    	  
          <script type="text/javascript">
          var map, isDrawing, line;  
    	  
          function getMap()
          {
    		map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'YOUR_BING_MAPS_KEY'});
    
    		Microsoft.Maps.Events.addHandler(map, 'mousedown', startDrawing);
    		Microsoft.Maps.Events.addHandler(map, 'mouseup', stopDrawing);
    		Microsoft.Maps.Events.addHandler(map, 'mousemove', mouseMoved);
          }
    	  
    	  function startDrawing(e)
    	  {
    		try{		
    			var point = new Microsoft.Maps.Point(e.getX(), e.getY());
    			var loc = e.target.tryPixelToLocation(point);
    
    			line = new Microsoft.Maps.Polyline([loc, loc]);
    			
    			map.entities.push(line);
    			
    			isDrawing = true;
    			map.setOptions({disablePanning: true, disableZooming: true});
    		}catch(x){}
       	  }
    	  
    	  function mouseMoved(e)
    	  {
    		if(isDrawing){
    			try{
    				var point = new Microsoft.Maps.Point(e.getX(), e.getY());
    				var loc = e.target.tryPixelToLocation(point);
    				var locs = line.getLocations();
    				locs.push(loc);
    				line.setLocations(locs);
    			}catch(x){}
    		}
    	  }
    
    	  function stopDrawing()
    	  {
    		isDrawing = false;
    		map.setOptions({disablePanning: false, disableZooming: false});
    	  }
          </script>
       </head>
       <body onload="getMap();">
          <div id='myMap' style="; width:1000px; height:800px;"></div>
       </body>
    </html>


    http://rbrundritt.wordpress.com

    Wednesday, February 12, 2014 5:49 PM
  • Hi, Ricky,

    First of all, congratulations for these "couple of minutes". They were very inspiring.

    But my question is: how can I get the documentation to move from this freehand drawing on Bing into a polygon shape with geolocations that I can handle inside my server geodb.

    Thanks in advance.

    Best.

    Alexandre F.


    Alexandre

    Friday, February 28, 2014 2:15 AM
  • Saturday, March 01, 2014 10:01 AM