Azure Maps – Not finding the ability to select multiple areas

Hi rbraga87 , if you are talking about the selection of multiple areas by mouse inside the map, try STRG and left mouse button. That works for me.

Hi rbraga87,

So you are asking 2 questions,right?

• First one is how do you Select Multiple Areas in the New Azure Maps?
• Second one is how to Use the Previous Version (Legacy Azure Maps V1)

Lets Answer the First Question first:

To use the atlas.drawing namespace, You do not select multiple areas in a single action; instead you draw multiple shapes and then work with the collection of all drawn shapes.

Let me explain it step by step:

• First you must load the drawing tools module (It is not loaded by default)

<!-- Add the CSS and JS for the drawing tools -->
<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>

• Create a DrawingManager and a DrawingToolbar to allow users to draw shapes on the map

// Wait for the map to be ready
map.events.add('ready', function () {

    // Create a data source to hold the drawn shapes
    var dataSource = new atlas.source.DataSource();
    map.sources.add(dataSource);

    // Create layers for rendering the shapes
    var polygonLayer = new atlas.layer.PolygonLayer(dataSource, 'myPolygonLayer', {
        fillColor: 'rgba(255, 165, 0, 0.2)',
        strokeColor: 'red',
        strokeWidth: 2
    });
    map.layers.add(polygonLayer);

    var lineLayer = new atlas.layer.LineLayer(dataSource, 'myLineLayer', {
        strokeColor: 'red',
        strokeWidth: 2
    });
    map.layers.add(lineLayer);

    //*** THIS IS THE CORE PART: Create the DrawingManager ***
    var drawingManager = new atlas.drawing.DrawingManager(map, {
        dataSource: dataSource,
        // Define the initial state of the toolbar
        toolbar: new atlas.control.DrawingToolbar({
            position: 'top-right',
            // You can specify which buttons appear. 'all' is the default.
            buttons: ['draw-polygon', 'draw-rectangle', 'draw-circle', 'edit-geometry']
        })
    });

    // Now you can listen for events when a shape is added
    drawingManager.addEventListener('drawingcomplete', function (e) {
        // A new shape has been finished drawing!
        var newShape = e.shape;
        console.log("New shape added:", newShape);

        // You can now get ALL shapes from the dataSource
        var allShapes = dataSource.getShapes();
        console.log("All drawn shapes:", allShapes);

        // Do something with the collection of shapes (e.g. run a spatial query)
        // For example get the coordinates of all polygons:
        var allCoordinates = allShapes.map(shape => shape.getCoordinates());
        console.log("Coordinates of all areas:", allCoordinates);
    });
});

• How to use it? (Collected Shapes)

Once you have multiple shapes in your dataSource you can use them for various operations:

• Find points of interest within any of the drawn shapes
• Highlight the selected areas and display information.
• Export the coordinates of all shapes to send to your backend service

So lets clarify It Instead of a multi select mode you are in a continuous drawing mode, The collection of shapes in the dataSource is your multiple selection

So Lets Go ahead for the Second Question:

If you need to go back to old control you can do so by pinning your code to version 1 of the Web SDK:

• Simply change the URLs in your script and link tags from:

<!-- New Version (v2) -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

• To :

<!-- Legacy Version (v1) -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/1/atlas.min.css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/1/atlas.min.js"></script>

 
Final Notes:

• Version 1 is in maintenance mode, It will only receive critical security patches (not new features)
• recommended to migrate to Version 2 for long term support and access to the latest capabilities.