Map Pin Icons are overlapping

Mappedin JS
1

Issue we are facing:
We are experiencing a UI issue in our map implementation where the hotel icons (pins) remain visible even when the hover popup (info window) appears. The expected behavior is that when the user hovers over a pin, the popup should be displayed above it, but the pin should not be visible through the popup. However, currently, the icons are always visible (“always-visible” rank setting), causing them to remain in view even under the hovered popup.

Please refer the below code:
function pinLocalHotels(item, type) {
(global.mapView2).Markers.removeAll();
(global.mapView2).Paths.removeAll();
var cordinate = (global.mapView2).createCoordinate(
47.614533, -122.330846
);
setTimeout((global.mapView2).Camera.set({
center: cordinate,
}), 1000);
var markerCoordinate, markerHtml, icons;
$.each(item, function (key, value) {
var lat = parseFloat(value.position[1]), long = parseFloat(value.position[0]);
icons = type.toLowerCase().replaceAll(" “, “_”) + 'pin.svg’;
markerHtml = key.toLowerCase().replaceAll(" ", "”);
markerCoordinate = (global.mapView2).createCoordinate(
lat,
long
);
global.markers[key] = (global.mapView2).Markers.add(
markerCoordinate,
`
hotels

`, { rank: 'always-visible', } ); const marker = global.markers[key]; marker.contentEl.onclick = function () { showHotelMarkerinfo(type, key, icons); }; marker.contentEl.onmouseenter = function (e) { showHotelPinPopup(e, key, value, icons); }; marker.contentEl.onmouseleave = function (e) { hidePopup(e); }; }); }

function showHotelPinPopup(e, name, item, icons) {
if (global.currentExplore === ‘Microsoft Ignite and AMD Celebration’) {
global.currentExplore = “Celebration”
}
var template = global.htmlTemplates.localGuide.pins.hotelTemplate;
var newname, icon = ‘walk_icon.svg’, ariaLabel =‘walking Icon’;
if (global.currentExplore == “Celebration”) {
template = global.htmlTemplates.localGuide.pins.celebrationTemplate;
newname = name;
} else if (global.currentExplore === “Shuttles”) {
template = global.htmlTemplates.localGuide.pins.hotelTemplateShuttle;
if (name.includes(‘Route’)) {
newname = global.localGuide[‘Shuttles’][name].popupName;
} else {
newname = name;
}

} else {
    var newName = name.replace(/[\s-]+/g, '').toLowerCase();
    if (!global.walkHotels.includes(newName) && global.currentExplore === 'Hotels') {
        newname = name;
        icon = 'car_icon.svg';
        ariaLabel = 'driving Icon';
    } else {
        newname = name;
    }
}

template = template.replaceAll("{name}", newname)
    .replaceAll("{time}", item.time)
    .replaceAll("{distance}", item.distance)
    .replaceAll("{address}", item.address)
    .replaceAll("{icon}", icon)
    .replaceAll("{aria-label}", ariaLabel)

e.target.children[1].innerHTML = template;

}

2

Image for refernce:

image
image854×296 54.1 KB

3

Hiya @Jagadeesh,

There are a few ways you can address this:

  1. When adding markers, you can specify different rankings in the options instead of 'always-visible'

  2. Another method is you can play around with z-index by specifying the marker class .mappedin-marker. Here’s an example for marker anchors

Let me know if that resolves your problem!