[GIS] leaflet map crs is 3857 but coordinates 4326

Question

I am developing my first leaflet applications. So this is my trial application demo.

       var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osm = L.tileLayer(osmUrl, {
                maxZoom: 18,

            });

        var map = L.map('map').setView([51.505, -0.09], 12).addLayer(osm);

I am getting the CRS of the map, and CRS is EPSG:3857.

 console.log("map crs: " + map.options.crs.code)

I can add a point data with EPSG:4326 coordinates.

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A popup.')
.openPopup();

But I can not add EPSG:3857 coordinates.

    L.marker([5732953.77585,-10018.7582914]).addTo(map)
    .bindPopup('A popup.')
    .openPopup();

This goes wrong place.

Answer 1

This is a feature, not a bug. Most Leaflet users are not aware that the map's display CRS is different from the map's data CRS, and that's fine; it makes life simpler for most people.

If your question would have been...

I have data in EPSG:3857 but Leaflet will only accept EPSG:4326 LatLngs, how can I add my data?

Then the answer would have been:

You will have to project your data from EPSG:3857. Use proj4js, or proj4leaflet, or simply:

var coords4326 = L.Projection.SphericalMercator.unproject(coords3857);