Translate SVG circle coordinates to the leaflet geographical coordinate system

1
votes

I'm working a proof-of-concept app that shows a real-time map of the metros in Brussels (see it). I created the map using Adobe Illustrator, and I use a circle to represent each stop. For the map view, I'm using leafletjs.

For example, this a simplified version of the svg map with a circle.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5457 4961">
<defs><style>.a{fill:#fff;stroke:#000;stroke-miterlimit:10;}</style></defs>
<title>Simple Map</title>
<circle class="a" cx="1957.5" cy="1399.5" r="4.5"/></svg>

And this is the definition of my leafletjs map

var map = L.map('map', {
            crs: L.CRS.Simple,
            zoomDelta: 0.50,
            zoomSnap: 0,
            minZoom: -1,
            maxZoom: 1.5 ,
            touchZoom: true,
            fullscreenControl: true,
});

var bounds = [[0,0], [1000,1000]];
var image = L.imageOverlay('./images/map.svg', bounds).addTo(map);

My question is:

Could be possible to translate the cx and cy of the svg circle to the leaflet geographical coordinate system?

I need to put a leaflet marker at all the stops where is a metro. Right now, for the only line showed on my map I obtained the coordinates by hand :(

Thanks in advance! Humberto

1
svgleaflet

1 Answers

0
votes

you can use this to move your circle where x and y are the x-axis and y-axis cordinates respectively

$('rect').attr("transform","translate("+x+","+y+")");