I am using LeafletJS and JavaScript to display points on a MapBox map. The points are not lining up though. They are close but not exact

0
votes

I am using LeafletJS to display points on a MapBox map. The points are not lining up though. They are close but not exact.

I have my setView set to the following location:

var mymap = L.map('mapid').setView([40.311420, -75.134643], 17);

Then I am trying to plot a point at 40.310676, -75.138090 by doing this: 

    temp.LatLng = new L.LatLng(40.310653, -75.138070);

    g.append("circle")
        .attr("cx", temp.LatLng.lat)
        .attr("cy", temp.LatLng.lng)
        .attr("r", 10)
        .attr("fill", "#ffff00")
        .attr("stroke", "#ffff00")
        .attr("transform", "translate(" + mymap.latLngToLayerPoint(temp.LatLng).x + "," + mymap.latLngToLayerPoint(temp.LatLng).y + ")");

As you can see in the image below the point (in yellow) does show up but it is not in the correct location. It should be where the red dot is. enter image description here

Thank you in advance for any help you might be able to supply.

2
javascriptleafletmapbox

2 Answers

1
votes

I ended up answering my own question.

In the code where i am drawing the circles I was setting the cx and cy to the latitude and longitude and then transforming them from there. Like this:

   g.append("circle")
        .attr("cx", temp.LatLng.lat)
        .attr("cy", temp.LatLng.lng)
        .attr("r", 10)
        .attr("fill", "#ffff00")
        .attr("stroke", "#ffff00")
        .attr("transform", "translate(" + mymap.latLngToLayerPoint(temp.LatLng).x + "," + mymap.latLngToLayerPoint(temp.LatLng).y + ")");

What I should have been doing is drawing the original circle at 0,0 and transforming them from there. This is what the coded ended up looking like:

   g.append("circle")
        .attr("cx", 0)
        .attr("cy", 0)
        .attr("r", 10)
        .attr("fill", "#ffff00")
        .attr("stroke", "#ffff00")
        .attr("transform", "translate(" + mymap.latLngToLayerPoint(temp.LatLng).x + "," + mymap.latLngToLayerPoint(temp.LatLng).y + ")");
0
votes

Use L.Circle or L.CircleMarker. This will let Leaflet deal with the specific details of positioning SVG geometries in the DOM.