Here API: Marker with custom icon from component folder not showing

Razvan Razvi 0
Viewed 20

I am trying to create a marker with a custom icon. I created a new folder inside the component I am working with the images. I imported the image the image from the folder and tried using it. The problem is the marker is either not showing or I get an error.This is what my code looks like.

import hereIcon from './images/hereIcon.png';
const iconHere = <img src={hereIcon} />;
 marker = new H.map.Marker(coordinate,
    {
      icon: new H.map.Icon(iconHere,
        { size: { w: 56, h: 56 } }),
    });

My question is, how can I use the icon from a folder. I tested it with with an URL and it's working but I need it to work from a folder inside my project.

here-api reactjs
1 Answers

If you need to add local image, you can use DOM Marker like below code:

var kMarkerSearchResult  = "file:///resources/images/SearchResult.png";    
var markerHTML = '<div>' + '<img src="' + kMarkerSearchResult +'">' + '</div>';

var domIcon = new H.map.DomIcon(markerHTML);
var bearsMarker = new H.map.DomMarker({lat: 53.430, lng: -2.961 }, { icon: domIcon });

map.addObject(bearsMarker);

Don't forget to put "file: ///" at the beginning of the path.

Sachin Jonda0
Related