Build Weather Event Tracker – Google Maps with Search & Clusters (React Tutorial)
In This video you will learn how to create a Live Weather Event tracker using the “google-map-react” dependency in React in conjunction with the live EONET API from NASA. The distinction between this tutorial and others of a similar nature, is that this tutorial includes both a clustering feature and a search feature. The clustering feature is good because it improves the maps performance and solves the issue of little distinction between individual markers because they are so closely packed together. The search bar is a nifty widget which is not present on any other map video. It gives the user the choice of clicking on one of the results to go to its location on the google map.
📚 Materials/References:
Open Sans Font (Google Fonts): https://fonts.google.com/specimen/Ope...
The ‘iconify’ dependency: https://www.npmjs.com/package/@iconif...
‘Dotenv’ dependency: https://www.npmjs.com/package/dotenv
‘useSupercluster’ dependency: https://www.npmjs.com/package/use-sup...
‘google-map-react’ dependency: https://www.npmjs.com/package/google-...
ReactJS code snippets extension: https://marketplace.visualstudio.com/...
🧠 Concepts Covered:
How to cluster individual markers on the google map API.
The ‘useContext’ hook to implement global state management in our application.
Implement a search bar in react that dynamically content based on the users input query. This is used in conjunction with the “setTimeout” method to provide some space of time between the query and the matching results.
How to use the fetch API in React to send a GET request to retrieve a JSON object which will then be handled by our application.
💻 Technologies used:
-ReactJS
-CSS
-Fetch API
-Google Map API
KEYWORDS
qixotl_lfc,Qixotl,LFC,react,react google maps,google map marker cluster tutorial,google map clustering,react search bar with suggestions,react search filter,react search component,nasa api react,react google maps search box example,react-google-maps autocomplete,fetch api react js,fetch api javascript,web dev google map,google map api key,nasa google map,google map javascript api tutorial,google map autocomplete javascript,google map developer tutorial,map js
If you enjoyed this video then please consider liking 👍 and subscribing. You would be doing me a huge favour if you did this and it would be greatly appreciated ❤️ by me. Likewise, if you have any queries or comments that you want answered. Then please, don’t hesitate post them down into the comments box below. I would love to hear back from you and will answer all of your questions to the best of my ability.
Stay awesome guys. Peace and love. ☮️❤️
Смотрите видео Build Weather Event Tracker – Google Maps with Search & Clusters (React Tutorial) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Qixotl LFC 15 Апрель 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 8,551 раз и оно понравилось 160 людям.