Small bounding boxes are hard to understand

[vchendrix]

Dataset map bug: if bounding box is really small then give bigger sized map for reference, when opens bigger map include pin

Proposed Solution

• Change how the larger map is display by padding 3 decimal degress
  around the center lat/lon.
• Also, add a marker to the large map.

Change this code

metacatui/src/js/views/MetadataView.js

Lines 1039 to 1042 in ee44f2f

	var url = "https://maps.google.com/?ll=" + latLngCEN.lat() + "," + latLngCEN.lng() +
	"&spn=0.003833,0.010568" +
	"&t=m" +
	"&z=5";

to

            var url = "https://maps.google.com/?ll=" + latLngCEN.lat() + "," + latLngCEN.lng() +
-              "&spn=0.003833,0.010568" +
-              "&t=m" +
-              "&z=5";
+              "&q=" + latLngCEN.lat() + "," + latLngCEN.lng() +
+              // Pad 3 decimal degrees around the latlon center
+              "&spn=3,3" +
+              "&t=m";

Examples of a small bounding
from https://arcticdata.io/catalog/view/doi%3A10.18739%2FA29P2W73Z

Example of large map with no pin
The is the result from clicking the map above

[mbjones]

Thanks for the suggestion, @vchendrix and I'll +1 that as something I have also thought should be improved.

One thing to think about is how to handle multiple, small bounding boxes that are closely arranged. Some researchers submit detailed, small bounding boxes for their sampling units (e.g., 5 sq m plots), and they want them to show up in context of one another. Such small features can't be differentiated on a larger map, and the main purpose of the current view is to allow reasearchers to validate the details of the provided bounding box. One suggestion we have discussed is to combine all of the bounding boxes into a single interactive map for the dataset, and show them at a higher zoom level, but allow people to zoom in to see the specifics of any of the fine-scale boxes. I think that could be a good solution and would likely be quite feasible with current interactive map libraries.

[robyngit]

@vchendrix, thanks for the detailed, proposed fix! I think we can implement this fix quickly.

@mbjones's idea of a combined interactive map is a promising idea for a longer-term solution. This idea is discussed in detail in issue #925.

[robyngit]

@vchendrix - I just finished working on this issue and want to share some observations:

• We are not using the official Google API for creating links to maps, and I had a hard time getting the parameters we're using to work as expected.
• There's no way (that I can find) to add a marker to the map with these url parameters. If we use the official API, the best we can do is search for the centroid coordinates, but the result is then too zoomed in for larger bounding boxes.
• I think the best bet is to calculate an appropriate z level based on the bounding box, which I did in c82c15c, the results of which are shown below.
• An alternative is to use OSM, which allows you to set a bounding box and a marker directly in the url, e.g. const osmUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${w},${s},${e},${n}&layer=mapnik&marker=${mapLat},${mapLng}`;
• Obviously if we switch to using Cesium in the MetadataView, we'll have a lot more control.
• I think this solution fixes the problem of small bounding boxes, so I'll close this issue for now. The fix will be included in the upcoming release. Of course, we can always re-open it if more discussion is needed!

Before (@vchendrix example above)

After