Merge pull request #26 from newrelic/kav/MapWidgetBounds

feat: map widget add max bounds

visualizations/nr-mapbox/leaflet/index.js

@@ -4,6 +4,7 @@ import { Icon } from 'leaflet';
 import 'leaflet-color-markers';
 
 import 'leaflet/dist/leaflet.css';
+import { parseLatLngBounds } from '../utils';
 
 const availableMarkerColors = [
   'blue',
@@ -26,7 +27,9 @@ function LeafletRoot(props) {
     defaultMarkerImgURL,
     defaultImgWidth,
     defaultImgHeight,
-    mapLocations
+    mapLocations,
+    maxBoundsSouthWest,
+    maxBoundsNorthEast
   } = props;
   //   const [popupInfo, setPopupInfo] = useState(null);
 
@@ -40,12 +43,15 @@ function LeafletRoot(props) {
       : parseFloat(initialLong)
   ];
 
+  const maxBounds = parseLatLngBounds(maxBoundsSouthWest, maxBoundsNorthEast);
+
   return (
     <>
       <MapContainer
         style={{ height: '100vh', width: '100wh' }}
         center={position}
         zoom={!initialZoom || isNaN(initialZoom) ? 7 : parseFloat(initialZoom)}
+        maxBounds={maxBounds}
       >
         <TileLayer
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

visualizations/nr-mapbox/mapbox/index.js

@@ -7,6 +7,7 @@ import Map, {
   ScaleControl,
   Popup
 } from 'react-map-gl';
+import { parseLatLngBoundsForMapbox } from '../utils';
 
 function MapBoxRoot(props) {
   const {
@@ -19,13 +20,19 @@ function MapBoxRoot(props) {
     defaultImgHeight,
     mapStyle,
     mapBoxToken,
-    mapLocations
+    mapLocations,
+    maxBoundsSouthWest,
+    maxBoundsNorthEast
   } = props;
   const [popupInfo, setPopupInfo] = useState(null);
 
   return (
     <>
       <Map
+        maxBounds={parseLatLngBoundsForMapbox(
+          maxBoundsSouthWest,
+          maxBoundsNorthEast
+        )}
         initialViewState={{
           longitude:
             !initialLong || isNaN(initialLong)

visualizations/nr-mapbox/nr1.json

@@ -121,6 +121,18 @@
       "description": "",
       "type": "number"
     },
+    {
+      "name": "maxBoundsSouthWest",
+      "title": "Max Bounds - Southwest corner eg. '35.5249, -124.6694' - Northeast config required, refresh to apply",
+      "description": "Restricts the view to the given geographical bounds, bouncing the user back if the user tries to pan outside the view",
+      "type": "string"
+    },
+    {
+      "name": "maxBoundsNorthEast",
+      "title": "Max Bounds - Northeast corner eg. '40.0249, -120.1694' - Southeast config required, refresh to apply",
+      "description": "Restricts the view to the given geographical bounds, bouncing the user back if the user tries to pan outside the view",
+      "type": "string"
+    },
     {
       "name": "defaultMarkerColor",
       "title": "Default Marker Color (refresh)",

visualizations/nr-mapbox/utils.js

@@ -203,3 +203,73 @@ export const confirmLatLng = (lat, lng) => {
 
   return false;
 };
+
+export const parseLatLngBounds = (southWestCorner, northEastCorner) => {
+  try {
+    // Split the input strings by comma to separate latitude and longitude
+    const swCoords = southWestCorner
+      .split(',')
+      .map(coord => parseFloat(coord.trim()));
+    const neCoords = northEastCorner
+      .split(',')
+      .map(coord => parseFloat(coord.trim()));
+
+    // Check if any of the parsing failed or if we didn't get exactly two numbers for each corner
+    if (
+      swCoords.length !== 2 ||
+      neCoords.length !== 2 ||
+      swCoords.some(isNaN) ||
+      neCoords.some(isNaN)
+    ) {
+      throw new Error(
+        'Parsing error: One of the inputs is not a valid lat,lng pair.'
+      );
+    }
+
+    // Return the parsed bounds
+    return [swCoords, neCoords];
+  } catch (error) {
+    // eslint-disable-next-line
+    console.log(error.message, southWestCorner, northEastCorner);
+    return undefined;
+  }
+};
+
+export const parseLatLngBoundsForMapbox = (
+  southWestCorner,
+  northEastCorner
+) => {
+  try {
+    // Split the input strings by comma to separate latitude and longitude
+    const swCoords = southWestCorner
+      .split(',')
+      .map(coord => parseFloat(coord.trim()));
+    const neCoords = northEastCorner
+      .split(',')
+      .map(coord => parseFloat(coord.trim()));
+
+    // Check if any of the parsing failed or if we didn't get exactly two numbers for each corner
+    if (
+      swCoords.length !== 2 ||
+      neCoords.length !== 2 ||
+      swCoords.some(isNaN) ||
+      neCoords.some(isNaN)
+    ) {
+      throw new Error(
+        'Parsing error: One of the inputs is not a valid lat,lng pair.'
+      );
+    }
+
+    // Convert to Mapbox bounds format: [[westLng, southLat], [eastLng, northLat]]
+    const mapboxBounds = [
+      [swCoords[1], swCoords[0]], // Southwest corner (longitude, latitude)
+      [neCoords[1], neCoords[0]] // Northeast corner (longitude, latitude)
+    ];
+
+    return mapboxBounds;
+  } catch (error) {
+    // eslint-disable-next-line
+    console.log(error.message, southWestCorner, northEastCorner);
+    return undefined;
+  }
+};