Hands On

Customizing Map Markers with DOM and SVG Configurations

By Nic Raboy | 19 September 2019

I frequently lurk in Stack Overflow looking for ways to improve the experience developers have with the various HERE APIs. A common question that comes up is around customizing markers, whether that be changing the color of the marker, the shape of the marker, or adding text to the marker.

In this tutorial, we’re going to look at a few examples that make this possible.

Take a look at the following image:

marker-examples

In the above example, we have two custom markers created two different ways. In one marker we are constructing it with DOM found in HTML and in the other marker we are using an SVG image.

Creating a Marker with the HTML DOM

We’re going to first explore creating markers using simple DOM elements. While my example isn’t too complicated, it could become such if you wanted it to be.

Take a look at the following JavaScript code:

const dom = document.createElement("div");
dom.style.width = "50px";
dom.style.height = "50px";
dom.style.borderRadius = "25px";
dom.style.backgroundColor = "#000000";
dom.style.color = "#FFFFFF";
dom.style.display = "flex";
dom.style.fontSize = "20px";
dom.innerHTML = "<p style='margin: auto'>DOM</p>";
const domIcon = new H.map.DomIcon(dom);
map.addObject(new H.map.DomMarker({ lat: 37.2, lng: -121.2 }, { icon: domIcon }));

What we’re doing is we’re creating an element, accessing it with JavaScript, and modifying the style information or whatever else is necessary. In this example we’re creating an element where the container is round and of a certain size and color. Then the text is added to the inner portion of the container.

Instead of using new H.map.Marker, we make use of a DomMarker which is nearly the same in terms of setup.

If you end up using a DomMarker, I’d advise adding the construction of the DOM to its own function so you don’t have to repeat yourself too often.

Creating a Marker with SVG XML

Another way, and my personal preferred way, is to create an SVG icon for the marker. At its core, an SVG is more or less XML markup to illustrate curves, colors, and other stuff. We can add this XML markup directly to our application and render it.

Take the following for example:

const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
        <circle cx="25" cy="25" r="25" fill="#000000" />
        <text x="50%" y="50%" text-anchor="middle" fill="white" font-size="20px" dy=".3em">SVG</text>
    </svg>
`.trim();
const svgIcon = new H.map.Icon(svg);
map.addObject(new H.map.Marker({ lat: 37, lng: -121 }, { icon: svgIcon }));

The above code is an example of defining some XML for an SVG and adding it to a standard marker as an icon. You can come up with much more complex icons when using an SVG.

In the above example, it is important to note the use of the trim function for JavaScript. Because I’m using a multiline string for the XML and there are tabs, we need to trim away the whitespace to prevent errors.

Like with the DomMarker, I recommend bringing the XML markup for an SVG into its own function.

Conclusion

You just saw two different ways to create a custom map marker. A third way, and probably the least flexible of the bunch, is to use a static image as your map marker. This will give you a complex marker, but it won’t be very dynamic if you need to change minor features or text ad-hoc.

Don’t forget, you don’t need to use SVG or DOM components for markers. If you don’t need to customize anything, a standard marker with the default icon will work just fine.