Reputation: 4050
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