locked
Bing map V8 DrawingTools question. RRS feed

  • Question

  • Hi,

    We have checked the Microsoft.Maps.DrawingTools. It is great feature. It is possible to draw circle and rectangle. As we are able to draw circle and rectangle using DrawingToolsModule in bing map V7.

    Thanks!


    Balasaheb

    Thursday, July 28, 2016 1:31 PM

Answers

  • Not at this time. We have a lot of features on our road map, and unfortunately this isn't at the top of the list at the moment. You can draw 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 type='text/javascript'>
            var map,
                outputPanel,
                circle,
                mouseDownEventHandler,
                mouseMoveEventHandler,
                mouseUpEventHandler;
    
        function GetMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key'
            });
    
            Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath');
    
            outputPanel = document.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 circle.
                circle = new Microsoft.Maps.Polygon([e.location, e.location, e.location]);
    
                //store the center point in the polygons metadata.
                circle.metadata = {
                    center: e.location
                };
    
                map.entities.push(circle);
            });
    
            mouseMoveEventHandler = Microsoft.Maps.Events.addHandler(map, 'mousemove', function (e) {
                if (circle) {
                    UpdateCircle(e);
                }
            });
    
            mouseUpEventHandler = Microsoft.Maps.Events.addHandler(map, 'mouseup', function (e) {
                UpdateCircle(e);
    
                //Unlock map panning.
                map.setOptions({ disablePanning: false });
    
                //Remove event handlers.
                Microsoft.Maps.Events.removeHandler(mouseDownEventHandler);
                Microsoft.Maps.Events.removeHandler(mouseMoveEventHandler);
                Microsoft.Maps.Events.removeHandler(mouseUpEventHandler);
            });
        }
    
        function ClearDrawing() {
            map.entities.clear();
            circle = null;
            outputPanel.innerHTML = '';
        }
    
        function UpdateCircle(e) {
            //Calculate distance from circle center to mouse.
            var distance = Microsoft.Maps.SpatialMath.getDistanceTo(circle.metadata.center, e.location, Microsoft.Maps.SpatialMath.DistanceUnits.Miles);
    
            //Calculate circle locations.
            var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(circle.metadata.center, distance, 36, Microsoft.Maps.SpatialMath.DistanceUnits.Miles);
    
            //Update the circles location.
            circle.setLocations(locs);
    
            //Display the radius in miles rounded to 2 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 type="button" value="Draw Circle" onclick="DrawCircle()"/>
        <br/>
        <div id="output"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Wednesday, September 14, 2016 5:54 PM
    • Marked as answer by Ricky_Brundritt Thursday, September 22, 2016 5:51 PM
    Wednesday, September 14, 2016 5:54 PM
  • Customizing the toolbar is planned. It is also possible to not even use the toolbar and instead use the create and edit functions in the drawing tools. If you do this you can create a completely custom drawing toolbar.

    [Blog] [twitter] [LinkedIn]

    Thursday, September 15, 2016 2:44 PM
  • Yes, there are plans to add a circle drawing option in the future. I don't have a timeline for this at this time, however it is fairly easy to create this functionality using mouse events and the spatial math module. A code example of how to do this is here: https://social.msdn.microsoft.com/Forums/en-US/59235b79-78bb-46d5-ba59-3ea445b5783c/drawing-a-circle-in-v8?forum=bingmaps

    Currently there is no option for changing the position of the drawing toolbar, but there are plans to expose functionality for doing this soon. If you want to hide/show the toolbar, you will need to use the show/hide toolbar functions when your card closes/opens. Alternatively, you can fairly easily create a custom set of drawing buttons and use the Drawing Toolbox edit function to do all of this. Going this route will give you full control of the drawing toolbar as it will be your own UI. Here is a code sample that puts a polygon into edit mode when clicked and out of edit mode when "esc" is pressed.

    <!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;
    
        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 bind it 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 as the drawing tools will display it in the drawing layer.
                map.entities.remove(polygon);
    
                //Pass the polygon to the drawing tools to be edited.
                tools.edit(polygon);
            });
    
            //When the user presses 'esc', take the polygon out of edit mode and re-add to base map.
            document.getElementById('myMap').onkeypress = function (e) {
                if (e.charCode === 27) {
                    tools.finish(function (s) {
                        map.entities.push(s);
                    });
                }
            };
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Tuesday, November 29, 2016 11:58 PM
  • Unfortunately, since this is already a workaround, all you can do is add more workaround. An option to customize the position of the drawing toolbar hasn't been exposed yet. It is generally recommended to create custom toolbars when you want to do 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;
    
        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 bind it to the map.
                tools = new Microsoft.Maps.DrawingTools(map);
            
                //When the user presses 'esc', take the polygon out of edit mode and re-add to base map.
                document.getElementById('myMap').onkeypress = function (e) {
                    if (e.charCode === 27) {
                        tools.finish(shapeDrawn);
                        currentShape = null;
                    }
                };
            });
        }
    
        function drawPolygon() {
            //Stop any current drawing. 
            if (currentShape) {
                tools.finish(shapeDrawn);
                currentShape = null;
            }
    
            //Create a new polygon.
            tools.create(Microsoft.Maps.DrawingTools.ShapeType.polygon, function (s) {
                currentShape = s;
            });
        }
    
        function shapeDrawn(s) {
            //Do something with the shape that was drawn.
            //For this demo add it as a standard shape on the map.
            map.entities.push(s);
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div><br/>
        <input type="button" onclick="drawPolygon()" value="Draw Polygon"/>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Thursday, January 5, 2017 8:13 PM
  • I'll log this as a bug. Here is a simple workaround solution:

    Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
        var tools = new Microsoft.Maps.DrawingTools(map);
        tools.showDrawingManager(function (manager) {		
    		document.onkeydown=function keypress(e) {
    			e = (e||window.event);  
    			if (e.keyCode == 27) {
    				manager.setDrawingMode(Microsoft.Maps.DrawingTools.DrawingMode.none);
    			}
    		};
        });
    });


    [Blog] [twitter] [LinkedIn]

    Thursday, February 9, 2017 6:17 PM

All replies

  • Not yet, but we do have plans to add these. We also plan on providing a way to limit which controls appear it the tool bar as well. These will likely be available sometime around October.

    [Blog] [twitter] [LinkedIn]

    Thursday, July 28, 2016 2:52 PM
  • Hi,

    both options are really needed (Drawing circle and hide controls in the drawing tool bar).

    Are there new timings for those enhancements?

    Thanks

    Calle

    Wednesday, September 14, 2016 2:34 PM
  • Not at this time. We have a lot of features on our road map, and unfortunately this isn't at the top of the list at the moment. You can draw 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 type='text/javascript'>
            var map,
                outputPanel,
                circle,
                mouseDownEventHandler,
                mouseMoveEventHandler,
                mouseUpEventHandler;
    
        function GetMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key'
            });
    
            Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath');
    
            outputPanel = document.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 circle.
                circle = new Microsoft.Maps.Polygon([e.location, e.location, e.location]);
    
                //store the center point in the polygons metadata.
                circle.metadata = {
                    center: e.location
                };
    
                map.entities.push(circle);
            });
    
            mouseMoveEventHandler = Microsoft.Maps.Events.addHandler(map, 'mousemove', function (e) {
                if (circle) {
                    UpdateCircle(e);
                }
            });
    
            mouseUpEventHandler = Microsoft.Maps.Events.addHandler(map, 'mouseup', function (e) {
                UpdateCircle(e);
    
                //Unlock map panning.
                map.setOptions({ disablePanning: false });
    
                //Remove event handlers.
                Microsoft.Maps.Events.removeHandler(mouseDownEventHandler);
                Microsoft.Maps.Events.removeHandler(mouseMoveEventHandler);
                Microsoft.Maps.Events.removeHandler(mouseUpEventHandler);
            });
        }
    
        function ClearDrawing() {
            map.entities.clear();
            circle = null;
            outputPanel.innerHTML = '';
        }
    
        function UpdateCircle(e) {
            //Calculate distance from circle center to mouse.
            var distance = Microsoft.Maps.SpatialMath.getDistanceTo(circle.metadata.center, e.location, Microsoft.Maps.SpatialMath.DistanceUnits.Miles);
    
            //Calculate circle locations.
            var locs = Microsoft.Maps.SpatialMath.getRegularPolygon(circle.metadata.center, distance, 36, Microsoft.Maps.SpatialMath.DistanceUnits.Miles);
    
            //Update the circles location.
            circle.setLocations(locs);
    
            //Display the radius in miles rounded to 2 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 type="button" value="Draw Circle" onclick="DrawCircle()"/>
        <br/>
        <div id="output"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Wednesday, September 14, 2016 5:54 PM
    • Marked as answer by Ricky_Brundritt Thursday, September 22, 2016 5:51 PM
    Wednesday, September 14, 2016 5:54 PM
  • Thanks for the answer about circle drawing.

    What about the other part of beeing able to hide or add controls in the tool bar? 

    If we use your circle source from above we would need to add a control for it in the tool bar.

    Otherwise we cannot switch to V8 because in V7 our clients can draw polygones and circles.

    Placing a circle Icon elsewhere would not look very professional.

    Regards

    Calle

    Thursday, September 15, 2016 8:37 AM
  • Customizing the toolbar is planned. It is also possible to not even use the toolbar and instead use the create and edit functions in the drawing tools. If you do this you can create a completely custom drawing toolbar.

    [Blog] [twitter] [LinkedIn]

    Thursday, September 15, 2016 2:44 PM
  • Hi,

    We just wanted to check if your plan to add the circle on Drawing toolbox in V8.

    Also we have facing one issue while alignment of drawing toolbox. We have card in that we need to fit drawing toolbox but is not fitted. We tried to change the alignment and margin but it failed in some scenario. Here is screenshot it failed to align properly. Also when we collabsed this card then toolbox is remain on same position it did not Collapsed because it did not part of our div.

    We need add drawing toolbox as part of our div. Is it possible to do so. 

    Thanks!


    Balasaheb



    Tuesday, November 29, 2016 1:13 PM
  • Yes, there are plans to add a circle drawing option in the future. I don't have a timeline for this at this time, however it is fairly easy to create this functionality using mouse events and the spatial math module. A code example of how to do this is here: https://social.msdn.microsoft.com/Forums/en-US/59235b79-78bb-46d5-ba59-3ea445b5783c/drawing-a-circle-in-v8?forum=bingmaps

    Currently there is no option for changing the position of the drawing toolbar, but there are plans to expose functionality for doing this soon. If you want to hide/show the toolbar, you will need to use the show/hide toolbar functions when your card closes/opens. Alternatively, you can fairly easily create a custom set of drawing buttons and use the Drawing Toolbox edit function to do all of this. Going this route will give you full control of the drawing toolbar as it will be your own UI. Here is a code sample that puts a polygon into edit mode when clicked and out of edit mode when "esc" is pressed.

    <!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;
    
        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 bind it 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 as the drawing tools will display it in the drawing layer.
                map.entities.remove(polygon);
    
                //Pass the polygon to the drawing tools to be edited.
                tools.edit(polygon);
            });
    
            //When the user presses 'esc', take the polygon out of edit mode and re-add to base map.
            document.getElementById('myMap').onkeypress = function (e) {
                if (e.charCode === 27) {
                    tools.finish(function (s) {
                        map.entities.push(s);
                    });
                }
            };
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Tuesday, November 29, 2016 11:58 PM
  • Hi Ricky,

    We have drawing toolbar issue. We have handle the many scnario but we have still one issue as below.

    When we open multiple card and when scrollbar is appear and when we scroll down then the drawing toolbox also move along with it. It will not stick with its original position.

    Screenshot 1: Drawing toolbox at its original position.

    Screenshot 2 : When we scroll down then drawing toolbox also move along with it.        

    Is there any way to resolve this issue. Such that drawing toolbax stick ti its original position.

    Thanks!

     


    Balasaheb

    Wednesday, January 4, 2017 1:48 PM
  • Unfortunately, since this is already a workaround, all you can do is add more workaround. An option to customize the position of the drawing toolbar hasn't been exposed yet. It is generally recommended to create custom toolbars when you want to do 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;
    
        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 bind it to the map.
                tools = new Microsoft.Maps.DrawingTools(map);
            
                //When the user presses 'esc', take the polygon out of edit mode and re-add to base map.
                document.getElementById('myMap').onkeypress = function (e) {
                    if (e.charCode === 27) {
                        tools.finish(shapeDrawn);
                        currentShape = null;
                    }
                };
            });
        }
    
        function drawPolygon() {
            //Stop any current drawing. 
            if (currentShape) {
                tools.finish(shapeDrawn);
                currentShape = null;
            }
    
            //Create a new polygon.
            tools.create(Microsoft.Maps.DrawingTools.ShapeType.polygon, function (s) {
                currentShape = s;
            });
        }
    
        function shapeDrawn(s) {
            //Do something with the shape that was drawn.
            //For this demo add it as a standard shape on the map.
            map.entities.push(s);
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div><br/>
        <input type="button" onclick="drawPolygon()" value="Draw Polygon"/>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Thursday, January 5, 2017 8:13 PM
  • Hi Ricky,

    We are facing one issue when we used the drawing tool. Below is more info

    When we select the shape and draw our shape and when we try to use the escape button to complete our shape then escape button is not working in firefox but it works in IE and Chrome. 

    We have replicate the same issue in Bing map SDK. Can you please check and let us know when you resolve this issue.

    Thanks!


    Balasaheb

    Thursday, February 9, 2017 10:48 AM
  • I'll log this as a bug. Here is a simple workaround solution:

    Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
        var tools = new Microsoft.Maps.DrawingTools(map);
        tools.showDrawingManager(function (manager) {		
    		document.onkeydown=function keypress(e) {
    			e = (e||window.event);  
    			if (e.keyCode == 27) {
    				manager.setDrawingMode(Microsoft.Maps.DrawingTools.DrawingMode.none);
    			}
    		};
        });
    });


    [Blog] [twitter] [LinkedIn]

    Thursday, February 9, 2017 6:17 PM
  • Hi Ricky,

    We have changed the code as per your suggestion and it works. 

    Thanks!


    Balasaheb


    Monday, February 13, 2017 6:27 AM
  • I have been upgrading a current application to v8 and had a need to shift the drawing toolbar away from our current sidebar which also had to relocate from right side to left. Anyway, hope this hack helps someone.

       function shiftDivHorizontal(x_offset_px) {
          var d = $('.drawingBar')[0];
          d.style.left = (x_offset_px) +'px';
       }

    Sunday, May 7, 2017 4:33 PM
  • Hi,

    You can use following CSS to show drawing toolbar on right side or you can modified as per your requirment.  

     .MicrosoftMap .drawingBar {
        margin-top: 0.5% !important;
        left: 12px !important;
        z-index: 100001;
        margin-left: 76% !important;

    Thanks!


    Balasaheb

    Tuesday, May 9, 2017 9:14 AM