Deniss M.
Deniss M.

Reputation: 4050

Here map: snapshot API screenshots are not showing any markers

I am trying to use the snapshot API via HERE Maps JS to take a screenshot of the current map. The screenshot only shows the map without any markers (a mixture of html + img which contains an SVG).

This is the code for adding markers:

...
const markerElement = document.createElement('div');
markerElement.id = m.report.extId;
markerElement.className = 'marker-item';
markerElement.style.animation = `fadeIn ease ${animationSpeed}`;
markerElement.style.height = `${this.iconSize}px`;
markerElement.style.width = `${this.iconSize}px`;
markerElement.style.position = 'absolute';
markerElement.style.left = '-25px';
markerElement.style.zIndex = '1';
const fragment = document.createDocumentFragment();

...

const mainIcon = document.createElement('IMG');
mainIcon.setAttribute('src', m.icon);
mainIcon.id = m.report.extId;
mainIcon.className = 'marker-item';
mainIcon.style.width = `${this.iconSize}px`;
mainIcon.style.height = `${this.iconSize}px`;
mainIcon.style.zIndex = '1';
fragment.appendChild(mainIcon);

...

markerElement.appendChild(fragment);
const icon = new H.map.DomIcon(markerElement);
const coords = {lat: +m.lat, lng: +m.long};
const marker = new H.map.DomMarker(coords, {icon});

this.map.addObject(marker);
...

What is also interesting is that I have another "type" of marker, which actually is visible on the screenshot:

const presenceElement = document.createElement('div');
presenceElement.id = p.extId;
presenceElement.className = 'presence-item';
presenceElement.style.animation = `fadeIn ease ${animationSpeed}`;
presenceElement.style.height = `${this.iconSize / 3}px`;
presenceElement.style.width = `${this.iconSize / 3}px`;
presenceElement.style.position = 'absolute';
presenceElement.style.background = 'green';
presenceElement.style.borderRadius = '20px';
presenceElement.style.opacity = '0.1';
presenceElement.style.border = '1px solid white';
presenceElement.style.left = '-15px';
presenceElement.style.zIndex = '1';

const icon = new H.map.DomIcon(presenceElement);
const coords = {lat: +p.lat, lng: +p.lng};
const marker = new H.map.DomMarker(coords, {icon});

this.map.addObject(marker);

I am wondering if anybody had the same issue and was able to solve it.

Upvotes: 0

Views: 32

Answers (0)

Related Questions