Use leaflet plugins in react leaflet

Viewed 370
1 Answers

Unfortunately, in order for the leaflet plugin to work in react-leaft, in most cases it has to be written from scratch, but there are also exceptions.

An example below that allows you to use the map on the fullscreen.

import { MapContainer, TileLayer } from 'react-leaflet';
import 'leaflet-fullscreen/dist/Leaflet.fullscreen.js';
import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
import tileLayer from '../util/tileLayer';

const center = [52.22977, 21.01178];

const MapWrapper = () => {
  return (
    <MapContainer
      fullscreenControl={true}
      center={center}
      zoom={13}
      scrollWheelZoom={false}
    >

      <TileLayer {...tileLayer} />

    </MapContainer>
  )
}

export default MapWrapper;

The most popular and developed ones usually have a react-leaflet version, e.g. react-leaflet-markercluster

Related