1. 51
    Section 09 - Customize Restaurant Location Markers with Custom Images
    1m 48s

Section 09 - Customize Restaurant Location Markers with Custom Images

InstructorColby Fayock

Share this video with your friends

Send Tweet

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.

Click here for exercise instructions

Alex Pavlov
~ 4 months ago

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

Colby Fayockinstructor
~ 4 months ago

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

Alex Pavlov
~ 4 months ago

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!


Colby Fayockinstructor
~ 4 months ago

awesome, glad to see it worked out!