Back to Browse

React Cluster, show Users' Avatars on the map as Clusters using SuperCluster, MapBox, MUI5

3.9K views
May 30, 2022
25:46

This is the 11th part of our React MERN project CouchSurfing. In this video we showed the added rooms as collection or groups (Clusters) of the Users' Avatars using Supercluster to show the rooms in the same location as a cluster in circle icon with the number of the rooms available near this location. And when you click on this icon it spreads the available rooms out. Reactjs Supercluster Material UI5 (MUI5) Nodejs Expressjs MongoDB Mongoose Firebase Storage Mapbox React-Map-GL Global Context Provider The whole videos playlist of the project: https://www.youtube.com/watch?v=ANZNMaBODDY&list=PLufbXXGswL_pS6rdWbDO56oiZovLWE_rs Source Code on github: https://github.com/codelikepro22/place-to-stay/tree/part_11 00:00 Introduction 00:55 Building getRooms controller to request fetching the rooms from Mongodb 02:25 Building room action in client to request rooms from the server 05:58 Adding the map using React-Map-GL 07:38 Building rooms' clusters using superCluster 21:42 Updating user's information in the rooms (records) cluster after the user updated the profile to reflect the new updated information 24:20 Introduction to the next video

Download

0 formats

No download links available.

React Cluster, show Users' Avatars on the map as Clusters using SuperCluster, MapBox, MUI5 | NatokHD