I am learning react leaflet and trying to add circle marker on each point of geojson. Makers are not showing on map.
import React from 'react';
import Tiles from "./Tiles";
import L from 'leaflet'
import 'leaflet/dist/leaflet.css';
import '../css/MapStyle.css'
import Test from "../json/Test.json"
import {GeoJSON, MapContainer} from "react-leaflet";
function App() {
function point(feature, latlng){
return L.circleMarker(latlng);
}
return (
<MapContainer center={[-105.003418922432, 45.75383843460583]} zoom={2} scrollWheelZoom={true}>
<TileLayer
url="https://api.maptiler.com/maps/basic/256/{z}/{x}/{y}.png?key=fXmTwJM642uPLZiwzhA1"
attribution='© <a href="https://www.maptiler.com/">MapTiler</a> © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<GeoJSON data={Test} pointToLayer={(a, b)=>{point(a, b)}}/>
</MapContainer>
);
}
export default App;
I have also tried placing null as argument in circleMarker. But doesn't work.
Perhaps you should add the key param with unique value.
<GeoJSON key={Date.now()} data={Test} pointToLayer={(a, b)=>{point(a, b)}}/>
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.