map-add-custom-html.md

title	description	author	ms.author	ms.date	ms.topic	ms.service	ms.custom
Add an HTML Marker to map | Microsoft Azure Maps	Learn how to add HTML markers to maps. See how to use the Azure Maps Web SDK to customize markers and add popups and mouse events to a marker.	stevemunk	v-munksteve	07/29/2019	conceptual	azure-maps	codepen, devx-track-js

Add HTML markers to the map

This article shows you how to add a custom HTML such as an image file to the map as an HTML Marker.

Note

HTML Markers do not connect to data sources. Instead position information is added directly to the marker and the marker is added to the maps markers property which is a HtmlMarkerManager.

Important

Unlike most layers in the Azure Maps Web control which use WebGL for rendering, HTML Markers use traditional DOM elements for rendering. As such, the more HTML markers added to a page, the more DOM elements there are. Performance can degrade after adding a few hundred HTML markers. For larger data sets consider either clustering your data or using a Symbol or Bubble layer.

Add an HTML marker

The HtmlMarker class has a default style. You can customize the marker by setting the color and text options of the marker. The default style of the HTML marker class is an SVG template that has a {color} and {text} placeholder. Set the color and text properties in the HTML marker options for a quick customization.

The following code creates an HTML marker, and sets the color property to "DodgerBlue" and the text property to "10". A popup is attached to the marker and click event is used to toggle the visibility of the popup.

//Create an HTML marker and add it to the map.
var marker = new atlas.HtmlMarker({
    color: 'DodgerBlue',
    text: '10',
    position: [0, 0],
    popup: new atlas.Popup({
        content: '<div style="padding:10px">Hello World</div>',
        pixelOffset: [0, -30]
    })
});

map.markers.add(marker);

//Add a click event to toggle the popup.
map.events.add('click',marker, () => {
    marker.togglePopup();
});

Below is the complete running code sample of the above functionality.

<iframe height='500' scrolling='no' title='Add an HTML Marker to a map' src='//codepen.io/azuremaps/embed/MVoeVw/?height=500&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen Add an HTML Marker to a map by Azure Maps (@azuremaps) on CodePen. </iframe>

Create SVG templated HTML marker

The default htmlContent of an Html marker is an SVG template with place folders {color} and {text} in it. You can create custom SVG strings and add these same placeholders into your SVG such that setting the color and text options of the marker update these placeholders in your SVG.

<iframe height='500' scrolling='no' title='HTML Marker with Custom SVG Template' src='//codepen.io/azuremaps/embed/LXqMWx/?height=500&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen HTML Marker with Custom SVG Template by Azure Maps (@azuremaps) on CodePen. </iframe>

Tip

The Azure Maps web SDK provides several SVG image templates that can be used with HTML markers. For more information, see the How to use image templates document.

Add a CSS styled HTML marker

One of the benefits of HTML markers is that there are many great customizations that can be achieved using CSS. In this sample, the content of the HtmlMarker consists of HTML and CSS that create an animated pin that drops into place and pulses.

<iframe height='500' scrolling='no' title='HTML DataSource' src='//codepen.io/azuremaps/embed/qJVgMx/?height=500&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen HTML DataSource by Azure Maps (@azuremaps) on CodePen. </iframe>

Draggable HTML markers

This sample shows how to make an HTML marker draggable. HTML markers support drag, dragstart, and dragend events.

<iframe height='500' scrolling='no' title='Draggable HTML Marker' src='//codepen.io/azuremaps/embed/wQZoEV/?height=500&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen Draggable HTML Marker by Azure Maps (@azuremaps) on CodePen. </iframe>

Add mouse events to HTML markers

These samples show how to add mouse and drag events to an HTML marker.

<iframe height='500' scrolling='no' title='Adding Mouse Events to HTML Markers' src='//codepen.io/azuremaps/embed/RqOKRz/?height=500&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen Adding Mouse Events to HTML Markers by Azure Maps (@azuremaps) on CodePen. </iframe>

Next steps

Learn more about the classes and methods used in this article:

[!div class="nextstepaction"] HtmlMarker

[!div class="nextstepaction"] HtmlMarkerOptions

[!div class="nextstepaction"] HtmlMarkerManager

For more code examples to add to your maps, see the following articles:

[!div class="nextstepaction"] How to use image templates

[!div class="nextstepaction"] Add a symbol layer

[!div class="nextstepaction"] Add a bubble layer