react-leaflet

What is react-leaflet?

The react-leaflet package is a React wrapper for the Leaflet library, which is a popular open-source JavaScript library for interactive maps. It allows developers to easily integrate and manipulate maps within React applications.

What are react-leaflet's main functionalities?

Displaying a Map

This code sample demonstrates how to display a basic map using react-leaflet. The MapContainer component is used to create the map, and the TileLayer component is used to add a tile layer from OpenStreetMap.

import { MapContainer, TileLayer } from 'react-leaflet';

function MyMap() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100vh', width: '100%' }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
      />
    </MapContainer>
  );
}

Adding Markers

This code sample shows how to add a marker to the map. The Marker component is used to place a marker at a specific position, and the Popup component is used to display a popup when the marker is clicked.

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

function MyMap() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100vh', width: '100%' }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
}

Drawing Shapes

This code sample demonstrates how to draw a polygon on the map. The Polygon component is used to create a polygon shape by specifying an array of latitude and longitude coordinates.

import { MapContainer, TileLayer, Polygon } from 'react-leaflet';

function MyMap() {
  const polygon = [
    [51.505, -0.09],
    [51.51, -0.1],
    [51.51, -0.12]
  ];

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100vh', width: '100%' }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
      />
      <Polygon positions={polygon} />
    </MapContainer>
  );
}

Other packages similar to react-leaflet

react-map-gl

react-map-gl is a React wrapper for Mapbox GL JS, which is a powerful library for interactive maps. It offers more advanced features and customization options compared to react-leaflet, but it requires a Mapbox access token.

google-maps-react

google-maps-react is a library for integrating Google Maps into React applications. It provides a simple API for adding maps and markers, but it is dependent on the Google Maps API, which may have usage limits and requires an API key.

react-google-maps

react-google-maps is another library for using Google Maps in React applications. It offers a more declarative approach compared to google-maps-react and includes additional features like drawing tools and heatmaps.

README

React-Leaflet

⚛️ React components for 🍃 Leaflet maps.

Documentation

• Getting started
• API reference

Changes

See the CHANGELOG and UPGRADING files.

Contributing

See CONTRIBUTING file.

Support

Please do not use GitHub issues for support, but instead post your questions on StackOverflow using the react-leaflet tag.

License

MIT
See LICENSE file.