3

Leaflet library has many plugins:

https://leafletjs.com/plugins.html

Now I looked at react leaflet library: https://react-leaflet.js.org/

But I can't find in its documentation explanation how to use the plugins from leaflet library, if that is possible. Can someone help?

  • 1
    I invite you to find something [react-leaflet-examples](https://github.com/tomik23/react-leaflet-examples) :) Not all plugins will work, but some will. – Grzegorz T. Jan 11 '22 at 13:23
  • @giorgimoniava You are right I should add some example. – Grzegorz T. Jan 11 '22 at 13:54
  • Porting leaflet plugins over to react-leaflet seems complex at first, but it will make you extremely familiar with leaflet, react, and react-leaflet. I highly recommend giving it a go. Try slogging through the [official docs](https://react-leaflet.js.org/docs/core-architecture/), or maybe [my answer to this other question](https://stackoverflow.com/a/65713838/12010984) will help – Seth Lutske Jan 11 '22 at 18:39
  • 1
    @SethLutske I agree, but you really need to have a lot of knowledge about leafletjs, react-leaflet, reactjs and the library you want to rewrite. There is also the problem of libraries where documentation is very scarce, sometimes there are libraries that do not have sources and only libraries that are already minimized. – Grzegorz T. Jan 11 '22 at 20:25
  • 1
    @GrzegorzT. that's true. But I feel based on the generic nature of the question and the fact that john is a new contributor, its just general advice. I personally gained a lot of that knowldedge about leaflet, react, and react-leaflet from trying to do just that. Just a 2-cents type comment. Libraries with no docs and no source code would be hard for even experienced devs to port over. – Seth Lutske Jan 11 '22 at 21:30

1 Answers1

3

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

Grzegorz T.
  • 3,903
  • 2
  • 11
  • 24