From 819e5d2009e602e2a94c51adc6cb9bbd7659620d Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 30 Nov 2023 09:39:08 -0500
Subject: [PATCH 1/3] add GeoJSONOverlay

---
 lib/components/map/connected-geojson-layer.js | 79 +++++++++++++++++++
 lib/components/map/default-map.tsx            |  5 ++
 2 files changed, 84 insertions(+)
 create mode 100644 lib/components/map/connected-geojson-layer.js

diff --git a/lib/components/map/connected-geojson-layer.js b/lib/components/map/connected-geojson-layer.js
new file mode 100644
index 000000000..bb11daf2e
--- /dev/null
+++ b/lib/components/map/connected-geojson-layer.js
@@ -0,0 +1,79 @@
+import {
+  Styled as BaseMapStyled,
+  MarkerWithPopup
+} from '@opentripplanner/base-map'
+import { connect } from 'react-redux'
+import FromToLocationPicker from '@opentripplanner/from-to-location-picker'
+import React, { useEffect, useState } from 'react'
+
+import { setLocation } from '../../actions/map'
+
+const GeoJSONOverlay = (props) => {
+  const { setLocation, url } = props
+
+  const [locations, setLocations] = useState([])
+  useEffect(() => {
+    async function downloadLocations() {
+      const json = await (await fetch(url)).json()
+      setLocations(json)
+    }
+    if (url) downloadLocations()
+  }, [])
+
+  return (
+    <>
+      {locations?.features?.map((feature, k) => {
+        const { geometry, properties } = feature
+        if (!geometry || !geometry.coordinates) return null
+        return (
+          <MarkerWithPopup
+            key={k}
+            popupContents={
+              <BaseMapStyled.MapOverlayPopup>
+                {properties.Name && (
+                  <BaseMapStyled.PopupTitle>
+                    {properties.Name}
+                  </BaseMapStyled.PopupTitle>
+                )}
+                <BaseMapStyled.PopupRow>
+                  {properties.popupContent && (
+                    <div>{properties.popupContent}</div>
+                  )}
+                  {properties.Address && (
+                    <div>
+                      {properties.Address}, {properties.Zip}, {properties.City},{' '}
+                      {properties.State}
+                    </div>
+                  )}
+                  {properties.Phone && <div>{properties.Phone}</div>}
+                  <FromToLocationPicker
+                    label
+                    location={{
+                      lat: geometry.coordinates[1],
+                      lon: geometry.coordinates[0],
+                      name: properties.Name
+                    }}
+                    setLocation={setLocation}
+                  />
+                </BaseMapStyled.PopupRow>
+              </BaseMapStyled.MapOverlayPopup>
+            }
+            popupProps={{ offset: 10 }}
+            position={[geometry.coordinates[1], geometry.coordinates[0]]}
+          >
+            <img
+              alt={properties.Name}
+              src={properties.icon}
+              style={{ height: 40 }}
+            />
+          </MarkerWithPopup>
+        )
+      })}
+    </>
+  )
+}
+const mapDispatchToProps = {
+  setLocation
+}
+
+export default connect(null, mapDispatchToProps)(GeoJSONOverlay)
diff --git a/lib/components/map/default-map.tsx b/lib/components/map/default-map.tsx
index 265a5fd50..04f20dd25 100644
--- a/lib/components/map/default-map.tsx
+++ b/lib/components/map/default-map.tsx
@@ -23,6 +23,7 @@ import { updateOverlayVisibility } from '../../actions/config'
 
 import ElevationPointMarker from './elevation-point-marker'
 import EndpointsOverlay from './connected-endpoints-overlay'
+import GeoJsonLayer from './connected-geojson-layer'
 import ParkAndRideOverlay from './connected-park-and-ride-overlay'
 import PointPopup from './point-popup'
 import RoutePreviewOverlay from './route-preview-overlay'
@@ -324,6 +325,10 @@ class DefaultMap extends Component {
               name: getLayerName(overlayConfig, config, intl)
             }
             switch (overlayConfig.type) {
+              case 'geojson':
+                return (
+                  <GeoJsonLayer {...namedLayerProps} url={overlayConfig.url} />
+                )
               case 'bike-rental':
                 return (
                   <VehicleRentalOverlay

From 2e5b2072775b7a9187d6a22364db91b050d661ea Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 6 Dec 2023 09:51:35 -0500
Subject: [PATCH 2/3] address pr feedback

---
 ...son-layer.js => connected-geojson-layer.tsx} | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)
 rename lib/components/map/{connected-geojson-layer.js => connected-geojson-layer.tsx} (86%)

diff --git a/lib/components/map/connected-geojson-layer.js b/lib/components/map/connected-geojson-layer.tsx
similarity index 86%
rename from lib/components/map/connected-geojson-layer.js
rename to lib/components/map/connected-geojson-layer.tsx
index bb11daf2e..4595ebbdc 100644
--- a/lib/components/map/connected-geojson-layer.js
+++ b/lib/components/map/connected-geojson-layer.tsx
@@ -7,8 +7,13 @@ import FromToLocationPicker from '@opentripplanner/from-to-location-picker'
 import React, { useEffect, useState } from 'react'
 
 import { setLocation } from '../../actions/map'
+import { SetLocationHandler } from '../util/types'
 
-const GeoJSONOverlay = (props) => {
+type Props = {
+  setLocation: SetLocationHandler
+  url: string
+}
+const GeoJSONOverlay = (props: Props) => {
   const { setLocation, url } = props
 
   const [locations, setLocations] = useState([])
@@ -18,10 +23,11 @@ const GeoJSONOverlay = (props) => {
       setLocations(json)
     }
     if (url) downloadLocations()
-  }, [])
+  }, [url])
 
   return (
     <>
+      {/* @ts-expect-error TODO: geojson types */}
       {locations?.features?.map((feature, k) => {
         const { geometry, properties } = feature
         if (!geometry || !geometry.coordinates) return null
@@ -58,14 +64,11 @@ const GeoJSONOverlay = (props) => {
                 </BaseMapStyled.PopupRow>
               </BaseMapStyled.MapOverlayPopup>
             }
+            // @ts-expect-error popup props are incorrect
             popupProps={{ offset: 10 }}
             position={[geometry.coordinates[1], geometry.coordinates[0]]}
           >
-            <img
-              alt={properties.Name}
-              src={properties.icon}
-              style={{ height: 40 }}
-            />
+            <img alt={properties.Name} src={properties.icon} />
           </MarkerWithPopup>
         )
       })}

From b3462fd549f11b875c029635f5ac99b7453ef28c Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 8 Dec 2023 10:03:19 -0500
Subject: [PATCH 3/3] address pr feedback

---
 lib/components/map/connected-geojson-layer.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/lib/components/map/connected-geojson-layer.tsx b/lib/components/map/connected-geojson-layer.tsx
index 4595ebbdc..8adc0d06b 100644
--- a/lib/components/map/connected-geojson-layer.tsx
+++ b/lib/components/map/connected-geojson-layer.tsx
@@ -6,7 +6,7 @@ import { connect } from 'react-redux'
 import FromToLocationPicker from '@opentripplanner/from-to-location-picker'
 import React, { useEffect, useState } from 'react'
 
-import { setLocation } from '../../actions/map'
+import * as mapActions from '../../actions/map'
 import { SetLocationHandler } from '../util/types'
 
 type Props = {
@@ -68,7 +68,11 @@ const GeoJSONOverlay = (props: Props) => {
             popupProps={{ offset: 10 }}
             position={[geometry.coordinates[1], geometry.coordinates[0]]}
           >
-            <img alt={properties.Name} src={properties.icon} />
+            <img
+              alt={properties.Name}
+              className={properties.className}
+              src={properties.icon}
+            />
           </MarkerWithPopup>
         )
       })}
@@ -76,7 +80,7 @@ const GeoJSONOverlay = (props: Props) => {
   )
 }
 const mapDispatchToProps = {
-  setLocation
+  setLocation: mapActions.setLocation
 }
 
 export default connect(null, mapDispatchToProps)(GeoJSONOverlay)