HTML Markers replacing each other despite different coordinates

Question

I'm trying to add HTML markers to a map but when I put down all 32 they didn't all show up. So I incrementally added them to debug and for some reason when adding the 5th HTML marker it replaces the 1st. But when I get new coordinates that are in a similar location for the 5th marker, it shows the marker correctly. I tried shortening the decimal places but it did not work. Here is my code

map.events.add('ready', function () {  
      map.markers.add(new atlas.HtmlMarker({  
        color: '#CEB888',  
        text: '1',  
        position: [-86.91109387532603, 40.42358610987309]  
      }));  
      map.markers.add(new atlas.HtmlMarker({  
        color: '#CEB888',  
        text: '2',  
        position: [-86.91098134969975, 40.42366871299652]  
      }));  
      map.markers.add(new atlas.HtmlMarker({  
        color: '#CEB888',  
        text: '3',  
        position: [-86.91098134969975, 40.42366871299652]  
      }))  
        
      map.markers.add(new atlas.HtmlMarker({  
        color: '#CEB888',  
        text: '5',  
        position: [-86.91109387532603, 40.42358610987309]  
      }))  

Here are the map properties if useful
center: [-86.9143, 40.4278],
zoom: 15,
maxBounds: [-86.97, 40.4, -86.89, 40.45],
renderWorldCopies: false,
view: "Auto",

Answer 1

Those coordinates represent the same pixel all the way down to zoom level 22. A single change at the 6th decimal places of a coordinate is about 11cm. So, if you trim your coordinates to 6 decimals and the numbers are very similar at that level, they more than likely will completely overlap until you zoom in really close.

Note that in your case, marker 1 and 5, 2 and 3 are the exact same coordinates. If you trim the decimal places of a single one of those points in each pair, you would not see a difference until at least 5 decimal places.