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?