I am a newbie of react leaflet. I created my map and add polygon successfully. However, when I drag or zoom on my map, how can I get current coordinates of the entire screen? I use the map of openstreetmap. Thank you very much for your support. My code:
class App extends Component {
componentDidMount()
{
//console.log(polygonData);
navigator.geolocation.getCurrentPosition(function(position) { //mdn geolocation
console.log(position)
});
}
onEachContry = (feature, layer) =>{
const contryName = feature.properties.NAME_1;
//console.log(feature.properties.NAME_1);
layer.bindPopup(contryName);
if(contryName == "An Giang")
{
layer.options.fillColor = "yellow";
}
layer.on({
/*mouseover: (event) => {
console.log(event);
}*/
}
)
}
countryStyle = {
fillColor: "red",
fillOpacity: 0.5,
color: "black",
weight: 2
}
render() {
return (
<MapContainer center={[10.7743, 106.6669]} zoom={6} >
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<GeoJSON
style = {this.countryStyle}
data={polygonData.features}
onEachFeature={this.onEachContry}
/>
</MapContainer>
);
}
}
/*<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
*/
export default App;
Use a function component as a MapContainer's
child. There using useMapEvents
hook listen to dragend
event. e.target.getBounds
provides everything you need, methods like getSouth()
, getWest()
, getEast()
etc
function MyComponent() {
const map = useMapEvents({
dragend: (e) => {
console.log("mapCenter", e.target.getCenter());
console.log("map bounds", e.target.getBounds());
}
});
return null;
}
and then
<MapContainer
...><MyComponent/>
</MapContainer>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.