This was an incredibly useful tutorial, thanks Leigh! I would have struggled to get this all working on my own!! I wanted to point out that if you have more than a couple thousand points this will struggle if the user zooms in quickly, the map would freeze for 30 seconds or so. I changed the two useStates for bounds and zoom to be updated in a reducer instead and it perfoms much better! I think it was rendering multiple times for each zoom level because each was setting state separately. Just in case anyone else is having the same issue. Thanks again Leigh!
Thank you Leigh! I remember that I saw some tutorials w/ maps on your channel, so I checked and... Boom! Here is exactly tutorial that I needed for my job project! Your tutorials are really practical! :)
Leigh amazing job making this, I am making an app web and mobile version and I just got through modifying this slightly to work on react-native as well! its so great that both versions of my app will be able to make use of this thank you so much for making it !
@@psymannizback So the missing piece for me from react to react-native was the map zoom level which the superclusters need. So what I did was write a small function that takes in the screen width, northeast longitude and southwest latitude (part of the map boundaries ) and run them through to calculate the zoom level based on that. After i got the zoom level superclsters worked just like on reactjs, does that help?
@@ScubaSEAsons I tried to just render the clusters before going into the zoom part, just to see how its working but could not get it done, also the clusters object is always returning a empty array, I don't understand why
@@psymannizback might be the way your boundary coordinates are going in, as Leigh mentioned there is a specific order they have to go into and if i recall i think it actually a different order for mobile than it was web, mine are in this order: southwest lng, southwest lat, northeast lng, northeast lat
Optional chaining is now stage 3. It'd be great if you create a video about it or explain it while using it on one of your resourceful videos. I bet many will love it ;) Great job, BTW. I watch your channel whenever I have some time. Right now playing all your uploads to the very beginig. LoL
Ahhh man, I miss the days of being able to do a 360 flip... I could probably still rock kickflips... might need a bit more practice to get back into tres flips
This is an amazing implementation of clustering. I have it working great based on this tutorial. The google-map-react and your useSuperCluster package makes it so simple. I just have an issue displaying a pop up window above an individual marker with this clustering method implemented. If I don’t use clustering I see tutorials on how to add a pop up window, but when I add clustering, I can’t find any tutorials on how to implement both. Is there a straightforward way to implement pop ups only above individually clicked markers with google-react-map, or is there a certain technique you would suggest. Maybe a custom hook for showing hiding a pop up window perhaps. I’m just having a hard time wrapping my head around this. Thanks everyone!
Hey Scott! Thank you :) I would try to avoid using built-in InfoWindow, and try to control it via state yourself. The goal is to put into state whatever info you need, whether that be an ID, or an array of IDs or whatever, and then show an InfoWindow in React when the state has a value.
@@leighhalliday Thanks, Leigh! I did just that and showed a conditional pop-up window when pressing on an individual pin. I did have to create a third outside of the clusters.map() function that gets passed longitude, latitude, and a username as props from the marker that's clicked on, as I am displaying user data in the pop-up. So I set the state of my custom hook to an object with those properties and then passed that through the setter hook so the pop-up "Marker" could have access to those outside of the clusters.map() function. It was a nice challenge, but well worth it. Thanks again!
Thanks great video, i have a need which is combination of bear finder tutorial and cluster and in one place(lat, lng) where millions can click, the cluster should count no of clicks in each lat, Lng and show the aggregate, need your guidance , how to reach you.
Hey Harini! Definitely, what you’ll need to do is store an array of selected locations rather than just one, then map them onto the map like you did with the markers themselves. It adds some complexity but is definitely possible.
I honestly can't remember the difference off of the top of my head haha. I'd say pick whichever has better docs, is being actively maintained, and has strong support (downloads).
Thanks Leigh, can you make another tutor using @react-google-maps/api. They said that react-google-map sadly unmaintained. @react-google-maps/api provides very simple bindings to the Google Maps JavaScript API v3 and lets you use it in your app as React components.
Hi Leigh thanks for making this video. I have it working well but am trying to migrate it to use the @react-google-maps/api framework to match your article React Google Maps 2020 Update. It does not seem to be picking up the bounds when the Google Map is loaded so no clusters are displayed. Any advice? Thanks in advance
Hmm... are you able to see the bounds within the console, or aren't able to get them at all? You may have to store them in state, and then update them after the map has loaded for the first time, which would give you the ref and the ability to update the state values... that in turn would cause it to re-render and show clusters.
There is! There's a function from supercluster that gets the "leaves" of a cluster: github.com/mapbox/supercluster#getleavesclusterid-limit--10-offset--0
I don't think so with supercluster... at least from what I can see in the options, but you could just ignore the supercluster points and show the raw ones if the number is low enough, or even have 2 different components that handle displaying them when the numbers are below a certain number.
Great lesson!Thanks ! I'm currently working on making a map with about 8 million markers and their clusters. In a previous video you suggested kepler.gl .As i am working on jupyter and kepler my browser keep crashing when i enter over a million of points. Do you have any further suggestion? Thanks in advance
Hey Kostas! Honestly if kepler.gl can't handle all your markers, I don't think this even stands a chance... sorry, not really sure what to recommend when you're dealing with that much data!
Here's a potentially dumb idea :) What if you stored psuedo markers with less resolution? For example... Toronto is: 43.653225, -79.383186 What if you stored all the markers at 43 and -79 together, and a count of how many there are. So when you are zoomed out far, you will show these high-level "rounded" (less precision) markers... and when you zoom in, you will reach for the real ones. The goal I think is to avoid having to show 8 million markers all at once... show less data that visualizes the same thing.
@@leighhalliday Thanks for such a quick response! That sounds like a great idea , the thing is that i add_points to kepler map. I don't use an in react implementation. Should i switch in js?
@@kostasspiridakis7626 Hello, I am working with the same amount of data on my project, did you find a solution ? Could we tchat if its the case ? My wire : ant_one
I'm trying to implement exactly the same thing, but it seems that the onChange event gets triggered only once, and that's when the map gets rendered for the first time.
Hey Poa! In the react google maps api package used in this video I couldn't easily see how, so you may want to look into this library, which has a Polygon component that can be used. react-google-maps-api-docs.netlify.app/#polygon
@@leighhalliday thank you for your prompt answer. Well the package used in this video is google-map-react and not react-google-maps that's why when i tried to look at the available documentation and smaples at google-map-react I didn't find how to add polygon . So at the end shall I have to import the 2 packages to add a ploygon? if yes this kind of weird. my last question to you can we use supercluster hook with react-leaflet? Many thanks in advance
giving me error that : Type '{ children: Element; key: number; lat: any; lng: any; }' is not assignable to type 'IntrinsicAttributes & { children: any; }'. Property 'lat' does not exist on type 'IntrinsicAttributes & { children: any; }'.ts(2322) (JSX attribute) lat: any Please help
./node_modules/use-supercluster/dist/use-supercluster.esm.js Module not found: Can't resolve 'supercluster' in getting this error after doing "npm i use-supercluster"
Hey Randy! Make sure to name them starting with `REACT_APP_`, otherwise they won't get picked up. create-react-app.dev/docs/adding-custom-environment-variables/
Hey Tran! In the near-term, probably not... because I am not very strong with React Native, but long-term, yea, for sure! I'd love to cover React Native as well. Stay tuned :)
Hey Carlos! Here is the source from the video... try comparing what I did to the finished solution, remove stuff and add it back in until you get to the point of the error happening. It sounds like make the data isn't in the right format when passed to the hook (which passes the data to supercluster): github.com/leighhalliday/google-maps-clustering
When I import the library just like: import useSuperCluster from "use-supercluster"; It gives me an error "Failed to compile" ./node_modules/use-supercluster/dist/use-supercluster.esm.js Module not found: Can't resolve 'supercluster' in '/Users/.....................'
Nice tutorial sir, so how to render about a hundred thousand markers without hang the browser? Actually i use @react-google-maps/api and i'm already clustering the marker too. Thanks by the way
Hey Rizky! I think you should look into kepler.gl which seems to handle this high volume better. It's from Uber and is built on top of MapBox. Also, I would question whether you should be rendering 100k markers?
Hey there sir, yes i would like to rendering around 123k markers, is kepler.gl provide styling maps like google maps? And how to integrate with google api keys? Honestly, i never done before with this. Well thanks for replying my question.
Well thanks for the answer sir, i've just found the solution for this, i'm rendering over 3000 marker by pure google maps API without any library, maybe i could rendering over 100k marker too idk.
hi sir , how can we draw polyline of cart direction using google-map-react library . i didn't find anything about polyline in www.npmjs.com/package/google-map-react . please help me
thanks , this video helped me a lot, but a miss one thing, how can i handle with the click on the button, i wish a info window in my app but i don't found this in the documentation
Hey Patrick! I don't have a video specifically showing how to make a popup (info window) for a cluster, but I have a video showing how to make one for a marker, so you may be able to translate that to your project... let me know! ua-cam.com/video/Pf7g32CwX_s/v-deo.html
import useSupercluster from "use-supercluster"; above line is giving error in my project: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. I am not able to use 'use-supercluster' library
It's literally 1 file long if you'd like to take a look and try to troubleshoot the issue :D github.com/leighhalliday/use-supercluster/blob/master/src/index.tsx
Hey Tomi! Maybe you can share a codepen so we can help! Is the issue in the API call or the processing of that data to convert into points needed for the useSupercluster hook?
Hey RocMark! I am planning to redo the Google Maps in React video this year using @react-google-maps/api... stay tuned, probably within the next few weeks.
Hello Leigh and all. I really like you teaching Leigh. I am at minute 24:29 and when I run, I get (below). Anyone has any clue what I did wrong? I was able to see the map i an earlier iteration of the code. Note: New at VSCode-React. TypeError: Cannot read property 'map' of undefined App E:/Documents/prolobiz/src/App.js:49 46 | // 4) render map 47 | return ( 48 | > 49 |
Hey Guy! Hmm... it's a good question! Are you able to join the Discord group and share your source code? Perhaps I or someone else in the group can help! Thanks again for your support!!
My app is crashing, and I'm getting this error whenever I use the useSupercluster hook with google-map-react "Uncaught TypeError: Cannot read properties of undefined (reading 'length') at Supercluster.load (index.js:36:1)." Any help would be appreciated
This was an incredibly useful tutorial, thanks Leigh! I would have struggled to get this all working on my own!! I wanted to point out that if you have more than a couple thousand points this will struggle if the user zooms in quickly, the map would freeze for 30 seconds or so. I changed the two useStates for bounds and zoom to be updated in a reducer instead and it perfoms much better! I think it was rendering multiple times for each zoom level because each was setting state separately. Just in case anyone else is having the same issue. Thanks again Leigh!
Hey Dan! Yea, sounds like at that point it should probably be debounced.
May you share your code please with reducer, I am struggling
Thank you...I had to show millions of markers in map in my project..this is helped a lot...thank you
The best tutorials found on the web come from Mr. Leigh Halliday! Not a single detail left behind. Thank's a lot for bringing us the best material.
Cheers, Emerson! Thanks for watching and showing your support!
Thank you Leigh! I remember that I saw some tutorials w/ maps on your channel, so I checked and... Boom! Here is exactly tutorial that I needed for my job project!
Your tutorials are really practical! :)
Thanks for sharing! I found it extremely helpful. Much appreciated from people on the interwebs!
Thank you for taking out the time to make the video. I read the article but the video was much easier for me to consume
Thank you Leigh !! It is great video with detailed explanation ❤
I can not explain how much this helped me! Thank you very much! I am your number one fan forever!!!!!
Leigh amazing job making this, I am making an app web and mobile version and I just got through modifying this slightly to work on react-native as well! its so great that both versions of my app will be able to make use of this thank you so much for making it !
how did you modify in order to work on React Native? Im having problems assigning the coordinates to the clusters. Any tips ?
@@psymannizback So the missing piece for me from react to react-native was the map zoom level which the superclusters need. So what I did was write a small function that takes in the screen width, northeast longitude and southwest latitude (part of the map boundaries ) and run them through to calculate the zoom level based on that. After i got the zoom level superclsters worked just like on reactjs, does that help?
@@ScubaSEAsons I tried to just render the clusters before going into the zoom part, just to see how its working but could not get it done, also the clusters object is always returning a empty array, I don't understand why
@@psymannizback might be the way your boundary coordinates are going in, as Leigh mentioned there is a specific order they have to go into and if i recall i think it actually a different order for mobile than it was web, mine are in this order: southwest lng, southwest lat, northeast lng, northeast lat
@@ScubaSEAsons thanks for the replies, may I add on discord to ask some questions regarding this topic?
Thanks for these awesome tutorials, Leigh. I always come away with a clearer understanding, which is so motivating. Greatly appreciated!
You're very welcome, Jeanne! Thank you for the support :)
Great! The BEST tutorial. Thanks a lot for your sharing.
One of the best tutor I would say! so much clear explanation, up to point. Many thanks :)
Optional chaining is now stage 3. It'd be great if you create a video about it or explain it while using it on one of your resourceful videos. I bet many will love it ;)
Great job, BTW.
I watch your channel whenever I have some time.
Right now playing all your uploads to the very beginig. LoL
Are you saying you don't like doing:
if (data && data.user && data.user.address && data.user.address.country === 'CA')
😂
thanks for the video you've made, it's helping me build a service to help fighting the coronavirus
That's awesome to hear! Share when you're done!!
Amazing! Thank you for sharing.
This was super super helpful, thank you so much!
Thank you Nina, I appreciate the support! :)
Awesome content man! Thank you very much!!
I like the song at the beginning, and the video tutorial too :)
Hmmm... don't remember having a song :D (it was a while ago) but glad you enjoyed the video!!
@@leighhalliday HELLOOO.. HELLLOOOO.. HREEEELO!?!??
thank you for the video and code sample! Your channel is great!
Thank you guy man dude, I appreciate you and your sweet name.
Thank you very much, bro.
You're very welcome!
Nice! Helped me a lot, thanks.
Glad I could help :) Thanks for saying hi!
Thanks for the awesome tutorials, Leigh.
Just a question, is there any way we can get which crime is in a cluster? Many thanks!
thank you!!
this is awesome, do you know any api 's to get nearby hospitals so we can make something like this ?
Thanks Leigh, that was I need it, before moves project to live. You saved my ass bro.
Nice! Glad it could help, Emre!
You're the best!
Tks!
Thanks Matheus, glad you enjoyed the video :)
thanks for this!
You're very welcome!
Niceeeeee. Tres flip massive
Ahhh man, I miss the days of being able to do a 360 flip... I could probably still rock kickflips... might need a bit more practice to get back into tres flips
@@leighhalliday Haha! Same man xD Haven't been on a board in a while, React is the new tres flip :D. Love the videos by the way!
nice tutorial
Thank you!
This is amazing. Thank you.
Thank you Mrinmay! Glad you enjoyed it :)
How to solve the problem if there is a markers with the same position in terms of lang and lat? Please I need a help
тебе не помогут
@@arystanaltynbaev8542 ответят по-любому !!!!
Perhaps marker clustering is a solution, I have examples in both google maps and mapbox
This is an amazing implementation of clustering. I have it working great based on this tutorial. The google-map-react and your useSuperCluster package makes it so simple. I just have an issue displaying a pop up window above an individual marker with this clustering method implemented. If I don’t use clustering I see tutorials on how to add a pop up window, but when I add clustering, I can’t find any tutorials on how to implement both. Is there a straightforward way to implement pop ups only above individually clicked markers with google-react-map, or is there a certain technique you would suggest. Maybe a custom hook for showing hiding a pop up window perhaps. I’m just having a hard time wrapping my head around this. Thanks everyone!
Hey Scott! Thank you :) I would try to avoid using built-in InfoWindow, and try to control it via state yourself. The goal is to put into state whatever info you need, whether that be an ID, or an array of IDs or whatever, and then show an InfoWindow in React when the state has a value.
@@leighhalliday Thanks, Leigh! I did just that and showed a conditional pop-up window when pressing on an individual pin. I did have to create a third outside of the clusters.map() function that gets passed longitude, latitude, and a username as props from the marker that's clicked on, as I am displaying user data in the pop-up. So I set the state of my custom hook to an object with those properties and then passed that through the setter hook so the pop-up "Marker" could have access to those outside of the clusters.map() function. It was a nice challenge, but well worth it. Thanks again!
@@scottkatzelnick9705 Hello Scott, I am struggling with displaying a popup on a marker. If you can share your code that be really helpful. Thanks
@@gurkiransingh1537 Are you using the clustering library shown in this video, or do you just need a pop-up in general?
Thanks great video, i have a need which is combination of bear finder tutorial and cluster and in one place(lat, lng) where millions can click, the cluster should count no of clicks in each lat, Lng and show the aggregate, need your guidance , how to reach you.
Hi Leigh, I was wondering if there is way to add info window on click of each marker in the GoogleMapReact component
Hey Harini! Definitely, what you’ll need to do is store an array of selected locations rather than just one, then map them onto the map like you did with the markers themselves. It adds some complexity but is definitely possible.
this one is very tuff man....
Hehe is that a good or bad thing?
@@leighhalliday I am very poor
1:08 do you recommend google-react-map or @react-google-maps/api?
I honestly can't remember the difference off of the top of my head haha. I'd say pick whichever has better docs, is being actively maintained, and has strong support (downloads).
Thanks Leigh, can you make another tutor using @react-google-maps/api. They said that react-google-map sadly unmaintained. @react-google-maps/api provides very simple bindings to the Google Maps JavaScript API v3 and lets you use it in your app as React components.
Hey Cempaka! I thiiiiink I use that library here... ua-cam.com/video/WZcxJGmLbSo/v-deo.html although it doesn't cover clustering.
Hi Leigh thanks for making this video. I have it working well but am trying to migrate it to use the @react-google-maps/api framework to match your article React Google Maps 2020 Update. It does not seem to be picking up the bounds when the Google Map is loaded so no clusters are displayed. Any advice? Thanks in advance
Hmm... are you able to see the bounds within the console, or aren't able to get them at all? You may have to store them in state, and then update them after the map has loaded for the first time, which would give you the ref and the ability to update the state values... that in turn would cause it to re-render and show clusters.
Thanks Leigh I’ll try that
Thanks for the video leigh!
I have integrated the same thing in my project but getting the empty array from useSuperCluster hook any idea about this?
Hey Sai! Hmm... check to make sure your zoom and bounds set correctly
@@leighhalliday I have checked but same issue
useSuperCluster is returning an empty array. will it take longer time to render?
@@saivipulchakravarthy8853 did you ever get this fixed. I am returning an empty array but can console bounds, ref and zoom ok :(
is there a way to access the points in the cluster ( usecase: I want to display a pecific point fron cluster instead of a cluster icon)?
There is! There's a function from supercluster that gets the "leaves" of a cluster: github.com/mapbox/supercluster#getleavesclusterid-limit--10-offset--0
Can we clusterize markers ONLY if there is more than n numbers on screen?
I don't think so with supercluster... at least from what I can see in the options, but you could just ignore the supercluster points and show the raw ones if the number is low enough, or even have 2 different components that handle displaying them when the numbers are below a certain number.
Can you please make a video on popover or infowindow on clicking the marker? Please
Hey Mohan! In this video I don't do clustering but I show infowindow and marker click events: ua-cam.com/video/Pf7g32CwX_s/v-deo.html
Great lesson!Thanks ! I'm currently working on making a map with about 8 million markers and their clusters. In a previous video you suggested kepler.gl .As i am working on jupyter and kepler my browser keep crashing when i enter over a million of points. Do you have any further suggestion? Thanks in advance
Hey Kostas! Honestly if kepler.gl can't handle all your markers, I don't think this even stands a chance... sorry, not really sure what to recommend when you're dealing with that much data!
Here's a potentially dumb idea :) What if you stored psuedo markers with less resolution?
For example... Toronto is: 43.653225, -79.383186
What if you stored all the markers at 43 and -79 together, and a count of how many there are. So when you are zoomed out far, you will show these high-level "rounded" (less precision) markers... and when you zoom in, you will reach for the real ones.
The goal I think is to avoid having to show 8 million markers all at once... show less data that visualizes the same thing.
@@leighhalliday Thanks for such a quick response! That sounds like a great idea , the thing is that i add_points to kepler map. I don't use an in react implementation. Should i switch in js?
@@kostasspiridakis7626 Hello, I am working with the same amount of data on my project, did you find a solution ? Could we tchat if its the case ? My wire : ant_one
@@nioneoleineib4237 Hey, sorry for late response. Check wire
Would you make a video/ article walk through for react native on how to do this?
Hey Christian! Sorry, I'm not super familiar with React Native... I don't think I'll be making this any time soon.
It’s okay thanks for the reply though if I will share with you when I get it for react native.
I'm trying to implement exactly the same thing, but it seems that the onChange event gets triggered only once, and that's when the map gets rendered for the first time.
I found the solution. It seems in order to get it working we need to add resetBoundsOnResize={true}
Thanks for following up with the solution Sadra!
thank you very much for this helpful viedo , may I ask you how to add Polygon ?
Hey Poa! In the react google maps api package used in this video I couldn't easily see how, so you may want to look into this library, which has a Polygon component that can be used. react-google-maps-api-docs.netlify.app/#polygon
@@leighhalliday thank you for your prompt answer. Well the package used in this video is google-map-react and not react-google-maps that's why when i tried to look at the available documentation and smaples at google-map-react I didn't find how to add polygon .
So at the end shall I have to import the 2 packages to add a ploygon? if yes this kind of weird.
my last question to you can we use supercluster hook with react-leaflet?
Many thanks in advance
giving me error that :
Type '{ children: Element; key: number; lat: any; lng: any; }' is not assignable to type 'IntrinsicAttributes & { children: any; }'.
Property 'lat' does not exist on type 'IntrinsicAttributes & { children: any; }'.ts(2322)
(JSX attribute) lat: any
Please help
I can't display html elements in marker. only icon option works. anyone can help?
:') Thank you
You're very welcome!!
./node_modules/use-supercluster/dist/use-supercluster.esm.js
Module not found: Can't resolve 'supercluster' in
getting this error after doing "npm i use-supercluster"
Hey Pratik! Install `supercluster` as well, it's a peer dependency of this gem.
Hey guys, I'm struggling to replicate the video using typescript, does anyone know where I can find some examples?
Just throw a bunch of anys and you’re good to go :)
Can't seem to make CRA see my env variables. Do I need to install dotenv library or something?
Hey Randy! Make sure to name them starting with `REACT_APP_`, otherwise they won't get picked up. create-react-app.dev/docs/adding-custom-environment-variables/
I tried to see the markers on the street view but they haven’t been shown there. Any suggestions?
Hmm... anything you can share to help troubleshoot?
Thanks. Great tutorial !!! Can you make another tutorials about google maps with react native in mobile?
Hey Tran! In the near-term, probably not... because I am not very strong with React Native, but long-term, yea, for sure! I'd love to cover React Native as well. Stay tuned :)
I tried many times but i still got the same error, "Cannot read property 'range' of undefined
at Supercluster.getClusters (index.js:84)"
Hey Carlos! Here is the source from the video... try comparing what I did to the finished solution, remove stuff and add it back in until you get to the point of the error happening. It sounds like make the data isn't in the right format when passed to the hook (which passes the data to supercluster): github.com/leighhalliday/google-maps-clustering
@@leighhalliday Super cluster dependency has problem in production
When I import the library just like: import useSuperCluster from "use-supercluster";
It gives me an error "Failed to compile" ./node_modules/use-supercluster/dist/use-supercluster.esm.js
Module not found: Can't resolve 'supercluster' in '/Users/.....................'
Ah, this package has a peer dependency on supercluster... so just `yarn add supercluster` to your project and it should be fine.
@@leighhalliday Awesome. This action fixed my issue. I appreciate the help sir!
@@leighhalliday Thank you for a nice tutorial.
Nice tutorial sir, so how to render about a hundred thousand markers without hang the browser? Actually i use @react-google-maps/api and i'm already clustering the marker too. Thanks by the way
Hey Rizky! I think you should look into kepler.gl which seems to handle this high volume better. It's from Uber and is built on top of MapBox. Also, I would question whether you should be rendering 100k markers?
Hey there sir, yes i would like to rendering around 123k markers, is kepler.gl provide styling maps like google maps? And how to integrate with google api keys? Honestly, i never done before with this. Well thanks for replying my question.
Well thanks for the answer sir, i've just found the solution for this, i'm rendering over 3000 marker by pure google maps API without any library, maybe i could rendering over 100k marker too idk.
hi sir , how can we draw polyline of cart direction using google-map-react library . i didn't find anything about polyline in www.npmjs.com/package/google-map-react .
please help me
Hey Vishal! I have zero idea :) It's not something I've done before... sorry!
thanks , this video helped me a lot, but a miss one thing, how can i handle with the click on the button, i wish a info window in my app but i don't found this in the documentation
Hey Patrick! I don't have a video specifically showing how to make a popup (info window) for a cluster, but I have a video showing how to make one for a marker, so you may be able to translate that to your project... let me know! ua-cam.com/video/Pf7g32CwX_s/v-deo.html
@@leighhalliday Oh, thanks , I just watched your video and it worked, but its really hard to pass data from other component.
@@pksasso Can you show me about it. I want info window too.
import useSupercluster from "use-supercluster";
above line is giving error in my project:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
I am not able to use 'use-supercluster' library
It's literally 1 file long if you'd like to take a look and try to troubleshoot the issue :D github.com/leighhalliday/use-supercluster/blob/master/src/index.tsx
My cluster count is going out of circle boundary. Any suggestion on how to do css for that?
Hmm... is the number too large? More padding?
Maybe to change the style of the market when you detect it's a larger number vs a small one... Add an extra class to it so you can have a smaller font
Having trouble getting my data through mapping. I'm using a different api.
Hey Tomi! Maybe you can share a codepen so we can help! Is the issue in the API call or the processing of that data to convert into points needed for the useSupercluster hook?
Would You mind to take a look at @react-google-maps/api and make a video demo how to use this? Have try that out and idk what i miss didn't work QQ
Hey RocMark! I am planning to redo the Google Maps in React video this year using @react-google-maps/api... stay tuned, probably within the next few weeks.
@@leighhalliday thx for reply subbed !!
Can anyone please add a infowindow to this.
can you make a video on how to render over a million markers on google maps without having performance issue?
Check out kepler.gl from Uber, it's something that can handle massive amounts of markers.
@@leighhalliday Thanks for the prompt responses.
Hello Leigh and all. I really like you teaching Leigh. I am at minute 24:29 and when I run, I get (below). Anyone has any clue what I did wrong? I was able to see the map i an earlier iteration of the code. Note: New at VSCode-React.
TypeError: Cannot read property 'map' of undefined
App
E:/Documents/prolobiz/src/App.js:49
46 | // 4) render map
47 | return (
48 |
> 49 |
This is the code I understood to be correct:
return (
{
mapRef.current = map;
}}
onChange={({zoom, bounds}) => {
setZoom(zoom);
setBounds([
bounds.nw.lng,
bounds.se.lat,
bounds.se.lng,
bounds.nw.lat
]);
}}
>
{clusters.map(cluster => {
const [longitude, latitude] = cluster.geometry.coordinates;
const {
cluster: isCluster,
point_count: pointCount
} = cluster.properties;
if (isCluster) {
}
return(
);
}) }
);
Hey Guy! Hmm... it's a good question! Are you able to join the Discord group and share your source code? Perhaps I or someone else in the group can help! Thanks again for your support!!
is this outdated?
try @react-google-maps/api next time
Hey Alexey! What do you like more about it?
wanna see functional component demo on @react-google-maps/api
My app is crashing, and I'm getting this error whenever I use the useSupercluster hook with google-map-react "Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at Supercluster.load (index.js:36:1)." Any help would be appreciated