![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(182.40000000000003, 78%, 27%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ENK%3C/text%3E%3C/svg%3E)
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
736 questions
I'm assuming you have a function called clusterClicked as that was the first error I ran into when I tried to run the code you provided.
Looking at your code you only have one layer that is adding labels;
//Create a symbol layer to render the count of locations in a cluster.
new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'none' //Hide the icon image.
},
textOptions: {
textField: ['get', 'point_count_abbreviated'],
offset: [0, 0.4]
}
}),
This could would only display the point count information as a label, and that would only appear for the clusters. It would likely be a good idea to add a filter for clusters to this layer as well. Add the following: filter: ['has', 'point_count']
The code for your shape layer looks like the following:
var shapeLayer = new atlas.layer.SymbolLayer(datasource, null, {
filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
})
This code doesn't add any text label for the individual shapes, thus the "Test" labels are not appearing. You can modify the code as follows to show the label:
var shapeLayer = new atlas.layer.SymbolLayer(datasource, null, {
textOptions: {
textField: ['get', 'label'], //Alternatively replace with 'label' property name.
anchor: "top", //Show the label below the pin.
color: ['get', 'color'], //Set the color of the text. Alternatively pass in a color value here if the color will always be one color.
},
filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
})
Note that some labels may be hidden if they overlap with anything. You can make them always appear by adding the following options to the symbol layer:
allowOverlap: true,
ignorePlacement: true
Now, the labels still will not show up if you make these changes. The last issue is that you are passing the properties into the id filed of the Shape constructor. You can set the id to null and the map will automatically assign a unique id. Modify your code as follows:
marker = new atlas.Shape(new atlas.data.Point([data[1], data[0]]), null, {
color: 'DodgerBlue',
text: "Test",
label: "Test"
});
Using a symbol layer is the best route to go as it easily supports data driven styling and can handle tens of thousands of shapes easily, while Html markers typically run into performance issues once you get into the hundreds.