Draw a Circle on a Map So Many Hours Away
- Remove From My Forums
-
Question
-
Howdy,
We have checked the Microsoft.Maps.DrawingTools. It is great feature. Information technology is possible to draw circumvolve and rectangle. As we are able to depict circle and rectangle using DrawingToolsModule in bing map V7.
Thanks!
Balasaheb
Answers
-
Not at this time. Nosotros accept a lot of features on our road map, and unfortunately this isn't at the acme of the listing at the moment. Y'all tin depict circles with Bing Maps using the Spatial Math library. Here is a code sample:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script> <script blazon='text/javascript'> var map, outputPanel, circle, mouseDownEventHandler, mouseMoveEventHandler, mouseUpEventHandler; office GetMap() { map = new Microsoft.Maps.Map('#myMap', { credentials: 'Your Bing Maps Primal' }); Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath'); outputPanel = certificate.getElementById('output'); } function DrawCircle() { ClearDrawing(); mouseDownEventHandler = Microsoft.Maps.Events.addHandler(map, 'mousedown', function (e) { //Lock map so it doesn't move when dragging. map.setOptions({ disablePanning: true }); //Create a polygon for the circumvolve. circle = new Microsoft.Maps.Polygon([e.location, e.location, e.location]); //store the heart point in the polygons metadata. circumvolve.metadata = { center: eastward.location }; map.entities.push(circle); }); mouseMoveEventHandler = Microsoft.Maps.Events.addHandler(map, 'mousemove', part (eastward) { if (circle) { UpdateCircle(east); } }); mouseUpEventHandler = Microsoft.Maps.Events.addHandler(map, 'mouseup', function (e) { UpdateCircle(eastward); //Unlock map panning. map.setOptions({ disablePanning: false }); //Remove upshot handlers. Microsoft.Maps.Events.removeHandler(mouseDownEventHandler); Microsoft.Maps.Events.removeHandler(mouseMoveEventHandler); Microsoft.Maps.Events.removeHandler(mouseUpEventHandler); }); } function ClearDrawing() { map.entities.articulate(); circumvolve = null; outputPanel.innerHTML = ''; } office UpdateCircle(e) { //Calculate distance from circle center to mouse. var distance = Microsoft.Maps.SpatialMath.getDistanceTo(circle.metadata.middle, east.location, Microsoft.Maps.SpatialMath.DistanceUnits.Miles); //Summate circle locations. var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(circumvolve.metadata.center, altitude, 36, Microsoft.Maps.SpatialMath.DistanceUnits.Miles); //Update the circles location. circle.setLocations(locs); //Display the radius in miles rounded to two decimal places. outputPanel.innerHTML = 'Radius: ' + Math.round(distance*1000)/1000 + ' miles'; } </script> </head> <body> <div id="myMap" style=";width:600px;height:400px;"></div> <br/> <input blazon="button" value="Draw Circle" onclick="DrawCircle()"/> <br/> <div id="output"></div> </trunk> </html>
[Weblog] [twitter] [LinkedIn]
- Proposed as reply past Wednesday, September fourteen, 2016 5:54 PM
- Marked as answer by Ricky_Brundritt Thursday, September 22, 2016 v:51 PM
-
Customizing the toolbar is planned. It is likewise possible to non even utilize the toolbar and instead use the create and edit functions in the drawing tools. If you do this you lot can create a completely custom drawing toolbar.
[Blog] [twitter] [LinkedIn]
- Proposed equally respond by Ricky_Brundritt Thursday, September xv, 2016 2:44 PM
- Marked as answer by Ricky_Brundritt Thursday, September 22, 2016 5:51 PM
-
Yes, there are plans to add a circle drawing option in the futurity. I don't have a timeline for this at this fourth dimension, yet it is fairly easy to create this functionality using mouse events and the spatial math module. A code case of how to do this is here: https://social.msdn.microsoft.com/Forums/en-Us/59235b79-78bb-46d5-ba59-3ea445b5783c/drawing-a-circumvolve-in-v8?forum=bingmaps
Currently there is no option for changing the position of the drawing toolbar, but in that location are plans to betrayal functionality for doing this soon. If yous want to hibernate/show the toolbar, yous will need to use the show/hide toolbar functions when your carte closes/opens. Alternatively, you lot can adequately easily create a custom fix of drawing buttons and use the Cartoon Toolbox edit function to do all of this. Going this road will give you full control of the drawing toolbar as information technology will be your own UI. Here is a code sample that puts a polygon into edit style when clicked and out of edit mode when "esc" is pressed.
<!DOCTYPE html> <html> <head> <championship></championship> <meta charset="utf-8" /> <script blazon='text/javascript' src='https://world wide web.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script> <script type='text/javascript'> var map; var tools; function GetMap() { map = new Microsoft.Maps.Map('#myMap', { credentials: 'Your Bing Maps Key' }); //Load the DrawingTools module. Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () { //Create an instance of the DrawingTools class and demark information technology to the map. tools = new Microsoft.Maps.DrawingTools(map); }); //Create a random 5 sided polyogn that fills a decent portion of the map. var polygon = Microsoft.Maps.TestDataGenerator.getPolygons(1, map.getBounds(), 5, 0.8); map.entities.push(polygon); //When the polygon is clicked, go into edit mode. Microsoft.Maps.Events.addHandler(polygon, 'click', function () { //Remove the polygon from the map every bit the drawing tools will display information technology in the drawing layer. map.entities.remove(polygon); //Pass the polygon to the cartoon tools to be edited. tools.edit(polygon); }); //When the user presses 'esc', take the polygon out of edit mode and re-add together to base map. certificate.getElementById('myMap').onkeypress = function (e) { if (e.charCode === 27) { tools.finish(function (s) { map.entities.push button(s); }); } }; } </script> </head> <body> <div id="myMap" manner=";width:600px;height:400px;"></div> </body> </html>
[Blog] [twitter] [LinkedIn]
- Proposed as answer by Ricky_Brundritt Tuesday, November 29, 2016 11:59 PM
- Marked as answer by Ricky_Brundritt Tuesday, November 29, 2016 11:59 PM
-
Unfortunately, since this is already a workaround, all you lot can exercise is add together more workaround. An choice to customize the position of the drawing toolbar hasn't been exposed withal. Information technology is generally recommended to create custom toolbars when you desire to practice this. For example:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script> <script type='text/javascript'> var map; var tools; var currentShape; office GetMap() { map = new Microsoft.Maps.Map('#myMap', { credentials: 'Your Bing Maps Key' }); //Load the DrawingTools module. Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () { //Create an example of the DrawingTools class and demark it to the map. tools = new Microsoft.Maps.DrawingTools(map); //When the user presses 'esc', take the polygon out of edit fashion and re-add to base of operations map. document.getElementById('myMap').onkeypress = function (e) { if (due east.charCode === 27) { tools.finish(shapeDrawn); currentShape = naught; } }; }); } function drawPolygon() { //Stop any current drawing. if (currentShape) { tools.finish(shapeDrawn); currentShape = null; } //Create a new polygon. tools.create(Microsoft.Maps.DrawingTools.ShapeType.polygon, office (s) { currentShape = s; }); } role shapeDrawn(s) { //Practice something with the shape that was drawn. //For this demo add it every bit a standard shape on the map. map.entities.push(due south); } </script> </head> <body> <div id="myMap" style=";width:600px;pinnacle:400px;"></div><br/> <input type="button" onclick="drawPolygon()" value="Depict Polygon"/> </body> </html>
[Weblog] [twitter] [LinkedIn]
- Proposed equally reply by Ricky_Brundritt Thursday, January 5, 2017 viii:13 PM
- Marked as reply by Ricky_Brundritt Th, February 9, 2017 4:01 PM
-
I'll log this as a problems. Here is a simple workaround solution:
Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', role () { var tools = new Microsoft.Maps.DrawingTools(map); tools.showDrawingManager(function (manager) { document.onkeydown=function keypress(east) { e = (e||window.effect); if (eastward.keyCode == 27) { director.setDrawingMode(Microsoft.Maps.DrawingTools.DrawingMode.none); } }; }); });
[Weblog] [twitter] [LinkedIn]
- Proposed as reply by Ricky_Brundritt Thursday, February 9, 2017 8:twenty PM
- Marked as answer by Ricky_Brundritt Thursday, February 9, 2017 8:20 PM
Source: https://social.msdn.microsoft.com/Forums/en-US/ba2aa0d6-f2a1-498d-9f2d-64b40cc328ae/bing-map-v8-drawingtools-question
0 Response to "Draw a Circle on a Map So Many Hours Away"
Post a Comment