Leaflet: panTo Web Mercator coordinates (EPSG 3857)

Question

I have a standard elevator map showing a tile layer. Now the brochure allows you to use the panTo method, using, for example, LatLng,

 map.panTo(new L.LatLng(40.17, -98.12)); 

How will I use the panTo method above if my coordinates are in EPSG:3857 , for example (3679364.68,-9096106.74) ?

This is pretty simple in Openlayers, since once you define a map projection, everything works in that projection. But Flyer always works on latlng outside.

Any easy way to accomplish this using a flyer library ?

Thanks!

Answer 1

I can make it work if I use the proj4js library to convert coordinates by doing the following:

 var source = new Proj4js.Proj('EPSG:3857'); var dest = new Proj4js.Proj('EPSG:4326'); var p = new Proj4js.Point(-9096106.74,3679364.68); //this takes x,y Proj4js.transform(source, dest, p); this.map.setView(new L.LatLng(py, px),zoom); 

But this is still not an ideal solution, as it imposes on me Megabyte to enable the library. I'm still looking for a flyer solution. Knowing that inside the sheet already uses EPSG: 3857 to extract tiles, it should not be so difficult.

 Update 

To do this exclusively in the Flyer, take a look at @ARsl's answer. The only reason I still accept this as my answer is because I still feel uncomfortable doing projection calculations (not that they were wrong), and it is for this reason that I do not accept this answer. Plus proj4js as additional benefits of supporting many other databases.

Answer 2

The flyer allows you to use the panTo method on the unproject 3857 object. If you do not want to use the proj4js library, this is also achieved in the flyer.

 var point = new L.Point(3679364.68,-9096106.74); // Lon/Lat var earthRadius = 6378137; var latlng = L.Projection.SphericalMercator.unproject(point.divideBy(earthRadius)); map.panTo(new L.LatLng(latlng.lat, latlng.lng)); 

Answer 3

I also did not find a built-in method for converting EPSG: 3857 coordinates to LatLng.

The LebLet crs L.CRS.EPSG3857 has only the project method, which converts L.LatLng to L.Point in EPSG coordinates: 3857. https://github.com/Leaflet/Leaflet/blob/master/src/geo/crs/ CRS.EPSG3857.js

But it is quite easy to extend using the unproject method:

 L.CRS.EPSG3857.unproject = function (point) { // Point -> LatLng var earthRadius = 6378137; projectionPoint = L.point(point).divideBy(earthRadius); return this.projection.unproject(projectionPoint); }; 

Then you can use it with the panTo method:

 map.panTo(map.options.crs.unproject([1372720.6476878107, 5690559.995203462])); 

or

 map.panTo(L.CRS.EPSG3857.unproject([1372720.6476878107, 5690559.995203462]));