Marker placement

Mappedin JS
1

The anchors property of the marker does not work.
I place a marker indicating the coordinate with anchor=top and draw a path from this marker, but the marker location is not correct sometimes.
You can see that the location of the marker and the start of the path do not match:

map1
map1606×467 56.4 KB

map2
map2606×467 66.8 KB

2

Hi @dian,

Do you mind sharing a code snippet of your marker implementation? And any related CSS styling if you added it?

3

This is the code:

const icon ='<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAABK0lEQVR4nO2WT0rDQBTGf6IXcFG3uqveQbpvQY+hF2hdqqco/tkp9R5aulBX0gNUURAU3EuUkQdfYAhpMpEYReaDRwbmve8382YSAlF/XBPAKcZNgl0mIvjH5GKrm5KLrW5K7t+3+ioHNi8u6wTfVABf1wFc0HMFmAZAp8r1aytpHRgCz0A3EO5Du6odyitIB8C7Z3gHtErgPrSlmnTOvPbLoHtK/gCO5qw2C/ehvqz2WF4OGBSBX5W0VbJAA90q8qC+tuX5UpT0oKT0XOtQT573Ia1Oql6MHG3ouBJ59ouS7RU49M7FYgacATvAJrAKLAOLChuvaW4XONfu0vpElyvo9bKdngJvFT4c2bDaE6D9nXYtAR3dyAv91j7J9FNh40fNjZTbUW3U7+sLixWsPLXB6oMAAAAASUVORK5CYII=" >'
origin_point = mapView.createCoordinate(
      43.97410070773529755,
      -78.16226409832771755,
       "m_9b34472d80f1af20",
)

mapView.Markers.add(origin_point, `<div id="origin-wrapper">${icon}</div>`,{
        rank: "always-visible",
        anchor: "top",
        interactive: true,
})



function getDirections(e){
        const element_id = e.target.getAttribute('data-id') 
        const destination = data_labels.find((s) => s.id === element_id);
        const directions = mapData.getDirections(origin_point, destination);
            
        if (directions) {
              mapView.Paths.add(directions.coordinates,{
                    displayArrowsOnPath: false,
                    nearRadius: 0.3,
                    color:  '#428BCA',
               })
        }
 }

#origin-wrapper{
    border: 1px solid #000;
}

The coordinates of the marker and the origin point of the path are the same. But sometimes when loading the page it shows different position of the marker.

4

Is there a specific version of Mappedin that you’re using?

Here’s a sandbox I created trying to replicate (click to add icon) and it seems to hit the coordinate correctly.

Do you render the marker before or after directions?

5

Hi @KimCodeashian,
In the example you shared, the marker appears to be in the hallway or the room, depending on the camera orientation.

How can this be fixed?

image
image486×497 28.4 KB

image
image486×497 21.6 KB

6

Hi dian,

Great question! You’re correct, the current behavior happens because our markers exist in 2D screen space rather than true 3D space. This means they’re always rendered on top and aren’t occluded by walls or other objects in the scene.

The benefit of this approach is that markers can be fully styled with HTML/CSS, giving you maximum flexibility. The trade-off is that they don’t interact with 3D geometry.

A workaround is to adjust marker placement or use visibility toggles based on camera position.