none
Draw polygon and search using bing 7 RRS feed

  • Question

  • Hello all, how to do a basic polygon drawing and get the points of the corners for carrying out a search based on the captured lat/long values using bing 7. Any easy samples ? 

    I have a fully functional polygon map search in place on our public site which is based on bing map 6.3 . Need to migrate to bing 7 

    thanks.

    Monday, August 29, 2016 2:50 PM

Answers

All replies

  • If you are migrating from V6.3 skip V7 and go straight to V8. V7 is nearing end of life as well. V8 is about 90% backwards compatible with V7 so any code you have written so far will be easy to move over to V8. V8 also has a lot more built in features which will make what you are trying to do much easier. To draw a polygon you can use the drawing tools module:

    http://www.bing.com/api/maps/sdk/mapcontrol/isdk#dtDrawThings+JS

    https://msdn.microsoft.com/en-us/library/mt750543.aspx

    https://msdn.microsoft.com/en-US/library/mt750468.aspx

    You can use the events in the drawing tools module to determine when the user has finished drawing a shape and to get access to it. From there, searching for location in that polygon would depend on where you data is.  If the data is in your app you can use the spatial math module to do a point in polygon search via the intersects geometry function: https://msdn.microsoft.com/en-us/library/mt762861.aspx

    If the data is hosted in the Bing Spatial Data Services you can convert your polygon into well known text and then do an intersection search against your data source.

    https://msdn.microsoft.com/en-us/library/mt712828.aspx

    https://msdn.microsoft.com/en-us/library/mt750621.aspx

    https://msdn.microsoft.com/en-us/library/mt712880.aspx

    Note that you likely will need to make the polygon valid using the geometry calculations in the spatial math module since things like ring orientation can make the difference between your polygon, or everything but your polygon.

    If your data is in  database, then you will need to create a web service to connect your application to the database server. An example that uses V7 can be found here:

    http://blogs.bing.com/maps/2013/07/31/how-to-create-a-spatial-web-service-that-connects-a-database-to-bing-maps-using-ef5

    http://blogs.bing.com/maps/2013/08/05/advance-spatial-queries-using-entity-framework-5

    Migrating this to V8 would be fairly easy, especially since the well known text module is now built into V8 and there is shape validation tools in the spatial math module.


    [Blog] [twitter] [LinkedIn]

    Monday, August 29, 2016 6:47 PM
  • Thanks for your reply.

    my data is in SQL db, which I am making ajax calls to a web service to get the data. All I need is to attach mouse events to draw a polygon and upon the release of the mouse, I need to get the boundaries of the polygon drawn and send to my web services. I just need the lat/long pairs of the corners.

    Unfortunately, I need to achieve this with bing 7 to get my app up and run quickly , as we are migrating to google maps in the next couple of months.

    Tuesday, August 30, 2016 4:37 PM
  • If you are using V7, then you can use the drawing tools module here: https://bingmapsv7modules.codeplex.com/wikipage?title=Drawing%20Tools%20Module&version=1

    [Blog] [twitter] [LinkedIn]

    Tuesday, August 30, 2016 6:10 PM
  • thanks much for your leads. I am able to draw a polygon using the ShapeToolboxModule.

    I am kind of lost on how to attach events to this to get the boundaries of the shape drawn as soon as the mouse is released. Below is my code based off the sample.

    Also is it possible to limit only one shape on the map. My application do not support searches on multiple shapes.

    thank you.

    <!DOCTYPE HTML>
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<style>
    			BODY { font-family:Arial; font-size:12px }
    			.PropertyTable {border: 1px solid #c0c0c0; border-collapse: collapse; border-spacing: 0px;}
    			.PropertyTable td, th {border: 1px solid #c0c0c0; border-collapse: collapse; border-spacing: 0px; padding: 2px;}
    			.PropertyTable th {color: #fff; background-color: #000; text-align: left;}
    		</style>
    		<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    		<script type="text/javascript">
    
    		    var map;
    		    var myToolbox = null;
    
    		    function myModuleLoaded() {
    		        myToolbox = new ShapeToolboxModule(map);
    		        document.getElementById('loadedMessage').innerHTML = 'Shape Toolbox Module Loaded (version ' + myToolbox.version() + ')';
    		    }
    
    		    function load() {
    		        //Create Map
    		        var center = new Microsoft.Maps.Location(41.8756, -87.9956);
    		        var points = [];
    
    		        map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
    		            credentials: "Bing Maps Key",
    		            center: center,
    		            mapTypeId: Microsoft.Maps.MapTypeId.road,
    		            zoom: 9
    		        });
    
    		        // Register and load a new module
    		        Microsoft.Maps.registerModule("ShapeToolboxModule", "BMv7.ShapeToolboxModule/scripts/ShapeToolboxModule_RC.js");
    		        Microsoft.Maps.loadModule("ShapeToolboxModule", { callback: myModuleLoaded });
    		    }
    		</script>
    	</head>
    	<body onload="load();">
    		<h3>Bing Maps AJAX Control v7 Dynamic Module - Draw Shape Module</h3>
    		
    		<div id='mapDiv' style="; width:600px; height:400px;"></div>
    		<input type="button" id="cmdShow" value="Show Tool Bar" onclick="myToolbox.show();" style="width:300px;" />
    		<input type="button" id="cmdHide" value="Hide Tool Bar" onclick="myToolbox.hide();" style="width:300px;" /><br />
    		
    	</body>
    </html>


    • Edited by Ricky_Brundritt Wednesday, August 31, 2016 7:57 PM Removing key
    Wednesday, August 31, 2016 5:53 PM
  • There is a drawingEnded event option that you can use in the drawing tools. Take a look at the Events example that is with the drawing tools project.

    As for only drawing one shape at a time. Simply delete any shapes that are on the drawing layer using the clear function.


    [Blog] [twitter] [LinkedIn]

    Wednesday, August 31, 2016 8:00 PM
  • Thanks , that's a very useful set of samples put together for drawing manager.

    Currently, the drawings can be released by pressing escape key on keyboard. Is it possible to end the drawing with a double click or when clicked on the starting point ?

    Here is one sample which requires escape key when I need to end drawing the shape. It would be nice to end it when I click on the starting point. 6.3 version used to work that way.

    http://rbrundritt.azurewebsites.net/modules/drawingTools/EventExample.html

    thanks

    Thursday, September 1, 2016 5:15 PM
  • V6.3 didn't have any drawing tools. The drawing tools for V7 are open source and were created by the dev community. Since it is open source you can easily add this functionality if you want, but it does not have this and it won't be added by anyone else, especially since V7 will be deprecated in less than a year. The drawing tools in V8 do support double clicking and/or clicking the last point to finish a drawing.

    [Blog] [twitter] [LinkedIn]

    Tuesday, September 6, 2016 5:02 PM