Set initial zoom level & map center based on current feed distribution

[scottveirs]

Problem

As a first-time visitor to live.orcasound.net viewing the map on mobile (by selecting the map icon) or desktop, I would like to see most of the hydrophone locations where I can listen live, without having to zoom out and/or pan.

As of the soft launch of the v3 UI, the dynamic map has an initial zoom level and center coordinates that does not include all of the active hydrophones (with feed Visibility set to true). Here are screenshots from mobile (iOS+Chrome) and desktop (OSX+Chrome):

Proposed solution

Definitely worth further discussion, but a preliminary improvement IMHO would be for the map upon first view to include all of the current live feeds in/near the southern Salish Sea. For example, inclusive of Orcasound Lab node in the north and MaST Center Aquarium in the south.

Added intelligence could perhaps leverage the new Visible field for feeds. For example, one could take the min & max of latitude and longitude across all feeds and then average each to get a useful center coordinate (mean latitude, mean longitude)... but I'm not sure how to compute the best zoom level.

Tougher decisions may come if/when we add hydrophones off Newport, OR, in Monterey Canyon, CA, or even points further afield.

[paulcretu]

Good points @scottveirs, I had this concern when choosing where to center the map (currently it's arbitrarily set to 48.27, -123.23 at zoom level 9). When choosing I did try to center it around existing locations, but how much map you see actually depends on screen size. It looks kind of okay on desktop for me (only missing MaST Center):

On smaller screens we'd need to zoom it out to cover the same area. It's certainly possible to do some math and calculate the best center coord + zoom level for the current screen size given a list of locations, but we could probably get the 80/20 solution by just hardcoding a better center coord and using a different zoom level for mobile.

Especially because as you note, we'll need to revisit this if we start adding more distant locations. Eventually we may want to prioritize by listener location, listener count, or something else.

[scottveirs]

I agree, @paulcretu , that it looks good as-is on desktop (OSX+Chrome):

On mobile/iOS currently, though, the default ends up being pretty restricted:

<img width="250" src="https://github.com/orcasound/orcasite/assets/14044595/37b0e96e-7511-4cf6-9aa7-a6278ae3bc8d">

Proposed short-term solution:

Playing around with zoom and pan in Chrome on both iOS and OSX, it seems like an optimal ("80/20") solution for now with the current 7 hydrophone locations would be to zoom out one level and reset the default map center to be just south of Bush Point (approximately 47.9641, -122.6125). I think it the default map view would then look something like this on mobile and desktop respectively:

<img width="250" src="https://github.com/orcasound/orcasite/assets/14044595/a4b5f92a-fefd-4d97-9d75-0b383763438a">

Alternate short-term solution:

If you kept the same map center, but zoomed out one level, then on iOS and desktop you'd get something like this:

<img width="250" src="https://github.com/orcasound/orcasite/assets/14044595/8ceb753e-0140-4cae-9ac1-5e25e486fe03">