React-leaflet: CRS.Simple property?

[farahabdi]

With leaflet js I can set the CRS as crs: L.CRS.Simple for a map with a flat surface.

How can I do that with react-leaflet? I went through the docs and couldn't find any information.
There was a previous thread but it was closed without any answers.

Appreciate any assistance.

[PaulLeCam]

As written in the documentation, all props are injected as options in the element constructor, so it works in a similar way.

[farahabdi]

Thanks for the response. I am new React so if you could give me some specific pointers:

I have the following leafletjs code that I want to convert to react-leaflet:

    var img = [
      3840,  // original width of image
      2160   // original height of image
    ]
    var map = L.map('map', {
      minZoom: 0,
      maxZoom: 2,
      center: [0, 0],
      zoom: 0,
      crs: L.CRS.Simple
    });

    // dimensions of the image
    var w = 3860,
        h = 2180,
        url = 'https://i.imgur.com/xxxxx.jpg';

    // calculate the edges of the image, in coordinate space
    var southWest = map.unproject([0, h], map.getMaxZoom()-1);  // {lat: -1100, lng: 10}
    var northEast = map.unproject([w, 0], map.getMaxZoom()-1);  //  {lat: -10, lng: 1960}

    const sw = {lat: -1100, lng: 10}
    const ne = {lat: -10, lng: 1960}
    var bounds = new L.LatLngBounds(sw, ne);

    // add the image overlay, 
    // so that it covers the entire map
    L.imageOverlay(url, bounds).addTo(map);

    // tell leaflet that the map is exactly as big as the image
    map.setMaxBounds(bounds);

I have this so far

import { Map, ImageOverlay } from 'react-leaflet'
....
const southWest = {lat: -1100, lng: 10}
const northEast = {lat: -10, lng: 1960}

const map = (
  <Map
       center={[0, 0]}
       zoom={13} 
       **crs={CRS.Simple}**
       maxBounds={[southWest], [northEast]}>
    <ImageOverlay
      url='https://i.imgur.com/xxxxx.jpg'
      **latLng={[southWest, northEast]}**
    />
  </Map>
)
...

Please advise how to fix bolded. How do I inject "CRS.Simple" in the constructor? I searched the repo and there are no references to CRS.Simple.

regards

[PaulLeCam]

You need to import it from Leaflet. This library uses Leaflet, it's not a replacement for it.