MapBox capabilities questions from designers for devs

[fancyham]

Overview

This is a list of questions from the design team to our Mapbox developer(s) that will help us better understand what's possible, what's easy/difficult, in order to inform our designs.

Action Items

Please review and answer these questions if you can, and note difficulty if something is particularly easy or difficult. Thanks!

1. Can we auto-zoom the map to show the closest 20 pins, no matter the distance from the user’s address? (particularly in extreme cases where there are lots of locations near by, or very few) (re: #2216)
2. Can we easily count how many results are within a certain radius? (useful for displaying a "20 locations in 5 miles)
3. Can we easily tell how many pins are currently displayed on the map? (re: #2216)
4. Can we display numbered pins dynamically, or do we need static images for each number? (re: #1711)
5. Can we draw circles on the map to show distance from user's address? (i.e. 1 mile, 2 miles, 5 miles, 10 miles)
6. Can we get MapBox working with Microsoft Clarity? #1908
7. DYNAMIC Data loading on MAP MOVEMENT  - this is where I wonder, if we move the center of the map to a different location that have more than 20 locations (at same map scale) : will it ZOOM IN to show only 20 locations? 
8. DYNAMIC Distance (Radius filter) -Can we combine this radius filter with the 20 closest locations ‘filter’?  Or the idea, when user enter location the default is to only show 20 closets, but as soon as you input additional filters in your search, then you are no longer bound to the 20 closest? 

Questions 1-6: @fancyham Questions 7-8: @Shienny1

(Let’s try to put the answers and summary of any discussion here for posterity and future reference)

[whitneywind]

1. Autozoom to show 20 closest pins?

• Yes, doable but getting an exact 20 isn’t always reasonable given the shape of the map and the distribution of pins. At least 20 or decreasing zoom until 20 or more are visible would be fine (meaning it wouldn’t zoom out anymore after passing that threshold).

2. Count results within a certain radius?

• Within a radius of the user’s current location?

• Idea for implementation: [turf.js](https://docs.mapbox.com/help/tutorials/analysis-with-turf/) for buffer and filter within specified radius

3. Tell how many pins are currently displayed?

• Yes. At current visible level or total? Either way, it’s very doable.

4. Display numbered pins dynamically? Or static images for each?

• It depends on how it will look. Is it simply displaying a number? Or a number inside of a separate image? Displaying dynamic text alone is easy but having it within an image will make it trickier. I can look into this. I’m sure it’s possible but, if another dev has more experience customizing svg’s they may be better suited to answer.

5. Draw circles on the map to show distance from user's address?

• We could use the same idea as in number 2.

6. Can we get MapBox working with Microsoft Clarity?

• I don’t have any personal experience with Clarity, but I would think not because as this user said: “Clarity relies on capturing changes to the DOM, while Mapbox renders maps directly onto a element and is directly reflected in DOM updates.”

7. DYNAMIC Data loading on MAP MOVEMENT  - if we move the center of the map to a different location that have more than 20 locations (at same map scale) : will it ZOOM IN to show only 20 locations? 

• is this the same as number 1? Getting an exact 20 might not always be an option, but the short answer is we probably could do that - it seems doable if we can implement number 1 and/or number 3. It might be disorienting to have the zooms switching like that though. And since the markers have to load and be counted before we can determine if there is a need to zoom in or out, there might be a delayed zoom change which also would be disruptive.

8. DYNAMIC Distance (Radius filter) - Can we combine this radius filter with the 20 closest locations ‘filter’?  Or the idea, when user enter location the default is to only show 20 closest, but as soon as you input additional filters in your search, then you are no longer bound to the 20 closest? 

• Is the radius filter the same as what is described in number 2? Or the same but it hides any beyond the first 20? What would this look like exactly?