add GeoJSONOverlay

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)

lib/components/map/default-map.tsx

@@ -23,6 +23,7 @@
 
 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'
@@ -70,7 +71,7 @@
 /**
  * Determines the localized name of a map layer by its type.
  */
 function getLayerName(overlay, config, intl) {
   const { companies, name, type } = overlay
 
   // HACK: Support for street/satellite configs that use the name.
@@ -156,7 +157,7 @@
    * as that UI mode sets the access mode and company in the query params.
    * TODO: Implement for the batch interface.
    */
   _handleQueryChange = (oldQuery, newQuery) => {
     const { overlays = [] } = this.props.mapConfig || {}
     if (oldQuery.mode) {
       // Determine any added/removed modes
@@ -324,6 +325,10 @@
               name: getLayerName(overlayConfig, config, intl)
             }
             switch (overlayConfig.type) {
+              case 'geojson':
+                return (
+                  <GeoJsonLayer {...namedLayerProps} url={overlayConfig.url} />
+                )
               case 'bike-rental':
                 return (
                   <VehicleRentalOverlay