add noWrap to TileLayer map

newrelic-experimental · Apr 9, 2024 · 7f757c5 · 7f757c5
1 parent f9ccc02
commit 7f757c5
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 21 deletions.
diff --git a/visualizations/store-map-viz/components/Map.tsx b/visualizations/store-map-viz/components/Map.tsx
@@ -3,7 +3,7 @@ import { Map, TileLayer } from "react-leaflet";
 
 import Markers from "./Markers";
 import Regions from "./Regions";
-import { useStoreMap } from "../context/StoreMapContext";
+import { useMap } from "../context/StoreMapContext";
 
 // there are some issues with the default zoom and center from the context
 // so just in case we'll set them here
@@ -25,10 +25,11 @@ L.Marker.prototype.options.icon = DefaultIcon;
 
 const MapView = () => {
   // get the zoom and center from the context (StoreMapContext.tsx)
-  const storeMap = useStoreMap();
+  const mapProps = useMap();
   // Handle null values explicitly
-  const zoom = storeMap.zoom !== null ? storeMap.zoom : DEFAULT_ZOOM;
-  const center = storeMap.center !== null ? storeMap.center : DEFAULT_CENTER;
+  const zoom = mapProps.zoom !== null ? mapProps.zoom : DEFAULT_ZOOM;
+  const center = mapProps.center !== null ? mapProps.center : DEFAULT_CENTER;
+  const noWrap = mapProps.noWrap;
 
   // use ref for the map to refresh it in Viz's config mode
   const mapRef = useRef(null);
@@ -51,6 +52,8 @@ const MapView = () => {
   return (
     <Map ref={mapRef} center={center} zoom={zoom} style={mapStyle}>
       <TileLayer
+        key={noWrap}
+        noWrap={noWrap}
         attribution='&copy; <a href="http://osm.org/copyright">Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL.'
         url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
       />

diff --git a/visualizations/store-map-viz/context/StoreMapContext.tsx b/visualizations/store-map-viz/context/StoreMapContext.tsx
@@ -11,28 +11,28 @@ import { DEFAULT_ZOOM, DEFAULT_CENTER } from "../constants";
 let centerPoints = DEFAULT_CENTER;
 
 // Define the shape of your context data
-interface StoreMapContextData {
+interface MapContextData {
   zoom: number;
   center: number[]; // Center is an array of two numbers (latitude and longitude)
 }
 
 // Extending the provider's props to include zoom and center
-interface StoreMapProviderProps {
+interface MapProviderProps {
   children: ReactNode;
   zoom?: number; // Zoom is optional
   center?: string; // Center is a string
+  noWrap?: boolean;
 }
 
 // Create the context
-const StoreMapContext = createContext<StoreMapContextData | undefined>(
-  undefined,
-);
+const MapContext = createContext<MapContextData | undefined>(undefined);
 
 // Modify the provider component to accept zoom and center as props
-export const StoreMapProvider: React.FC<StoreMapProviderProps> = ({
+export const MapProvider: React.FC<MapProviderProps> = ({
   children,
   zoom = DEFAULT_ZOOM,
   center,
+  noWrap = false,
 }) => {
   try {
     let centerParsed = JSON.parse(center);
@@ -58,21 +58,21 @@ export const StoreMapProvider: React.FC<StoreMapProviderProps> = ({
   }, [centerPoints.toString()]);
 
   return (
-    <StoreMapContext.Provider
-      value={{ zoom: currentZoom, center: currentCenter }}
+    <MapContext.Provider
+      value={{ zoom: currentZoom, center: currentCenter, noWrap }}
     >
       {children}
-    </StoreMapContext.Provider>
+    </MapContext.Provider>
   );
 };
 
 // Custom hook to use the context
-export const useStoreMap = () => {
-  const context = useContext(StoreMapContext);
+export const useMap = () => {
+  const context = useContext(MapContext);
   if (!context) {
     throw new Error("useStoreMap must be used within a StoreMapProvider");
   }
   return context;
 };
 
-export default StoreMapContext;
+export default MapContext;
diff --git a/visualizations/store-map-viz/hooks/useHeatmap.tsx b/visualizations/store-map-viz/hooks/useHeatmap.tsx
@@ -46,7 +46,7 @@ const useHeatmap = (): HeatmapHook => {
       let index = Math.floor(ratio * (gradientArray.length - 1));
       return gradientArray[index];
     },
-    [minValue, maxValue, gradientArray],
+    [minValue, maxValue, gradientArray]
   );
 
   useEffect(() => {

diff --git a/visualizations/store-map-viz/index.tsx b/visualizations/store-map-viz/index.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { PlatformStateContext, NerdletStateContext } from "nr1";
 
 import App from "./App";
-import { StoreMapProvider } from "./context/StoreMapContext";
+import { MapProvider } from "./context/StoreMapContext";
 import { VizPropsProvider } from "./context/VizPropsProvider";
 
 const Hours12 = "43200000";
@@ -27,7 +27,7 @@ const StoreMapVizVisualization = (props) => {
     setSwitchState(!switchState);
   };
 
-  const { zoom, centerLatLng } = props;
+  const { zoom, centerLatLng, noWrap } = props;
   const theCenter = centerLatLng ? `[${centerLatLng}]` : null;
 
   return (
@@ -38,7 +38,7 @@ const StoreMapVizVisualization = (props) => {
         {(platformContextState) => (
           <NerdletStateContext.Consumer>
             {(nerdletContextState) => (
-              <StoreMapProvider zoom={zoom} center={theCenter}>
+              <MapProvider zoom={zoom} center={theCenter} noWrap={noWrap}>
                 <VizPropsProvider {...props}>
                   <App
                     platformState={platformContextState}
@@ -48,7 +48,7 @@ const StoreMapVizVisualization = (props) => {
                     {...props}
                   />
                 </VizPropsProvider>
-              </StoreMapProvider>
+              </MapProvider>
             )}
           </NerdletStateContext.Consumer>
         )}

diff --git a/visualizations/store-map-viz/nr1.json b/visualizations/store-map-viz/nr1.json
@@ -293,6 +293,12 @@
         }
       ]
     },
+    {
+      "name": "noWrap",
+      "title": "Toggle map tile repetition",
+      "description": "Enable to prevent map tiles from repeating horizontally when panning, creating a bounded map experience.",
+      "type": "boolean"
+    },
     {
       "name": "centerLatLng",
       "title": "Center lat,lng",