Im trying to add a pushpin to an Azure map using SymbolLayer. But on zooming in and out my pushpins are moving instead of the map. How can I fix this?

Question

I'm trying to migrate my app from Bing maps to Azure maps. I'm adding a few custom pushpins on my map using the SymbolLayer. When I try to zoom in or out though, my pushpins are getting displaced while my map stays static. What might be the issue?

Answer 1

I suspect the issue is that your anchor point of your icon does not align with the point on the icon image you want. You can adjust this in a couple of ways.

• Use the icon options anchor setting. Good for most standard icon images.
• Use the icon options offset setting. Good for fine tuning.

For example, if the point on your image that you want to "anchor" to the coordinates on the map is the bottom left corner of the image, you could do the following:

var layer = new atlas.layer.SymbolLayer(datasource, null, {
    iconOptions: {
        anchor: 'bottom-left'
    }
});

Here is a sample to experiment with: https://azuremapscodesamples.azurewebsites.net/?sample=Symbol%20Layer%20Options

Here are the docs on the icon options for a symbol layer: https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.iconoptions?view=azure-maps-typescript-latest