Search code examples
leafletlatitude-longitude

How to convert x/y pixels into lat/long before the map is ready?

I have a custom layer which needs to be able to translate the requested tiles coordinates into lat/long.

  L.GridLayer.CanvasCircles = L.GridLayer.extend({
    createTile: function (coords) {
        console.log("coords", coords);
        if (window.map && window.map.layerPointToLatLng) {
          let latLng = window.map.layerPointToLatLng(coords);
          console.log("latLng", latLng);
        } else {
          console.log("No latLng yet");
        }
        ...

Unfortunately map.layerPointToLatLng() (and the reverse) are only available once the map is created.

    // Create the overall Leaflet map using the two layers we created.
    let map = window.map = new L.Map('map', {
      center: centre,
      zoom: 15,
      layers: [baseLayer, heatmap]
    })

Creating the map calls createTile() in my custom layer, but the map is not available yet, so my layer has to be blank on the first display of the map.

How can I fix this?

Are there any map-independent lat/long/z <-> x/y functions which I could use?

Solution

  • It might be that https://leafletjs.com/reference.html#crs contains the answer.

    latLngToPoint(<LatLng> latlng, <Number> zoom)   Point   
pointToLatLng(<Point> point, <Number> zoom)     LatLng

    Now I just need to figure out which projection is used by default. It seems to be EPSG:3857, but I'll need to check.

    Yes, this does the job:

    let latLng = L.CRS.EPSG3857.pointToLatLng(coords, coords.z);