DEV Community

Cover image for Guide to React leaflet
Asm Raihan
Asm Raihan

Posted on

Guide to React leaflet

React Leaflet provides bindings between React and Leaflet. It uses Leaflet to abstract Leaflet layers and turn them into React components, not replacing Leaflet.

React-leaflet is very easy to implement. But the official documentation is a little vague to me. So here are we,

STEP - 1 // Installing React-Leaflet as dependency

npm install react-leaflet

yarn add react-leaflet

STEP - 2 // Importing components

All the components and hooks can be imported from the module entry-point:

import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'
Enter fullscreen mode Exit fullscreen mode

For TypeScript only

yarn add -D @types/leaflet
Enter fullscreen mode Exit fullscreen mode

STEP - 3 // Creating map component

<MapContainer center={[38.706928957217166, 35.51448175987359]} zoom={13} scrollWheelZoom={true}>
                <TileLayer

                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Marker position={[38.706928957217166, 35.51448175987359]}>
                    <Popup>
                        popup <br /> message.
                    </Popup>
                </Marker>
            </MapContainer>
Enter fullscreen mode Exit fullscreen mode

STEP - 4 // Adding CSS style to show map properly

  .leaflet-container{
    width: 100vw;
    height: 100vh ;
  }
Enter fullscreen mode Exit fullscreen mode

You are all set. This is the basic usage of leaflet. See the official documentation for more customization. Have fun!
https://www.npmjs.com/package/react-leaflet
https://react-leaflet.js.org/docs/start-installation/
https://leafletjs.com/
https://github.com/PaulLeCam/react-leaflet

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay