Wized & Mapbox - Building an interactive map

[@likhikaRoutray]

this is exactly what i was looking for, thanks 🙌🙌

[@NoCodeProCode]

I absolutely love it 💛

[@WizedWarlock]

Just finished watching one of your videos and saw this pop up. Love your work!

[@NoCodeProCode]

@@WizedWarlock 🙏💛

[@carloking2163]

Nice! Do you forsee there being problems using this method with there being around 600 items being rendered?

[@WizedWarlock]

Hey Carlo. Rendering 600 items on the map won't be much of an issue as far as the length of time it takes to render the map and it's properties. However it would be worth considering the UI issues of having that many icons on a map (depending how close together they are). I would take one of three approaches: 1: Cluster my data so that they display as icons showing their count for a specific area. They can then disperse on zoom. Difficulty - Easy. More about that here: docs.mapbox.com/mapbox-gl-js/example/cluster/ 2: Have either a server-side/client-side filter for the data that is set when the map loads I.E You have 300 rental properties and 300 for sale properties, but you choose either one to display on load, then your user can change the filter from there. Difficulty - Intermediate. 3: Build a function that finds the edges of the map viewport and then only displays a set amount of icons inside of that viewport. Whilst allowing it to recalculate the edges every time you zoom, giving the effect of it “refreshing” the map as you zoom in and out. Difficulty - Hard. I will be doing more videos on mapbox in the future so if you’d like to see something in particular, feel free to request it. Hope this helps!

[@carloking2163]

@WizedWarlock I was considering going down the cluster route, to be honest. Was just checking in to see if you think it could have some loading issues in wized. May I ask why you chose to use the address for markers as opposed to the xano's built-in geo_point field?

[@WizedWarlock]

​ @carloking2163 I don't think you'll run into any issues with it loading in wized. The reason I didn’t use geopoints in this case is simply because Xano doesn’t have an inbuilt function or API that can convert addresses to lat/lng. It’s mainly manual work inside the database. You’ll still need to have a external API to get the lat and lng dynamically when new data was posted to your database. If the dataset is small, I’ll just use the mapbox api to translate it on the client-side. However in your case with 600 items. I would opt to store that lat and lng in my database and void the client side request, as to not use up my geocoding api calls on my mapbox account, (I think it’s 10,000 items a month). If you need any help in the future with this, feel free to contact me!

[@carloking2163]

@WizedWarlock sent a request through your site mate 😁 Maybe it's a newer feature but when we were adding in the geo_point fields. We just typed in the name of the place and it was able to load the lat/lng directly inside the table which is pretty nice.

[@WizedWarlock]

@@carloking2163 Awesome! I am familiar with the address search for the table. However I'm not sure if you can formulate a post request to that table/column that will convert your address input into lat and lng natively. It works manually but to set that up dynamically I think it might require an external API....However I will do some more research on that 😄

[@HarshVerma.Growth]

Hi