Dynamic map defaults

src/plots/map/layout_defaults.js

@@ -12,18 +12,35 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
         type: 'map',
         attributes: layoutAttributes,
         handleDefaults: handleDefaults,
-        partition: 'y'
+        partition: 'y',
+        fullData
     });
 };
 
-function handleDefaults(containerIn, containerOut, coerce) {
+function handleDefaults(containerIn, containerOut, coerce, opts) {
     coerce('style');
     coerce('center.lon');
     coerce('center.lat');
     coerce('zoom');
     coerce('bearing');
     coerce('pitch');
 
+    // dynamically set center/zoom if neither param provided
+    if (!containerIn?.center && !containerIn?.zoom) {
+        var [{ lon, lat }] = opts.fullData;
+        var { minLon, maxLon } = getMinBoundLon(lon);
+        var { minLat, maxLat } = getMinBoundLat(lat);
+        // this param is called bounds in mapLibre ctor
+        // not to be confused with maxBounds aliased below
+        containerOut.fitBounds = {
+            west:  minLon,
+            east:  maxLon,
+            south: minLat,
+            north: maxLat,
+        };
+    }
+
+    // bounds is really for setting maxBounds in mapLibre ctor
     var west = coerce('bounds.west');
     var east = coerce('bounds.east');
     var south = coerce('bounds.south');
@@ -46,6 +63,51 @@ function handleDefaults(containerIn, containerOut, coerce) {
     containerOut._input = containerIn;
 }
 
+function getMinBoundLon(lon) {
+    if (!lon.length) return { minLon: 0, maxLon: 0 };
+
+    // normalize to [0, 360)
+    const norm = lon.map(to360).sort((a, b) => a - b);
+
+    let maxGap = -1;
+    let gapIndex = 0;
+
+    // find largest gap
+    for (let i = 0; i < norm.length; i++) {
+        const curr = norm[i];
+        const next = norm[(i + 1) % norm.length];
+        const gap = (next - curr + 360) % 360;
+
+        if (gap > maxGap) {
+            maxGap = gap;
+            gapIndex = i;
+        }
+    }
+
+    // take complement of largest gap
+    let minLon = norm[(gapIndex + 1) % norm.length];
+    let maxLon = norm[gapIndex];
+    minLon = to180(minLon)
+    maxLon = to180(maxLon)
+
+    return { minLon, maxLon };
+
+    // https://gis.stackexchange.com/questions/201789/verifying-formula-that-will-convert-longitude-0-360-to-180-to-180
+    function to180(deg) {
+        return ((deg + 180) % 360) - 180
+    }
+    function to360(deg) {
+        return ((deg % 360) + 360) % 360;
+    }
+}
+
+function getMinBoundLat(lat) {
+    return {
+        minLat: Math.min(...lat),
+        maxLat: Math.max(...lat)
+    };
+}
+
 function handleLayerDefaults(layerIn, layerOut) {
     function coerce(attr, dflt) {
         return Lib.coerce(layerIn, layerOut, layoutAttributes.layers, attr, dflt);

src/plots/map/map.js

@@ -80,6 +80,10 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
 
     var bounds = opts.bounds;
     var maxBounds = bounds ? [[bounds.west, bounds.south], [bounds.east, bounds.north]] : null;
+    var fitBounds = opts.fitBounds ? [
+        [opts.fitBounds.west, opts.fitBounds.south],
+        [opts.fitBounds.east, opts.fitBounds.north],
+    ] : null;
 
     // create the map!
     var map = self.map = new maplibregl.Map({
@@ -90,6 +94,10 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
         zoom: opts.zoom,
         bearing: opts.bearing,
         pitch: opts.pitch,
+        bounds: fitBounds,
+        fitBoundsOptions: {
+            padding: 20,
+        },
         maxBounds: maxBounds,
 
         interactive: !self.isStatic,
@@ -334,6 +342,10 @@ proto.updateLayout = function(fullLayout) {
     if(!this.dragging && !this.wheeling) {
         map.setCenter(convertCenter(opts.center));
         map.setZoom(opts.zoom);
+        if (opts.fitBounds) {
+            var { west, south, east, north } = opts.fitBounds
+            map.fitBounds([[west, south], [east, north]], { padding: 20 })
+        }
         map.setBearing(opts.bearing);
         map.setPitch(opts.pitch);
     }

test/image/mocks/map_dynamic_defaults.json

@@ -0,0 +1,15 @@
+{
+  "data": [
+    {
+      "hovertext": ["San Marino", "Cairo", "Istanbul", "Trondheim"],
+      "lat": [43.9360958, 30.06263, 41.01384, 63.43049],
+      "legendgroup": "",
+      "lon": [12.4417702, 31.24967, 28.94966, 10.39506],
+      "marker": {
+        "color": "#636efa"
+      },
+      "mode": "markers",
+      "type": "scattermap"
+    }
+  ]
+}

test/image/mocks/map_dynamic_defaults_anti_meridian.json

@@ -0,0 +1,15 @@
+{
+  "data": [
+    {
+      "hovertext": ["P1", "P2", "P3", "P4"],
+      "lat": [43.9360958, 30.06263, 41.01384, 63.43049],
+      "legendgroup": "",
+      "lon": [170, 180, -180, -170],
+      "marker": {
+        "color": "#636efa"
+      },
+      "mode": "markers",
+      "type": "scattermap"
+    }
+  ]
+}

test/image/mocks/map_dynamic_defaults_anti_meridian_2.json

@@ -0,0 +1,15 @@
+{
+  "data": [
+    {
+      "hovertext": ["P1", "P2", "P3", "P4"],
+      "lat": [43.9360958, 30.06263, 41.01384, 43.43049],
+      "legendgroup": "",
+      "lon": [100, 180, -180, -170],
+      "marker": {
+        "color": "#636efa"
+      },
+      "mode": "markers",
+      "type": "scattermap"
+    }
+  ]
+}

test/image/mocks/map_dynamic_defaults_center_set.json

@@ -0,0 +1,23 @@
+{
+  "data": [
+    {
+      "hovertext": ["San Marino", "Cairo", "Istanbul", "Trondheim"],
+      "lat": [43.9360958, 30.06263, 41.01384, 63.43049],
+      "legendgroup": "",
+      "lon": [12.4417702, 31.24967, 28.94966, 10.39506],
+      "marker": {
+        "color": "#636efa"
+      },
+      "mode": "markers",
+      "type": "scattermap"
+    }
+  ],
+  "layout": {
+    "map": {
+      "center": {
+        "lat": 90,
+        "lon": 90
+      }
+    }
+  }
+}

test/image/mocks/map_dynamic_defaults_zoom_set.json

@@ -0,0 +1,20 @@
+{
+  "data": [
+    {
+      "hovertext": ["San Marino", "Cairo", "Istanbul", "Trondheim"],
+      "lat": [43.9360958, 30.06263, 41.01384, 63.43049],
+      "legendgroup": "",
+      "lon": [12.4417702, 31.24967, 28.94966, 10.39506],
+      "marker": {
+        "color": "#636efa"
+      },
+      "mode": "markers",
+      "type": "scattermap"
+    }
+  ],
+  "layout": {
+    "map": {
+      "zoom": 2
+    }
+  }
+}