React components for Leaflet maps

Last update: Jun 25, 2022
Comments
  • 1. MapContainer does not work correctly without a center point

    Bug report in v4

    Before opening an issue, make sure to read the contributing guide and understand this is a bug tracker, not a support platform.

    Please make sure to check the following boxes before submitting an issue.
    Issues opened without using this template will be closed unless they have a good reason not to follow this template.

    • [X] All peer dependencies are installed: React, ReactDOM and Leaflet.
    • [X] Using the latest version of React and ReactDOM v18.
    • [X] Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
    • [X] Using the latest v4 version of React-Leaflet.
    • [X] The issue has not already been reported.
    • [X] Make sure you have followed the quick start guide for Leaflet.
    • [X] Make sure you have fully read the documentation and that you understand the limitations.

    Expected behavior

    Looking at MapContainer properties' types we check center to be optional, so, if we don't put a center to the map, it should a show a random location.

    Actual behavior

    The map is totally gray, not showing anything. Screen Shot 2022-06-19 at 16 49 51

    Steps to reproduce

    Please provide the simplest example possible to reproduce the issue, based on this CodePen.

    Just remove the center from the map.

    What's the problem?

    Thank you

    Reviewed by SalahAdDin at 2022-06-19 13:54
  • 2. The rendering for the v4 is not working correctly

    Bug report in v4

    Before opening an issue, make sure to read the contributing guide and understand this is a bug tracker, not a support platform.

    Please make sure to check the following boxes before submitting an issue.
    Issues opened without using this template will be closed unless they have a good reason not to follow this template.

    • [X] All peer dependencies are installed: React, ReactDOM and Leaflet.
    • [X] Using the latest version of React and ReactDOM v18.
    • [X] Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
    • [X] Using the latest v4 version of React-Leaflet.
    • [X] The issue has not already been reported.
    • [X] Make sure you have followed the quick start guide for Leaflet.
    • [X] Make sure you have fully read the documentation and that you understand the limitations.

    Expected behavior

    The map displays correctly

    Actual behavior

    The map does not display correctly

    Steps to reproduce

    Trying to test the example and it does not work correctly. The link is here : https://codepen.io/PaulLeCam/pen/OJxEbBW

    I got that

    image

    I am not sure that it is the best place to tell that but I wanted to use that new version of library and it does not work ....

    Thank you a lot for your help !

    Reviewed by saturne08 at 2022-06-07 13:27
  • 3. React Leaflet Rendering

    I ran into this issue on MacOS and solved it with the following: seems the docs are off a bit

    -Adding INLINE styling to the MapContainer component Directly -Adding an ACTUAL height to this Component [in pixels or otherwise] -Importing the StyleSheet -- import "leaflet/dist/leaflet.css";

    Others were having issues trying to add styling to the div, as per the documentation. This did not work for me until I tried:

    < MapContainer style={{ width: '100%', height: '600px' }} center={position} zoom={13} >

    Hope this helps!

    Originally posted by @ashley-christensen in https://github.com/PaulLeCam/react-leaflet/issues/990#issuecomment-1146855009

    Reviewed by ashley-christensen at 2022-06-05 19:30
  • 4. React Leaflet Tile Rendering Issues

    I solved this bug by doing the following and it worked great!

    -Adding INLINE styling to the MapContainer component Directly -Adding an ACTUAL height to this Component [in pixels or otherwise] -Importing the StyleSheet -- import "leaflet/dist/leaflet.css";

    Others were having issues trying to add styling to the div, as per the documentation. This did not work for me until I tried:

    < MapContainer style={{ width: '100%', height: '600px' }} center={position} zoom={13} >

    Hope this helps!

    Reviewed by ashley-christensen at 2022-06-05 17:33
  • 5. ImageOverlay updating bounds in realtime

    Hello, just want to ask, currently i have an

    <ImageOverlay className="object-fit-cover" url={props.image} bounds={props.availableBounds} />

    as you can see, the bounds is based on the props.availableBounds now this value will be updated in realtime, what happens is, the map will instantiate, then the image will be placed on the map, but everytime i update the value of availableBounds, the ImageOverlay is not moving. The hack that i did was, to reinstantiate the MapContainer for me to be able to see the updated ImageOverlay bounds.

    Is there a way to update the ImageOverlay bounds freely? without reinstantiating the MapContainer? Thanks!

    Reviewed by johnfrades at 2022-06-01 14:44
  • 6. Module '"react-leaflet"' has no exported member 'withLeaflet'

    Hi I'm trying to import withLeaflet from react-leaflet but not exists. I'm using the version: "react-leaflet": "^3.2.5". any sugestion/help to solve this?

    Reviewed by omateusamaral at 2022-05-26 04:09
React-leaflet control for resetting the map view

react-leaflet-resetview react-leaflet control for resetting the map view Installation You can install react-leaflet-resetview with NPM: npm i @20tab/r

Apr 22, 2022
A react-leaflet & express app for visualizing the latest earthquake data from Kandilli Observatory
A react-leaflet & express app for visualizing the latest earthquake data from Kandilli Observatory

Earthquake Tracker Turkey A react-leaflet & express app for visualizing the latest earthquake data from Kandilli Observatory. Tech Stack Client: React

Jan 9, 2022
react-maps - A map component for React

Maps for React A map component for React, the declarative UI library. Allow your React sites to use Google Maps easily. Example In the render-function

Feb 17, 2022
A declarative React interface to Google Maps

React Google Maps A declarative React interface to Google Maps. Check it out: Example usage API docs What's new Important Notes This is an alpha relea

Apr 17, 2022
React.js Google Maps integration component

react-google-maps React.js Google Maps integration component Introduction Installation Usage & Configuration Changelog The changelog is automatically

Jun 22, 2022
A Google Maps component for React.js

React Gmaps A Google Maps component for React.js Features Lazy Google Maps loading Easy to use Installation $ npm install react-gmaps --save Demo http

Apr 22, 2022
Companion code to the "How to Write a Google Maps React Component" Tutorial
Companion code to the

Google Map React Component Tutorial A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a tes

Jun 22, 2022
A React autosuggest for the Google Maps Places API.

React Geosuggest A React autosuggest for the Google Maps Places API. You can also define your own suggests as defaults. Works with Preact, too. Demo L

Jun 14, 2022
A Mapbox GL react native module for creating custom maps
A Mapbox GL react native module for creating custom maps

A Mapbox GL react native module for creating custom maps

Jun 24, 2022
New markers on tap + history, using React Native Maps for study purposes.
New markers on tap + history, using React Native Maps for study purposes.

Mobile challenge New markers on tap + history, using React Native Maps for study purposes. Participants | Rafael Ferreira Techs & Libs React Native St

Dec 16, 2021
Simple loader to use google maps services into your react applications
Simple loader to use google maps services into your react applications

react-google-maps-loader React Component to use google maps services into your react applications using a render prop. Getting started You can downloa

Oct 12, 2021
React component Maps API 2GIS

React component Maps API 2GIS

Mar 9, 2022
Yandex Maps API bindings for React

Yandex.Maps JS API bindings for React

Jun 23, 2022
🗺 A React component for interactive vector maps of the world and 100+ countries

react-vector-maps ??️ A React component for interactive vector maps of the world and 100+ countries Features Simple and easy to implement React compon

Jun 19, 2022
Yandex.Maps JS API bindings for React

Yandex.Maps JS API bindings for React

Jun 18, 2022
ReactJS Maps without external dependencies

Pigeon Maps - ReactJS maps without external dependencies Demo: https://pigeon-maps.js.org/ (using maps from OSM and Stamen) What is it? Are you tired

Jun 20, 2022
The open-source fork of Mapbox GL JS: Interactive maps in the browser, powered by vector tiles and WebGL.

The open-source fork of Mapbox GL JS: Interactive maps in the browser, powered by vector tiles and WebGL.

Jun 25, 2022
Project Travel Companion App - Build and Deploy an advanced Travel Companion Application using Google Maps
Project Travel Companion App - Build and Deploy an advanced Travel Companion Application using Google Maps

Travel Advisor Introduction Build and Deploy an advanced Travel Companion Applic

Mar 13, 2022
Google map library for react that allows rendering components as markers :tada:

Google Map React · google-map-react is a component written over a small set of the Google Maps API. It allows you to render any React component on the

Jun 23, 2022