New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

react-leaflet

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-leaflet

React components for Leaflet maps


Version published
Weekly downloads
482K
decreased by-3.45%
Maintainers
1
Weekly downloads
 
Created

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

FAQs

Package last updated on 12 Jul 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts