react-leaflet | React components for Leaflet maps | Map library

 by   PaulLeCam TypeScript Version: 4.2.1 License: Non-SPDX

kandi X-RAY | react-leaflet Summary

kandi X-RAY | react-leaflet Summary

react-leaflet is a TypeScript library typically used in Geo, Map, React applications. react-leaflet has no bugs, it has no vulnerabilities and it has medium support. However react-leaflet has a Non-SPDX License. You can download it from GitHub.

React components for Leaflet maps.

            kandi-support Support

              react-leaflet has a medium active ecosystem.
              It has 4566 star(s) with 873 fork(s). There are 56 watchers for this library.
              There were 1 major release(s) in the last 12 months.
              There are 25 open issues and 783 have been closed. On average issues are closed in 33 days. There are 1 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of react-leaflet is 4.2.1

            kandi-Quality Quality

              react-leaflet has 0 bugs and 0 code smells.

            kandi-Security Security

              react-leaflet has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              react-leaflet code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              react-leaflet has a Non-SPDX License.
              Non-SPDX licenses can be open source with a non SPDX compliant license, or non open source licenses, and you need to review them closely before use.

            kandi-Reuse Reuse

              react-leaflet releases are available to install and integrate.
              It has 73 lines of code, 0 functions and 72 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of react-leaflet
            Get all kandi verified functions for this library.

            react-leaflet Key Features

            No Key Features are available at this moment for react-leaflet.

            react-leaflet Examples and Code Snippets

            JavaScriptdot img1Lines of Code : 40dot img1no licencesLicense : No License
            copy iconCopy
            import React, { Component } from 'react'
            import { Map } from 'react-leaflet'
            import './App.css'
            import 'leaflet/dist/leaflet.css'
            import L from 'leaflet'
            import LayerGl from  "./lib";
            import world from './world.json';
            class App extends Component {
            JavaScriptdot img2Lines of Code : 27dot img2License : Permissive (ISC)
            copy iconCopy
            import Choropleth from 'react-leaflet-choropleth'
            import { Map } from 'react-leaflet'
            const style = {
                fillColor: '#F28F3B',
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.5
            const map = (geojson) =>  
            Getting started
            JavaScriptdot img3Lines of Code : 10dot img3License : Permissive (MIT)
            copy iconCopy
            import React from 'react';
            import { Map, Circle, TileLayer, LayersControl, FeatureGroup, Marker, Polyline } from 'react-leaflet'
            import { Curve } from 'react-leaflet-curve'
            const path = ['M', [50.14874640066278, 14.106445312500002],
              'Q', [51.67255  
            Updating the Chloropleth Tutorial to react-leaflet v3 With Function React Components
            JavaScriptdot img4Lines of Code : 22dot img4License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import { ... useMap } from 'react-leaflet';
            const map = useMap();
            const zoomToFeature = ((e) => {
              // update this to work with react-leaflet 3 and functional react components
            React Leaflet v3 : Good way to create a control
            Lines of Code : 33dot img5License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import L from 'leaflet';
            import { createControlComponent } from '@react-leaflet/core';
            const createControlLayer = (props) => {
              // Set up an instance of the control:
              const controlInstance = new L.Control.Zoom(props);
              return contr
            How to render geojson polygon in React leaflet MapContainer?
            JavaScriptdot img6Lines of Code : 34dot img6License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            const MyData = () => {
              // create state variable to hold data when it is fetched
              const [data, setData] = React.useState();
              // useEffect to fetch data on mount
              useEffect(() => {
                // async function!
                const getData = async
            How to display geodjango rest api response on react leaflet Map
            JavaScriptdot img7Lines of Code : 91dot img7License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import React, { Component } from 'react'
            import './styles/styles.css'
            import {Map,TileLayer,GeoJSON} from 'react-leaflet'
            import './leaflet/leaflet.css'
            import Wkt from 'wicket'
            import L from 'leaflet'
            import Data from '../../Data/wkt_file
            How to do a custom interactive "map" with an image with React?
            JavaScriptdot img8Lines of Code : 38dot img8License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import React from 'react'
            import { divIcon } from 'leaflet'
            import { Marker } from 'react-leaflet'
            import { renderToStaticMarkup } from 'react-dom/server'
            import PropTypes from 'proptypes'
            import 'leaflet/dist/leaflet.css'
            const Index = p
            LatLngToLayerPoint transformation to pixel coordinates
            Lines of Code : 29dot img9License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import { Map as LeafletMap, TileLayer } from "react-leaflet";
            class Map extends React.Component {
                // leafletElement is the leaflet object created by any react-leaflet component
                const map = this.mapReferenc

            Community Discussions


            Uncaught Error: Map container is already initialized
            Asked 2022-Apr-11 at 15:13

            I am using React JS for making a webpage. My aim is to display a map on the front end. I am using the react-leaflet npm package for the same. However, I am getting the below error:




            Answered 2022-Apr-11 at 15:13

            It seems an important question to me. Hence, answering here for sake of completeness. This is based on this link shared by @Satya S in the comments. React leaflet v3 won't work with reactJS v18 (as of the time of writing this response, things may change later. Use this link to verify), at least when using concurrent mode. Please try version 4 alpha of React leaflet that targets version 18 of reactJS.



            The unauthenticated git protocol on port 9418 is no longer supported
            Asked 2022-Mar-27 at 13:23

            I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs



            Answered 2022-Mar-16 at 07:01

            First, this error message is indeed expected on Jan. 11th, 2022.
            See "Improving Git protocol security on GitHub".

            January 11, 2022 Final brownout.

            This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
            This will help clients discover any lingering use of older keys or old URLs.

            Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.

            As noted by Jörg W Mittag:

            There was a 4-month warning.
            The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.

            Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".

            Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.

            The permanent shutdown is not until March 15th.

            For GitHub Actions:

            As in actions/checkout issue 14, you can add as a first step:



            Cypress not properly intercepting leaflet map tile calls
            Asked 2022-Mar-26 at 01:02

            I am testing a react-leaflet based application in cypress. To avoid making tons of real maptile requests, I am trying to intercept calls to the mapbox maptile server, and replace with a dummy tile. I do this in my cypress/support.index.js file:



            Answered 2022-Mar-25 at 20:39

            Since you are using Next, is the app fetching the tiles on the server before the page loads?

            I know there's various switches/modes, but you made no mention of SSR so looks like you should consider that.

            Without details of the app it's hard to give you code, but there's a bit of code here

            that may be useful.



            React Leaflet Bound not working as expected
            Asked 2022-Mar-10 at 09:34

            I'm using react-leaflet package to create bound animation on the map from selected markers as seen on the screenshot below.

            Here is the full code:

            The map will be bound if only the selected markers change.

            I try to implement the bound animation sample code from the documentation here

            As we can see from the screenshot above, the map, the markers, the rectangle, and the panel (top-right corner) are displaying and working fine.

            But if we change the selected markers (through the panel), the bound animation is not working properly (not showing all of the markers).

            And if we empty the selected markers (no marker is selected in the panel), the app crashes and produces an error Cannot read properties of undefined (reading 'lat').

            So, my questions are:

            1. how could this happen?
            2. what is the solution?


            Answered 2021-Oct-14 at 17:51

            The error Cannot read properties of undefined (reading 'lat') is because you are passing an empty array of markers to . You need at least two markers to define a rectangles corners so check that you have at least two:



            Displaying array of data with lat, long as Markers: react-leaflet
            Asked 2022-Feb-23 at 02:33

            I have a simple React app that shows bike stations on a map with Leaflet and OpenStreetMap.

            I have fetched all lat and long but when I map though the array and create component, they are not appearing on map.

            Instead I have this warning on browser console:

            Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (432150 px). Occurrences of will-change over the budget will be ignored.

            I see some similar questions and answers to this. It is because occurences of will-change in CSS, but I am using Leaflet library itself, so I do not know where to fix this. I also watch some similar videos on YouTube, even if we have almost same logic they did not have any problem.




            Answered 2022-Feb-23 at 02:28

            You probably just miss a return statement in your map callback, or to convert it into a short single expression arrow function form without the curly braces:



            LeafletMap is showing error even after importing the leaflet package in react js
            Asked 2022-Feb-20 at 10:26

            I was working on a covid application which shows covid mortality rate during all the three waves, particularly for my country India, but here the issue is while I'm trying to use leaflet package, its showing an error



            Answered 2022-Feb-12 at 14:04

            Problem is that you're trying to export function Map which has the same name as Map you assigned to LeafletMap, try to change your function name, for instance



            Trying to apply zoom on click with react-leaflet
            Asked 2022-Feb-10 at 18:25

            I'm trying to replicate some functions of the leaflet map to react/typeScript but I'm getting an error when I try to add the function to zoom on a Feature it breaks, this is the code I'm working on



            Answered 2022-Feb-10 at 18:20

            useMap can only be used within a component that is itself a child/descendant of .

            Hook providing the Leaflet Map instance in any descendant of a MapContainer.

            Here you try calling useMap in your EmployerLocationMap component, which contains a , but which is obviously not a descendant of one.

            A solution for your case could be to separate the map logic in another component that you can place inside the :



            gatsby-plugin-react-leaflet with gatsby v3 - build error
            Asked 2022-Feb-02 at 09:11

            I can't find any information wether the gatsby-plugin-react-leaflet (made for gatsby v2) is compatible with gatsby v3 or not, nor can I find any info on the build errors I get. I have tried everything ie checking if the window is defined, useHasMounted etc and nothing works. Seems to be something with this version of the plugin for gatsby. Any info would be great.

            I get these errors when trying to build:

            This is my the full code, if I remove the MapContainer and everything in it, Gatsby builds without problem.



            Answered 2022-Feb-02 at 09:11

            nor can I find any info on the build errors I get.

            It should be compatible with v3 according to this GitHub thread where the author's pointed out the backward compatibility with v3 and v4. Try using the latest version: 3.0.3

            Without further implementation details, I don't know what can be the cause of the issue.

            The issue has been solved using Node 14.x and downgrading the package version to 2.7.0, a version that exposes Map instead of MapContainer wrapper.



            NPM - why do I get EBADEGINE errors while I meet versions requirements installing reactjs dependancies on docker (buster)?
            Asked 2022-Jan-26 at 14:08

            Trying to run this on docker, but I get EBADENGINE unsupported engine warning (and subsquent build fail, which I assume are related at least somewhat).

            Docker command (from cloned project root with package.json file):



            Answered 2022-Jan-26 at 14:08

            Okay that was dumb. But yes, to read those error message for other npm newbs out there:



            react-leaflet: even the simplest code doesn't show up anything
            Asked 2022-Jan-16 at 09:44

            I'm trying to figure out how to render leaflet map with react-leaflet, because I'm getting no output as you can see here:

            This is the code:

            import * as React from 'react';



            Answered 2022-Jan-15 at 16:21

            Indeed you initially were just missing a defined height on your component.


            If the map is not displayed properly, it is most likely because you haven't followed all the prerequisites.

            [...] Make sure your map container has a defined height

            Now you are just missing a Tile Layer:


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install react-leaflet

            You can download it from GitHub.


            See the CONTRIBUTING file.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i react-leaflet

          • CLONE
          • HTTPS


          • CLI

            gh repo clone PaulLeCam/react-leaflet

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link

            Explore Related Topics

            Reuse Pre-built Kits with react-leaflet

            Consider Popular Map Libraries


            by zhaoolee


            by openlayers


            by CesiumGS


            by mapbox


            by Turfjs

            Try Top Libraries by PaulLeCam


            by PaulLeCamTypeScript


            by PaulLeCamTypeScript


            by PaulLeCamJavaScript


            by PaulLeCamJavaScript


            by PaulLeCamJavaScript