Section 09 - Customize Restaurant Location Markers with Custom Images

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!

1. npm i --save leaflet.markercluster

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!