react-leaflet

问题 I've started working on a map related project using React-Leaflet. The basemap provided by OpenStreetMap is politically incorrect wrt India, so i decided to find right geojson data and display its layer through GeoJson from 'React-Leaflet'. Right now its only showing the borders/polygons, but i want to display the name of country and state as annotation similar to OpenStreetMap's basemap. Is there a way to do this? 来源： https://stackoverflow.com/questions/65593298/annotation-of-state-and

问题 I'm developing a map application using React - Typescript - Leaflet I've used ReactLeaflet package but when I'm using it I'm facing error while compiling issues import * as React from "react"; import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; export default class MapsComp extends React.Component { render(){ return(<div>asdf</div>) } } It would be helpful if any one can help me in rendering the map 回答1: I just forked your project, made npm install and ran your code and

问题 I cannot figure out how to call fitBounds() on the Leaflet map. Basically, I am trying to display multiple markers on the map and have the view adjust accordingly (zoom in, zoom out, fly to, etc.). i also saw some example How do you call fitBounds() when using leaflet-react? and i tried to implement but it did not work. Here is my code that i tried. import React, { createRef, Component } from "react"; import { Map, TileLayer, Marker, Popup } from "react-leaflet"; import L from "leaflet";

问题 Sorry if it this has been answered somewhere else before! I am new to react-leaflet and struggle with this issue for some time now. The following code does not compile and and the chrome developer tools tell me: 3 errors on this page: 1) "TypeError: addOverlay is not a function", 2) "TypeError: addOverlay is not a function" and ", 3) "TypeError: this.props.removeLayer is not a function". What I do not understand is: if I comment out the "TestOverlay" component, it compiles. There seems to

问题 I have this react component: import React, { Fragment } from 'react'; import L from 'leaflet'; import { Map, TileLayer, Marker, Popup } from 'react-leaflet'; import 'leaflet/dist/leaflet.css'; const customMarker = new L.icon({ iconUrl: '/images/poemEditorTools/location-pointer-new.svg', iconSize: [56, 72], iconAnchor: [26, 72], }); const MyPopupMarker = ({ content, position }) => ( <Marker position={position} icon={customMarker} > <Popup>{content}</Popup> </Marker> ) const MyMarkersList = ({

问题 I just started using the react-leaflet library and got a map to load with a geoJSON layer, however I would like to use a TopoJSON layer instead. I know that it is possible with pure Leaflet like this: https://gist.github.com/rclark/5779673/. But how would I go about doing this with React-Leaflet? Edit class MapViz extends React.Component { getStyle() {...}; render() { const position = [x,y]; var geoData = topojson.feature(test_topo,test_topo.objects).geometries; return ( <Map id="my-map"

问题 This is my state: const [markers, setMarkers] = useState([]) I initialise a Leaflet map in a useEffect hook. It has a click eventHandler. useEffect(() => { map.current = Leaflet.map('mapid').setView([46.378333, 13.836667], 12) . . . map.current.on('click', onMapClick) }, [] Inside that onMapClick I create a marker on the map and add it to the state: const onMapClick = useCallback((event) => { console.log('onMapClick markers', markers) const marker = Leaflet.marker(event.latlng, { draggable:

问题 This is my state: const [markers, setMarkers] = useState([]) I initialise a Leaflet map in a useEffect hook. It has a click eventHandler. useEffect(() => { map.current = Leaflet.map('mapid').setView([46.378333, 13.836667], 12) . . . map.current.on('click', onMapClick) }, [] Inside that onMapClick I create a marker on the map and add it to the state: const onMapClick = useCallback((event) => { console.log('onMapClick markers', markers) const marker = Leaflet.marker(event.latlng, { draggable:

问题 This is my state: const [markers, setMarkers] = useState([]) I initialise a Leaflet map in a useEffect hook. It has a click eventHandler. useEffect(() => { map.current = Leaflet.map('mapid').setView([46.378333, 13.836667], 12) . . . map.current.on('click', onMapClick) }, [] Inside that onMapClick I create a marker on the map and add it to the state: const onMapClick = useCallback((event) => { console.log('onMapClick markers', markers) const marker = Leaflet.marker(event.latlng, { draggable:

问题 I am attempting to clear a leaflet map in react when fetching new data to map, and i am unsure how to approach this. I saw this post but not sure how exactly to apply it. Right now I have a function that fetches 1 of 2 geojsons I have loaded. App.js //SWAP FILES AS EXAMPLE fetchData = () => { //MAP SHOULD CLEAR EVERYTIME NEW DATA IS FETCHED if(this.state.loaded === 1) { fetch( "https://raw.githack.com/datafaust/raw/main/cruise-prototype/hh_2020112300_2020120623_Saturday_02.geojson" ) .then(