How to detect a click event on Azure Maps geometries

Question

How to detect a click event on Azure Maps geometries

Kevin Cai 40

How can clicks on geometries drawn in Azure Maps be detected?

It would also be helpful if you could tell me if once I receive the clicked shape, how to enable edit and erase programmatically on that shape.
I couldn't find these in the documentations, thanks in advance!

LeelaRajeshSayana-MSFT 17,766 Reputation points Moderator

2023-07-31T21:22:37.7+00:00

Hi @Kevin Cai We still have not heard back from you. Just wanted to check if the answer provided below was helpful? If it answers your query, please do click Accept Answer and Yes for the answer, as it might be beneficial to other community members reading this thread. And, if you have any further query do let us know. Thank you

Accepted answer

0 additional answers

Your answer

LeelaRajeshSayana-MSFT 17,766 Reputation points Moderator

2023-07-31T21:22:37.7+00:00

Hi @Kevin Cai We still have not heard back from you. Just wanted to check if the answer provided below was helpful? If it answers your query, please do click Accept Answer and Yes for the answer, as it might be beneficial to other community members reading this thread. And, if you have any further query do let us know. Thank you

Answer 1

rbrundritt 20,836 Microsoft Employee Moderator

There are several ways to have an event fire when a geometry is clicked:

Add a click event to the layer that displays the geometry.
Add a click event to the map and look to see what geometries are clicked (you will likely end up with a bunch of the base map geometries mixed in like roads and things that you will have to filter through).

It sounds like you want to be able to click a geometry and then put it into edit mode or erase it. In that case it is best to use the drawing tools module for Azure Maps and then add your geometry to the data source of the drawing manager. That automatically adds the required events for you. Then you just click the edit or erase button from the drawing tool bar. Here is a code samples for this: https://samples.azuremaps.com/?search=drawing&sample=load-data-into-drawing-manager

Kevin Cai 40 Reputation points

2023-08-03T18:48:03.8466667+00:00

The geometries I want to edit is drawn by the drawing manager. How do I add an event listener to detect when a drawn geometry is clicked on, and automatically bring it into edit mode without needing to first click the edit button from the drawing tool bar.

rbrundritt 20,836 Microsoft Employee Moderator

You can retrieve the layers from the Drawing Manager using the getLayers function. This will return an DrawingLayers object that has 4 layers in it; pointLayer, lineLayer, polygonLayer, polygonOutlineLayer. You can then attach events to these layers. However, note that doing so could cause some complexity as these events will fire regardless of what the drawing mode is, so you will need to add some logic in the event handler to handle these conditions, otherwise you will run into odd situations where you are in the middle of drawing one shape, click to add a point to it and if it overlaps or is very close to another shape, may end up exiting the drawing mode and going into edit mode on the selected shape. I have done something similar to what you described in the Spatial Imagery Labelling Toolkit but wait for the drawing mode to be in the idle state.

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>

    <meta charset="utf-8" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3.0.0-preview.10/atlas.min.css" rel="stylesheet" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3.0.0-preview.10/atlas.min.js"></script>

    <!-- Add references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>

    <script>
        var map, drawingManager;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-122.33, 47.6],
                zoom: 12,
                view: 'Auto',
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create an instance of the drawing manager and display the drawing toolbar.
                drawingManager = new atlas.drawing.DrawingManager(map, {
                    toolbar: new atlas.control.DrawingToolbar({ 
						position: 'top-right', 
						style: 'light',
						
						//Show all but the edit button.
						buttons: ['draw-point','draw-line','draw-polygon','draw-rectangle','draw-circle','erase-geometry']
					})
                });

                //Get the rendering layers from the drawing manager.
                var layers = drawingManager.getLayers();
				
				//Add a click event to all the rendering layers.
				map.events.add('click', [layers.pointLayer, layers.lineLayer, layers.polygonLayer, layers.polygonOutlineLayer], shapeClicked);              
            });
        }
		
		function shapeClicked(e) {
			//Make sure the drawing manager is in the idle mode.
			if(drawingManager.getOptions().mode === 'idle') {
				drawingManager.edit(e.shapes[0]);
			}		
		}
    </script>
</head>
<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;height:800px;"></div>
</body>
</html>

Share via

How to detect a click event on Azure Maps geometries

0 additional answers

Your answer