In a lot of cases, not every marker is the same. Sometimes we have a restaurant, but other times we might have a museum, so we should be able to visually represent that type of location to make our map easier to use.
We'll learn how to create custom markers by using a new configuration option with our Leaflet GeoJSON instance.
Hey,Colby! Very nice course! Thank you for your effort! The only thing I miss is the clustering. How can I implement it?
Thank you
Thanks Alex :) great question!
I haven't done clustering in practice, but I know there's a Leaflet plugin for it: https://github.com/Leaflet/Leaflet.markercluster
You could probably figure out a way to also do this manually if you'd prefer. For instance, with all of your locations, you can show different levels of clustering based on zoom level, which would trigger the changes when someone zooms in / out.
Once that event triggers, you can run calculations on the dataset to determine which locations are close to each other, then using a library like Turf's Centroid function https://turfjs.org/docs/#centroid to find the center of those close locations
Depending on how comfortable you are with digging through source code, you could take those ideas and see how the Leaflet plugin is handling it
While looking I also found this which is a React wrapper around the plugin above, again, haven't used it though: https://github.com/yuzhva/react-leaflet-markercluster
I wanted to contribute for this excellent course! Just few lines of code will do the trick!
In App.js:
import "leaflet.markercluster/dist/MarkerCluster.Default.css"; import "leaflet.markercluster/dist/MarkerCluster.css"; import "leaflet.markercluster";
useEffect(() => { const { current = {} } = mapRef; const { leafletElement: map } = current; ....... ...... const markers = L.markerClusterGroup(); const geoJson = new L.GeoJSON(locations, { ....... markers.addLayer(geoJson); //geoJson.addTo(map); markers.addTo(map); }, [mapRef]);
And don't forget to put the maxZoom in <Map>:
<Map ref={mapRef} center={[38.909419, -77.042614]} zoom={12} maxZoom={18}>
Please feel free to add this important feature if you want!
Cheers
awesome, glad to see it worked out!