react-leaflet

问题 is there any way popup always stay open ? Not having the need to click on it to open. Expected behavior https://monosnap.com/file/mPkuSTmPAfwxTxY99YQVA5m96Zolow.png Actual behavior http://take.ms/cUej0 回答1: What you can do is to make your own Marker class from the react-leaflet marker, and then call the leaflet function openPopup() on the leaflet object after it has been mounted. // Create your own class, extending from the Marker class. class ExtendedMarker extends Marker { componentDidMount

问题 I have the below react class which fetches the geolocation through the browser. I am mapping a leaflet map. I want to geolocation to be an input to the setView, for such that the map "zooms" into the region of the client browser location. Here's the react class: import React from 'react'; import L from 'leaflet'; import countries from './countries.js'; var Worldmap = React.createClass({ render: function() { let geolocation = []; navigator.geolocation.getCurrentPosition(function(position) {

问题 I'm working with react-leaflet package, however, if you can answer the question in plain leaflet that would be helpful as well. I am successfully panning to the bounds of a polygon that I supply like so: <Map center={position} zoom={13} bounds={this.state.bounds} className="campaignimagery-map"> <TileLayer url="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="" /> However, I would like the entire polygon boundary box to be some transparent color so they can see exactly where

问题 I would like to add the module "React-leaflet-locate-control" on Map. Unfortunately, I have this error "TypeError: Cannot read property 'addLayer' of undefined" and I don't know how to correct this error. Can you help me please ? Here is my component Map : import './Map.css'; import React, { Component } from 'react'; import { Map, TileLayer, Marker, Popup } from 'react-leaflet'; import L from "leaflet"; import { getLat, getLng } from '../../Store.js'; import SearchBar from '../SearchBar

问题 I am trying to draw an ellipse on a map made using react-leaflet , which has built-in support for circles and rectangles. To achieve this, I am using code to produce an ellipse in (non-react) leaflet from here, that I have adapted and pasted below: import * as L from 'leaflet'; L.SVG.include ({ _updateEllipse: function (layer) { var // c = layer._point, rx = layer._radiusX, ry = layer._radiusY, phi = layer._tiltDeg, endPoint = layer._endPointParams; var d = 'M' + endPoint.x0 + ',' + endPoint

问题 I want to get this map bounds and center it map I tried with getBounds() and getCenter() but it was undefined. then i found this but it says Cannot read property 'leafletElement' of undefined Thanks for your help in forward. class FortMap extends Component { state = { lat: 51.505, lng: -0.09, zoom: 18, } componentDidMount(){ console.log(this.refs.map.leafletElement.getBounds); } render() { const { lat , lng , zoom } = this.state; const position = [0, 0]; return ( <Map center={position} zoom=

问题 I'm trying to change a GeoJSON component's style dynamically based on whether its ID matches a selector. The author of the plugin refers to the Leaflet documentation, which says that the style should be passed as a function. Which I'm doing, but no dice. My component: import React, { Component } from 'react'; import { connect } from 'react-redux'; import * as actions from '../../actions'; import { Marker, Popup, GeoJSON } from 'react-leaflet'; import { centroid } from '@turf/turf'; const

问题 I use some markers on react-leaflet map to show various text. But I can not find a flag for the autoOpen tooltip. I get (position, children, onOpen, onClose) as available attributes. render() { return ( <div className={'ShapeLayer'}> { this.shapes.map(shape => { return ( <Marker key={shape['id']} position={shape['coordinates']} draggable={false} opacity={1}> <Popup> <span>{shape['text']}</span> </Popup> </Marker> ); }) } </div> ) } This is done with this code on native leaflet var marker = L

问题 I am new to react-leaflet. Need little help to fix my issue. Follow up with Previous post I have textfield which filter data. I was able to filter data in the table but not able to filter the data in the map. For example: if I search for name: 'VaiBike' it should show in table and marker in the map. Note: only show the data which is filter in map as well as in the table. so does for the other data. How can I change my code so that I can show marker and data in table at the same time. Running

问题 I'm working with the Citybik.es API (http://api.citybik.es/) to show data on a Leaflet map. At the moment, the code is showing every item in the map, but after analysing I would like to organize the data a little bit allowing the user to drill down the information, when clicking on a marker . Something like this: Display number of networks per country (each marker represents a network, so to speak, each marker per country) Display number of stations per network The response looks something