Azure Maps - Changing Map Style and Adding Symbols to Existing Layer Issue

Question

Azure Maps - Changing Map Style and Adding Symbols to Existing Layer Issue

Ken Bowman 321

Hi,

I have a map with a SymbolLayer on it with the ability to click on the map to add a symbol and also click on a symbol to see it's ID in a popup. I am encountering an issue where if I change the map style and add a symbol and click on that symbol, the symbol is a different type of object (i.e., doesn't have a data property in the code example below and therefore the popup doesn't not appear) versus the symbols added prior to changing the map style. You can change the map style again and the symbol will be of the expected type when clicked on.

I've tried to create a simple example of the issue below:

<!DOCTYPE html>
    <html>
    <head>
        <title>Azure Maps - Changing Map Style and Adding Symbols to Existing Layer Issue</title>
        <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
    </head>
    <body>
        <div id="myMap" style="width: 100%; height: 500px;"></div>
        <div style="width: 100%;">
            Steps:
            <ol>
                <li>Click map to add a few symbols</li>
		        <li>Click symbol to view ID in a popup</li>
                <li>Change map style</li>
		        <li>Add another symbol</li>
				<li>Click new symbol - popup won't appear (popups on other symbols still work)</li> 
                <li>Change map style and click symbol again and the popup displays</li>
                <li>Repeat steps 4-6 with same results</li>
	</div>
        <script>
            let id = 0;
            let popup;
            // Initialize the map
            const map = new atlas.Map('myMap', {
                center: [-118.2437, 34.0522], // Los Angeles
                zoom: 10,
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: 'YOUR_AZURE_MAPS_SUBSCRIPTION_KEY'
                }
            });
            map.events.add('ready', () => {
                map.controls.add([new atlas.control.StyleControl()], {
                    position: atlas.ControlPosition.TopRight
                });
                const dataSource = new atlas.source.DataSource();
                map.sources.add(dataSource);
                const symbolLayer = new atlas.layer.SymbolLayer(dataSource, null, {
                    iconOptions: {
                        image: 'pin-round-darkblue', // Default Azure Maps icon
                        anchor: 'center'
                    }
                });
                map.layers.add(symbolLayer);
                // Add a click event to the map
                map.events.add('click', (e) => {
                    if (e.shapes && e.shapes.length > 0 && Object.hasOwn(e.shapes[0], 'data')) {
                        const shape = e.shapes[0];
                        const properties = shape.getProperties();
                        popup.setOptions({
                            content: `<div style='padding:16px 4px 4px 4px'><strong>ID:</strong> ${properties.id}</div>`,
                            position: shape.getCoordinates()
                        });
                        popup.open(map); // Opens the popup at the symbol's location
                        return;
                    }
                    if (e.position) {
                        const newPoint = new atlas.data.Feature(new atlas.data.Point(e.position), {
                            id: id++
                        });
                        dataSource.add(newPoint); // Add the new point to the data source
                    }
                });
                popup = new atlas.Popup({
                    position: [0, 0], // Placeholder position
                    pixelOffset: [0, -18] // Adjusts the position of the popup
                });
            });
        </script>
    </body>
    </html>

VSawhney 715 Reputation points Microsoft External Staff Moderator

2025-06-24T06:12:20.5333333+00:00
Hello Ken Bowman,

It sounds like you’re running into a peculiar issue with Azure Maps when switching map styles and adding new symbols. From what you’ve described, it seems that after changing the map style, the newly added symbols don’t retain the expected properties that the previous symbols had.

Here’s what you can try to troubleshoot the issue:

Rebind Event Listeners After Style Change Changing the map style can internally reset or re-render layers and event bindings. Ensure that your click event listener is still correctly attached to the map and symbol layer after the style change. You might need to rebind the event or reinitialize the popup logic.

Verify Feature Object Type After a style change, the e.shapes[0] object may not be a Feature instance. You can add a check like:
if (e.shapes[0] instanceof atlas.data.Feature) { // Safe to access .getProperties() }
This ensures you're working with the expected object type.

Use feature.properties Instead of shape.getProperties() In some cases, especially after style changes, the shape may not expose getProperties() but still contain a properties object. Try accessing e.shapes[0].properties.id directly as a fallback.

Ensure DataSource Persistence Confirm that the dataSource and symbolLayer are not being reset or replaced during the style change. If they are, re-adding them explicitly after the style change may help maintain consistency.

Use map.events.add('styledata', ...) Azure Maps emits a styledata event when the style changes. You can hook into this to reapply any logic or refresh layers:
map.events.add('styledata', () => { // Reapply symbol layer or rebind events if needed });

SDK Version Check Ensure you're using the latest Azure Maps Web SDK. Some quirks with style transitions and layer persistence have been addressed in recent updates.

Hope this helps!
Thank you!

Accepted answer

0 additional answers

Your answer

Answer 1

rbrundritt 20,836 Microsoft Employee Moderator

Doing a bunch of testing this looks like a new bug. It appears that the newly added point isn't being converted to a Shape object, or something in the data source isn't picking it up. When clicking on the new pin, a GeoJSON feature of the point is being returned in the event instead of a Shape object.

I was also able to reproduce this with an event directly on the layer as well.

I'll reach out to the Azure Maps team to investigate.

Share via

Azure Maps - Changing Map Style and Adding Symbols to Existing Layer Issue

0 additional answers

Your answer