How to add leaflet map to canvas with latest version of react-leaflet?

[AlexanderBaikal]

I'm trying to add leaflet map to canvas with react-leaflet v3. In latest versions of react-leaflet there isn't Map object there is MapContainer object only. So I can't add property preferCanvas=true to MapContainer. It is noteworthy that in old versions of react-leaflet there was Map object with preferCanvas option but then it was removed. I think another way to add map to canvas exists. Please, help.

[bivald]

Hi,

This is my first day using react-leaflet so YMMW but it appears that any options not understood by <MapContainer> is sent to Leaflet Map instance. At least by looking at https://github.com/PaulLeCam/react-leaflet/blob/master/packages/react-leaflet/src/MapContainer.tsx#L64 and https://github.com/PaulLeCam/react-leaflet/blob/master/packages/react-leaflet/src/MapContainer.tsx#L38

So you should be able to simply do:

<MapContainer 
 preferCanvas={true} renderer={L.canvas()}>

Not sure if renderer={L.canvas()} is needed to be honest.

[dngconsulting]

In the same topic, Is there any way to use react-leaflet v3 with a feature like https://github.com/lycheelin/react-leaflet-canvas-markers/blob/master/src/leaflet.canvas-markers.js ? I need to display 1000 markers and the performances are currently pretty bad when the map is scrolled, the idea would be to use Canvas instead of actual SVG.

Is there any sample/example that shows the usage of canvas.getContext() on react-leaflet v3 ? It's really hard to find any support with this new version. Many plugins are getting obsolete (e.g full screen) and important features like OverlayCanvas are really hard to implement..

Thanks for any help

[bivald]

@dngconsulting this is how I've done it. Unfortunately I don't have time to do a complete copy/paste example, but it should get you started:

...
import L from "leaflet";
import reactElementToJSXString from 'react-element-to-jsx-string';
...

const Map = (props) => {
  const [myMarkers, setMyMarkers] = useState( L.layerGroup());
  const [map, setMap] = useState(null)

  const setMapReference = (map) => {
    setMap(map);

    myMarkers.addTo(map);
    setMyMarkers(myMarkers)

    map.on('zoomend', function() {
      let radius = 8;
      const zoom = map.getZoom();
      console.log(zoom);

      if (zoom < 18) {
        radius = 7;
      }else if(zoom < 17) {
        radius = 6;
      }else if(zoom < 16) {
        radius = 5;
      }else if(zoom < 15) {
        radius = 4;
      }else if(zoom < 14) {
        radius = 1;
      }
      myMarkers.eachLayer(function (marker) {
        marker.setRadius(radius);
      });
    });
  }


  const center = {
    lat: 58.9809976,
    lng: 16.2129849,
  };

  const refreshLocations = async () => {
    myMarkers.clearLayers();

    let locs =  await getLocations();

    if (!locs) {
      return false;
    }

    let latlngpairs = [];

    locs.forEach(function (location){
      latlngpairs.push([location['latitude'], location['longitude']])

      let coordinates = L.latLng(location['latitude'], location['longitude']);
      let popup = (<>Marker information here</>);

        L.circleMarker(coordinates, {
          radius: 8,
          fillColor: "FF0000",
          fillOpacity: 1,
          color: '#fff',
          weight: 3,
        }).bindPopup(
          reactElementToJSXString(popup)
        ).addTo(myMarkers);
      };

    })

    if (latlngpairs.length > 0) {
      const bounds = L.latLngBounds(latlngpairs.map((c) => {
        return [c[0], c[1]];
      }));

      map.fitBounds(bounds);
    }

   return (

        <MapContainer center={center} zoom={13} style={{ height:  `calc(100%)` }}  whenCreated={setMapReference} scrollWheelZoom={true} preferCanvas={true} renderer={L.canvas()}>
          <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
        </MapContainer>

    )
}

[PaulLeCam]

Hi,
Please only use GitHub issues to report possible bugs in the library.
You can use the react-leaflet tag in StackOverflow for questions related to using it.