Adding a marker to azure maps

Question

I starting with Azure Maps, I'm trying to add one of my PNG file as a marker using this method:

private addBoatMarker(position: [number, number]): void {
    const boatMarker = new atlas.HtmlMarker({
        htmlContent: '<img src="../js/img/up south west.PNG" style="width: 50px; height: 60px;">',
        position: position,
        text: 'test text',
        anchor: 'center'
    });
    this.map.markers.add(boatMarker);
}

Nothing is shown on the map, is there something wrong with this code ? The goal is to display an image of a small boat on the see and when user clicks elsewhere, the image moves to the next location. is this the best way to do this ?

Thanks, Claude

Answer 1

First off, be sure to check the console of your browser for errors. Things I would look for are errors related to the file not being found which would indicate and issue with the file path/url. Other than that, it should work.

Make sure your position is ordered [longitude, latitude], otherwise the marker would end up somewhere else on the map, possibly out of view of where you are looking.

All that said, the HTML marker feature isn't used that often and is mainly there for legacy solutions that use css classes/animations, or when you need to be able to drag it around with the mouse. If you aren't displaying a lot of points, its, fine, but once you get into the hundreds, that generates a lot of DOM elements, and the more of those there are in the browser, the slower the browser gets. In Azure Maps you can use a symbol layer to display custom icon images for points, with high performance. These are rendered in WebGL and can easily display 100,000+ in a browser. There is a little more work in getting it setup since you need to preload the image into the map before using it in the layer. As a bonus, with this approach you can use data driven styling which is may be a bit complex at first, but once you understand it, it allows you to create really good looking, high performance maps. Here is a sample that uses a custom image with a symbol layer: https://samples.azuremaps.com/?sample=custom-symbol-image-icon