From cee4faa7fc96ab0cb51c99866a7ad808b434c6c6 Mon Sep 17 00:00:00 2001
From: jbyrne <jimmy.byrne@jpl.nasa.gov>
Date: Mon, 12 Aug 2024 13:49:48 -0700
Subject: [PATCH 1/2] feature/swodlr-ui-76: add basemap with borders

---
 src/components/map/WorldMap.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/map/WorldMap.tsx b/src/components/map/WorldMap.tsx
index afe3618..1535204 100644
--- a/src/components/map/WorldMap.tsx
+++ b/src/components/map/WorldMap.tsx
@@ -16,6 +16,9 @@ import { useLocation, useSearchParams } from 'react-router-dom';
 import { useEffect } from 'react';
 import { getGranules, getSpatialSearchGranuleVariables } from '../../constants/graphqlQueries';
 
+const REACT_APP_MAPBOX_STYLE = process.env.REACT_APP_MAPBOX_STYLE;
+const REACT_APP_MAPBOX_ACCESS_TOKEN = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;
+
 let DefaultIcon = L.icon({
     iconUrl: icon,
     shadowUrl: iconShadow
@@ -214,7 +217,7 @@ const WorldMap = () => {
           }
           <div style={{float:'right', width:'49%', height:'100%'}} id='map-tutorial-target'/>
           <TileLayer
-            url='https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
+            url={`https://api.mapbox.com/styles/v1/${REACT_APP_MAPBOX_STYLE}/tiles/256/{z}/{x}/{y}@2x?access_token=${REACT_APP_MAPBOX_ACCESS_TOKEN}`}
             attribution='Esri, Maxar, Earthstar Geographics, and the GIS User Community'
             maxZoom = {18}
             noWrap

From aa15ae7539d2f9f8f22516e6aeaaa2c1d3f449b9 Mon Sep 17 00:00:00 2001
From: jbyrne <jimmy.byrne@jpl.nasa.gov>
Date: Mon, 12 Aug 2024 14:09:14 -0700
Subject: [PATCH 2/2] feature/swodlr-ui-76: add attribution

---
 src/components/map/WorldMap.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/map/WorldMap.tsx b/src/components/map/WorldMap.tsx
index 1535204..350acd2 100644
--- a/src/components/map/WorldMap.tsx
+++ b/src/components/map/WorldMap.tsx
@@ -218,7 +218,7 @@ const WorldMap = () => {
           <div style={{float:'right', width:'49%', height:'100%'}} id='map-tutorial-target'/>
           <TileLayer
             url={`https://api.mapbox.com/styles/v1/${REACT_APP_MAPBOX_STYLE}/tiles/256/{z}/{x}/{y}@2x?access_token=${REACT_APP_MAPBOX_ACCESS_TOKEN}`}
-            attribution='Esri, Maxar, Earthstar Geographics, and the GIS User Community'
+            attribution='© Mapbox, © OpenStreetMap'
             maxZoom = {18}
             noWrap
             bounds={