Leaflet

Leaflet is a Library. The leaflet is a very powerful tool, and we can create a lot of different kinds of maps. this article will help you understand the LeafletLibrary.

Leaflet: A Javascript library for interactive maps.

React: A JavaScript library for building user interfaces.

React-Leaflet: React component for Leaflet maps.

What is Leaftlet:

Leaflet.js is one of the leading open-source javascript libraries for mobile-friendly interactive maps. It takes advantage of HTML5 and css3 on modern browsers while being accessible on older ones too, it supports all the primary desktop and mobile platforms.

React Leaflet provides a binding between React and Leaflet. it does not replace Leaflet but leverages it to abstract Leaflet layers as React components.

Dom rendering:

React does not render Leaflet layer to the Dom, this rendering is done by Leaflet itself . React only render a <div> element when rendering the MapContainer

React context:

React Leaflet uses React's context API to make some Leaflet elements instances available to children elements that need it.

Adding React Leaflet:

Using ESM imports:

 import {
  MapContainer,
  TileLayer,
  useMap,
} from 'https://cdn.esm.sh/react-leaflet'

Using a package registry:

npm install react react-dom leaflet

npm install react-leaflet

The MapContainer component is responsible for creating the Leaflet Map instance and providing it to its child components, using a React Context.