This video is really wonderful. He was able to teach me, in only 36 minutes, that I don't know my ass from my elbow when it comes to programming something like this and that I should get expert help. I could have spent days figuring that out.
I've been watching a LOT of your videos recently. I'm a tinkerer when it comes to coding, but enjoy the logic and problem solving nature etc... You can pronounce Leicester as Lester :)
Super awesome video that clears the air on markers and clusters. Do you have any video on Source and Layers ? Thank you very much . Have subscribed eh ! :)
Please, is there any way I can make you a donation? This video just made me comfortable to land a nice job and you should at least have a coffee on me.
Hey Angelo! First of all, congratulations!! Is this your first job or a new one? No expectations... I'm very happy it was useful to you, but I created a Patreon just to try that out, so if you're still feeling generous, I won't deny you that opportunity :D www.patreon.com/leighhalliday
There is a serious shortage of tutorials on javascript GIS frameworks/libraries, and the docs are so lean and vague it's hard to work out how to implement them. Myself and I'm sure many others would happily pay for a comprehensive GIS course covering more things like this.
This was super helpful for me. Thank you, Leigh! Just one question though, around 27:53, you pulled the supercluster instance. Instead of mapping clusters to get the points, can I use supercluster for mapping instead? My goal is to show the total number of a given data that I added in the properties, instead of showing the total cluster points in the circle. I apologize if this is a stupid question. I am quite new to mapbox and supercluster. Anyways, thank you and stay safe!
Hey PB! You definitely can do that... I updated my example and README for the use-supercluster hook showing how you can do this: github.com/leighhalliday/use-supercluster#map--reduce-options
Your video was very nice! thanks ! also i would like to know if is possible another video but with points in the same location ! could be nice to have this!
Would this approach to clustering work with MultiPolygon? Basically a grid of rectangles covering UK. It's a large dataset. 80,000 features so keen to understand if the supercluster can be adapted to accommodate MultiPolygon over Points.
@@leighhalliday Actually, I have put my points in the useState hook and then I am putting them on the usesupercluster hook. On changing my points using setState it not happening actually.
Wow! Thanks Leigh! I'll be using this soon. You mentioned what happens when two markers that share the same location - Is there a way, other than the spiderfy stuff, to be able to get to these individual points on the map without them overlapping!?
Hey Nick! Hmmmm... good question. I think it is inevitable at some point, but I think that's where clustering comes in. You can have 1 marker represent 10 spots, and then maybe when you click on the cluster, it reveals the 10 spots contained within it in a popup or something like that. Another technique is to use smaller markers when the user is further zoomed out... realtor.com sort of does this, they have only red dots when you're zoomed out, they add in the pricing info when you zoom in.
Hi, how can we get the array of points within the cluster. For example we cluster hotels with prices, we want show on cluster marker 2 from {point with lowest price}?
Leigh can u plz provide a video or reference material for line/routes clustering ...i want nodes and the routes connecting them to be clustered...plz help
this video is great. do you have any walkthroughs using supercluster or use-supercluster with React-Leaflet to create a Choropleth map? I tried using react-leaflet geoJSON tag, but it renders a bit slow even for a 12 MB file size. thanks again for sharing your knowledge. this really gave me hope and insight
Great video ! so I am planning to build an app that will have a intense use of map services , I think that mapbox , would be a bit overpriced for me. so I am thinking to use leaflet instead, I found a video of your that cover using leaflet with react , couple of question : is leaflet a good choice? can still use your cluster package with it ?
Hey! I prefer mapbox, but leaflet is a great option too, and free!! Here's an article showing my package with leaflet: www.leighhalliday.com/leaflet-clustering
@@leighhalliday I applied your solution it is working like a charm , except when I tried to add Popup for selected marker , it is not working as expected, more precisely on the first click the popup is rendered but empty then I need to click second time for the data to appear , any advice ?
Hey Syauqy! I think that's what I did, but I did it with size. Try to use this example and come up with how you might do that with color: github.com/leighhalliday/mapbox-clustering/blob/master/src/App.js#L78
I have switched to using mapbox-gl instead of react-mapbox-gl as it's like 50 times faster. it requires more work to set up to be a fit for your needs but all in all works better
Hey Alex! Yea, I can see that. Is it hard to integrate into React? Or do you basically just output a div with a ref, and then that's basically it from the React side and the rest is done in just in plain javascript with mapbox-gl?
Hey Buzz! Each cluster has an id, and using that id you can grab all of the items inside the cluster... then you could do whatever you'd like with them, put them in state to show inside of a popup, etc... here's what the function looks like `const items = supercluster.getLeaves(cluster.id)`
Hello Leigh, great video. I have also followed your other videos about the mapbox, they all works fine but in this video I am not getting exact amount of clusters. I have an array of points of length 4 but I am only getting clusters of length 2. Can you please help me solve this issue ? Thank You
Great Video, but when zooming out after zooming in, "crime doesn't pay" images stay on the screen. and don't go anywhere. I tried to code along with you and to also clone the repository but the problem stays the same..
@@leighhalliday Hello, thanks for getting back, i am at 17:33, i don't see any array doing console.log(clusters), instead i see this [react_devtools_backend.js:4045 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.].
@@leighhalliday I was trying this out because i followed your previous video adding markers, but that was too slow for almost 5K markers so had wanted to try this but i am stuck at 17.33, i don't see arrays, instead i see objects.
guys, i was looging on documentation and could not find, how could i type mapRef? i am writing this code using typescript, and still could not make it work because of a type erro related to mapRef, i even tried const mapRef = useRef(); but, no success :/
That is super mahn! Although i had a small problem, actually i have a record of more than 10000 records. So when i keep zooming in after a point when there are cluster with (5-10 number), it doesn't break that cluster and show me markers. It just zooms in the most and show me the cluster number (the same), not the markers inside. Help please.!
Hey Siddhant! There's a function in supercluster you can call to retrieve the individual points contained within a cluster... maybe once you reach a certain zoom level, you could just show the individual points rather than the cluster. const { clusters, supercluster } = useSupercluster({...}) // while rendering... if zoom level is over a certain number, can grab the individual points within a cluster const points = supercluster.getLeaves(cluster.id) Documentation here: github.com/mapbox/supercluster#getleavesclusterid-limit--10-offset--0
@@leighhalliday Hey Leigh! I tried doing it all your way you said but the problem is after a value of viewport zoom i showed points but instead it's showing the cluster as a point and i really can't figure out where am i doing wrong. Here's the link of component in which i am rendering map github.com/coderrsid/coordinate-analyzer/blob/master/src/Containers/MarkedMap/MarkerMap.js#L145 Can you please help me!
Hey Mourad! I think in this video it loaded the data from an API, which probably stores the data in a database... but do you mean that you're interested in building the backend (+ database) ourselves? If so, I'm working on a video now which will be doing this... both reading + writing. Stay tuned!
thanks bro 😁, I have an end of study project, and the most interesting part concerns the import of coordinates from database with the cluser option, I have a problem only about the cluster step, I don't know how I do it !!!
Hi Leigh! This was an amazing tutorial and helped me a lot for my current project! Is there a way to use data imported from json file instead of using swr method to implement cluster with React Mapbox-gl? I want to use json file for my project as you did in another video “Mapbox - Interactive maps in React” ruclips.net/video/JJatzkPcmoI/видео.html Any advice? Thank you!
Oh my, this video is EXACLTY wat I needed. You sir are my hero of today!
This video is really wonderful. He was able to teach me, in only 36 minutes, that I don't know my ass from my elbow when it comes to programming something like this and that I should get expert help. I could have spent days figuring that out.
Haha thanks David, glad it was helpful!
I spent days figuring it out too though… not like I just filmed it without researching and learning for days.
Clear message, clear structure, easy to understand, thank you
Great video! We use Mapbox and React quite a bit at work. This will certainly come in handy. Thanks
Nice! Let me know how it works for you!
I've been watching a LOT of your videos recently. I'm a tinkerer when it comes to coding, but enjoy the logic and problem solving nature etc...
You can pronounce Leicester as Lester :)
i guess it's quite randomly asking but does anybody know of a good site to stream new series online ?
@Leighton Kelvin Flixportal :)
@Edison Tanner Thanks, I went there and it seems like they got a lot of movies there :D I appreciate it !
@Leighton Kelvin You are welcome :)
Great video and fantastic tutorial, really enjoyed the video.
Thank you Ekin! Glad you enjoyed it!
thanks for the help leigh! really enjoyed it
You are awesome! Even though in the latest upgrade some of the things have changed but this content really hepled thanks.
Fantastic content! You really know how to provide us with the best of best. Thanks a lot!
Thank you very much, Emerson :)
Thanks for the video. Great job.
Very clear, thank you very much, exactly what I needed to complete my task.
You're very welcome!
This tutorial is amazing, thank you so much!
Thank you! You're very welcome :)
Super awesome video that clears the air on markers and clusters. Do you have any video on Source and Layers ? Thank you very much . Have subscribed eh ! :)
Please, is there any way I can make you a donation? This video just made me comfortable to land a nice job and you should at least have a coffee on me.
Hey Angelo! First of all, congratulations!! Is this your first job or a new one? No expectations... I'm very happy it was useful to you, but I created a Patreon just to try that out, so if you're still feeling generous, I won't deny you that opportunity :D www.patreon.com/leighhalliday
@@leighhalliday I'm on your page but can't seem to donate?
There is a serious shortage of tutorials on javascript GIS frameworks/libraries, and the docs are so lean and vague it's hard to work out how to implement them. Myself and I'm sure many others would happily pay for a comprehensive GIS course covering more things like this.
Still relevant, super dude !!!
This was super helpful for me. Thank you, Leigh! Just one question though, around 27:53, you pulled the supercluster instance. Instead of mapping clusters to get the points, can I use supercluster for mapping instead? My goal is to show the total number of a given data that I added in the properties, instead of showing the total cluster points in the circle. I apologize if this is a stupid question. I am quite new to mapbox and supercluster. Anyways, thank you and stay safe!
Hey PB! You definitely can do that... I updated my example and README for the use-supercluster hook showing how you can do this: github.com/leighhalliday/use-supercluster#map--reduce-options
Fantastic tutorial, thank you!
Thanks Matt!! Glad you enjoyed it :)
This is pure gold. Thank you SO much! Great video. I subscribed:) keep up the good work
can u also do a cluster marker in laravel with database?
Your video was very nice! thanks ! also i would like to know if is possible another video but with points in the same location ! could be nice to have this!
thank you, amazing tutorial!!
Glad it helped!
U R the Best!!! THANK YOU!!!!!!!!!
Glad I can help Roney :)
Would this approach to clustering work with MultiPolygon? Basically a grid of rectangles covering UK. It's a large dataset. 80,000 features so keen to understand if the supercluster can be adapted to accommodate MultiPolygon over Points.
Hey Andrew! Honestly I'm not sure... I haven't worked with MultiPolygon before... I think supercluster is based on individual points, not polygons.
Hello @Leigh. Awesome Video. I got a question. Is there a way I can call useSupercluster again with the new points ?
If the points change, I believe it should update automatically! I think :D
@@leighhalliday Actually, I have put my points in the useState hook and then I am putting them on the usesupercluster hook. On changing my points using setState it not happening actually.
Hello, congratulations for the video again, but i am stucked, how would you spread markes with same location?
One question though...how come on the examples of clusters in the react-map-gl documentation, the code doesn't look like this?
please show us a little bit more in detail about how to add getClusterLeaves method on your code. your videos are awesome!
Hey mur mur! I'll add it to my list of things to do in the future :)
Wow! Thanks Leigh! I'll be using this soon. You mentioned what happens when two markers that share the same location - Is there a way, other than the spiderfy stuff, to be able to get to these individual points on the map without them overlapping!?
Hey Nick! Hmmmm... good question. I think it is inevitable at some point, but I think that's where clustering comes in. You can have 1 marker represent 10 spots, and then maybe when you click on the cluster, it reveals the 10 spots contained within it in a popup or something like that. Another technique is to use smaller markers when the user is further zoomed out... realtor.com sort of does this, they have only red dots when you're zoomed out, they add in the pricing info when you zoom in.
Hi, how can we get the array of points within the cluster. For example we cluster hotels with prices, we want show on cluster marker 2 from {point with lowest price}?
How can I get same dataset?
Leigh can u plz provide a video or reference material for line/routes clustering ...i want nodes and the routes connecting them to be clustered...plz help
Great video, very useful!
FYI (2:22) you pronounce it "Lester" ;)
Thanks, Nathan! If only they spelled it that way :D
this video is great. do you have any walkthroughs using supercluster or use-supercluster with React-Leaflet to create a Choropleth map? I tried using react-leaflet geoJSON tag, but it renders a bit slow even for a 12 MB file size. thanks again for sharing your knowledge. this really gave me hope and insight
Hey Kainoa! Thank you :) Sorry, I haven't made a video on this before! I haven't used Leaflet very much if I'm being honest.
@@leighhalliday or a choropleth map using mapbox. nevertheless, your walkthroughs are amazing
Great video ! so I am planning to build an app that will have a intense use of map services , I think that mapbox , would be a bit overpriced for me. so I am thinking to use leaflet instead, I found a video of your that cover using leaflet with react , couple of question :
is leaflet a good choice? can still use your cluster package with it ?
Hey! I prefer mapbox, but leaflet is a great option too, and free!! Here's an article showing my package with leaflet: www.leighhalliday.com/leaflet-clustering
@@leighhalliday wonderful! thank you !
@@leighhalliday I applied your solution it is working like a charm , except when I tried to add Popup for selected marker , it is not working as expected, more precisely on the first click the popup is rendered but empty then I need to click second time for the data to appear , any advice ?
Hi, how to create a dynamic styling for the cluster marker based on the value of point count? for example, I want to create interpolate marker color
Hey Syauqy! I think that's what I did, but I did it with size. Try to use this example and come up with how you might do that with color: github.com/leighhalliday/mapbox-clustering/blob/master/src/App.js#L78
I have switched to using mapbox-gl instead of react-mapbox-gl as it's like 50 times faster. it requires more work to set up to be a fit for your needs but all in all works better
Hey Alex! Yea, I can see that. Is it hard to integrate into React? Or do you basically just output a div with a ref, and then that's basically it from the React side and the rest is done in just in plain javascript with mapbox-gl?
This helped me a lot! Is there also a way so we can visualize a popup with each crime details for every individual crime marker?
Hey Buzz! Each cluster has an id, and using that id you can grab all of the items inside the cluster... then you could do whatever you'd like with them, put them in state to show inside of a popup, etc... here's what the function looks like `const items = supercluster.getLeaves(cluster.id)`
You try to give the video more brightness it will be great if you do
What about Spiderify ?
Hello Leigh, great video. I have also followed your other videos about the mapbox, they all works fine but in this video I am not getting exact amount of clusters. I have an array of points of length 4 but I am only getting clusters of length 2. Can you please help me solve this issue ? Thank You
Hey Gurkiran! Are you sure it's not 2 clusters which each has 2 points?
@@leighhalliday Actually, I was making a mistake and I resolved it.
Thank you
Great Video, but when zooming out after zooming in, "crime doesn't pay" images stay on the screen. and don't go anywhere. I tried to code along with you and to also clone the repository but the problem stays the same..
thank you so much
You're very welcome Mohamed!
Hi Leigh, is this updated?, somehow my code breaks on using const mapRef = useRef()
Hmm that line looks ok, what is the error you’re seeing? Hop into the Discord!
@@leighhalliday Hello, thanks for getting back, i am at 17:33, i don't see any array doing console.log(clusters), instead i see this [react_devtools_backend.js:4045 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.].
@@leighhalliday I was trying this out because i followed your previous video adding markers, but that was too slow for almost 5K markers so had wanted to try this but i am stuck at 17.33, i don't see arrays, instead i see objects.
const mapRef = useRef(), mapRef appears undefined. I am using latest react
@@leighhalliday which is the link to Discord?
guys, i was looging on documentation and could not find, how could i type mapRef? i am writing this code using typescript, and still could not make it work because of a type erro related to mapRef, i even tried const mapRef = useRef(); but, no success :/
anyway, i could fix, declare const mapRef = useRef(null); and remove transitionDuration, because it is not a string anymore
Hi what a great tutorial, can use mapbox with react to draw a route between two points using mapbox direction api, thanks once again.
Hey Tafadzwa! Probably, but I'm not sure :D I've never done it before. Give it a try and let me know!!
That is super mahn! Although i had a small problem, actually i have a record of more than 10000 records. So when i keep zooming in after a point when there are cluster with (5-10 number), it doesn't break that cluster and show me markers. It just zooms in the most and show me the cluster number (the same), not the markers inside. Help please.!
Hey Siddhant! There's a function in supercluster you can call to retrieve the individual points contained within a cluster... maybe once you reach a certain zoom level, you could just show the individual points rather than the cluster.
const { clusters, supercluster } = useSupercluster({...})
// while rendering... if zoom level is over a certain number, can grab the individual points within a cluster
const points = supercluster.getLeaves(cluster.id)
Documentation here: github.com/mapbox/supercluster#getleavesclusterid-limit--10-offset--0
@@leighhalliday Hey Leigh! I tried doing it all your way you said but the problem is after a value of viewport zoom i showed points but instead it's showing the cluster as a point and i really can't figure out where am i doing wrong.
Here's the link of component in which i am rendering map github.com/coderrsid/coordinate-analyzer/blob/master/src/Containers/MarkedMap/MarkerMap.js#L145
Can you please help me!
awesome
Thanks, Xiaoyi!!
How Mapbox compares to OpenLayers?
Hey Les! Shoot, honestly I had never heard of OpenLayers haha... thanks for introducing it to me!
Please add info window one more in this tutorial. I try to add it but not working thanks.
Hey Mengkhorn! What is the issue you're running into?
@@leighhalliday I don' know how to handle on click on marker show info like google infowidow.when follow this tutorial.
Check out this video, it isn't with clustering but it shows how to do info windows in Mapbox: ruclips.net/video/JJatzkPcmoI/видео.html
@@leighhalliday Thanks you .
hi bro, pliiz, can you do it marker.clustering from database
Hey Mourad! I think in this video it loaded the data from an API, which probably stores the data in a database... but do you mean that you're interested in building the backend (+ database) ourselves? If so, I'm working on a video now which will be doing this... both reading + writing. Stay tuned!
thanks bro 😁, I have an end of study project, and the most interesting part concerns the import of coordinates from database with the cluser option, I have a problem only about the cluster step, I don't know how I do it !!!
How can we get police crimes data from other countries? I hope you can reply! great video!!
Hi Leigh! This was an amazing tutorial and helped me a lot for my current project!
Is there a way to use data imported from json file instead of using swr method to implement cluster with React Mapbox-gl?
I want to use json file for my project as you did in another video “Mapbox - Interactive maps in React”
ruclips.net/video/JJatzkPcmoI/видео.html
Any advice?
Thank you!
For sure! Take a look at this line to see how I did it github.com/leighhalliday/google-maps-react-demo/blob/master/src/App.js#L9
Clear message, clear structure, easy to understand, thank you
You try to give the video more brightness it will be great if you do
I will try to not let you down