<

Custom Map Labels Sample

This sample shows how to create custom labels on the map by using pushpins. There are two common ways to do this:

• SVG templated pushpin icon with the text (indepth) - Pushpins have a text property which can easily be passed into an SVG icon. This is rendered right on top of the icon and is always visible. This option provides a lot of flexibility for customization.
• Pushpin title and transparent icon (easy) - Pushpins have a title property that is usually rendered below a pushpin but makes use of label collision detection which means it will move to other locations around the pushpin or be hidden if other pushpins on the map overlap the label. Using this approach provides no options for customizing the label font or color.

If you zoom the map out such that the pushpins are close together, you should see the title labels move or hide.

Another options is you can hide/show labels based on zoom level with the use of a few map events. You can also use this to change the color of labels based on the map style as you would likely want lighter color labels when the map is dark and darker labels on a light map. If you have multiple labels that are within the same zoom level ranges, then take a look at using a layer as it will be more efficient.

Also take a look at the Font Based Pushpin Icons sample.