Replace zoom limits with fewer details endpoint

[RyanTG]

Overview:

Get rid of "zoom in" limit. No zoom logic. Two queries at a time: one for markers and one for List.

More details

Use the within_bounding_box?no_details=2 endpoint to populate the map markers. This endpoint returns only:

• location ID
• location name
• location lat
• location lon
• num_machines

Then, for the List, we use a paginated endpoint, within_bounding_box?no_details=1;limit=50

Full example endpoint: https://pinballmap.com/api/v1/locations/within_bounding_box.json?swlat=34.03303087144905;swlon=-118.28017417341471;nelat=34.19971296454513;nelon=-118.17717399448156;limit=5

This endpoint, at the bottom of the results, includes pagy fields that we can use for creating and using navigation buttons.

For sorting the List, the sort button does a new query. Include order_by= in the query. Possible options are: updated_at, name, machine_count, id default is id

Need to account for:

• The "filter by machines shown on the map" option.

Marker clicks can still show the bottom sheet.

Let's look into the location details (at least enough for the bottom sheet) being requested when a marker is clicked. We might need to make a new locations endpoint that is specific for the bottom sheet (for example, only returns the shown fields, including only the top 5 machines and not all machine IDs).

[RyanTG]

One potential alternative to only using Zoom thresholds to switch to the no_details=2 endpoint is to use a combo of zoom and the actual number of results. I think this would involve making two queries.

For example, say that you filter to a machine that isn't common, instead of switching to no_details=2 as you zoom out and showing the simplified info, you switch to no_details=2 in order to quickly check the quantity of locations in the request, and if it's lower than a certain threshold (300?), you then make a no_details=1 request for the same bounds and display that.

[bpoore]

@RyanTG, would the dual request option only kick in when we currently would be showing "Please zoom in"? I think we could make that work.

[RyanTG]

Yes, that sounds right.

[RyanTG]

Commit for this feature on the website: pinballmap/pbm@bf6330d#diff-08ce13951cddb70864cea049afd986d569303b434b05202957b5d9ed2b012e98

Lessons learned from the website (basically here's what we did), with ideas for app:

Requests:

Website:
Every single request is split into two queries: one is a lean query (basically within_bounding_box?no_details=2) that we use to construct the geojson for the map data, and then a second one (basically within_bounding_box?no_details=1) that is used for the results/list AND is limited to returning only 50 items with pagination for the rest. On the website, the "list" divs gets loaded next to the map, and they take up a lot of time to load. In the app, it seems like this is smoother because the "list" is on a separate screen and doesn't slow the map screen loading down.

App:
For the map itself, all we ever need to load map results (including filtered results) is a ?no_details=2 queries that returns only id/lat/lon/machine_count.

But! For the "List" and the "Machines in Map Area" filter, we need more details. For List, it's not reasonable to show thousands of locations, but I also don't think it's worth completely hiding the list (as I previously suggested). Perhaps we follow the website and just add a limit to the number of items returned.

For "Machines in Map Area" I am less certain what to do. We could use the same "too many to list" logic to them hide this filter option so that we don't to worry about joining it with the list of machines.

In summary: I think it might be ideal to completely do away with all "zoom in" logic and perhaps just do two queries at all times - ?no_details=2 and ``?no_details=1 limited to X`

Map Display

Website:
Created 9 markers. They vary in color and size.

10+ machines zoomed in 
10+ zoomed out
10+ machines selected zoomed in 
2-9 machines zoomed in 
2-9 zoomed out
1 machine zoomed in
1 zoomed out
1-9 machines selected zoomed in (got lazy and just made one for both of those cases)
selected marker zoomed out (just one for all)

App:
Could do the same thing, though in the app we also have Saved markers.

Website:
Use mapbox/maplibre expressions to switch back and forth between zoomed in/out markers as user zooms. And expressions to hide/show labels.

App:
Could do same thing.