fix(loading): Refactor map loading

src/components/map.js

@@ -20,26 +20,22 @@ const containerStyle = {height: '100%', width: '100%'}
 const startMarkerProps = {color: darkBlue}
 const endMarkerProps = {color: colors[1].hex}
 
-const renderCount = 0
-
 export default function Map (p) {
   const [mapRef, map] = useMap(p, {
-    onClick: position => p.start
-      ? p.updateEnd({position})
-      : p.updateStart({position}),
+    onClick: d => p.start ? p.updateEnd(d) : p.updateStart(d),
     onMove: center => p.updateMap({center}),
     onZoom: zoom => p.updateMap({zoom})
   })
 
   useMarker(startMarkerProps, map, get(p, 'start.position'), {
     onDragEnd: position => p.updateStart({position})
   })
-  useMarker({...endMarkerProps, size: 0.5}, map, get(p, 'end.position'), {
+  useMarker(endMarkerProps, map, get(p, 'end.position'), {
     onDragEnd: position => p.updateEnd({position})
   })
   useIsochrones(map, p.isochrones)
   useGeoJSONRoutes(map, p.networkGeoJSONRoutes)
-  usePointsOfInterest(map, p.pointsOfInterest, p.updateStart)
+  usePointsOfInterest(map, p.pointsOfInterest)
 
   return <div ref={mapRef} style={containerStyle} />
 }

src/constants.js

@@ -1,6 +1,8 @@
 export const ACCESSIBILITY_IS_EMPTY = 'accessibility-is-empty'
 export const ACCESSIBILITY_IS_LOADING = 'accessibility-is-loading'
 
+export const POI_ID = 'taui-points-of-interest-layer'
+
 // URLS
 export const MAPBOX_GEOCODING_URL =
   'https://api.mapbox.com/geocoding/v5/mapbox.places'

src/hooks/use-geojson-routes.js

@@ -6,15 +6,15 @@ const EmptyCollection = {type: 'FeatureCollection', features: []}
 const getId = i => `route-for-${i}`
 
 export default function useGeoJSONRoutes (map, allRoutes) {
+  useOnLoad(initializeGeoJSONRoutes, map, [allRoutes])
+
   React.useEffect(() => {
     if (!map) return
     allRoutes.forEach((routes, i) => {
       const source = map.getSource(getId(i))
       if (source) source.setData(routes[0] || EmptyCollection)
     })
   }, [map, allRoutes])
-
-  useOnLoad(() => initializeGeoJSONRoutes(map, allRoutes), map)
 }
 
 function initializeGeoJSONRoutes (map, allRoutes) {

src/hooks/use-isochrones.js

@@ -6,41 +6,43 @@ import useOnLoad from './use-on-load'
 const EmptyCollection = {type: 'FeatureCollection', features: []}
 const getId = i => `isochrone-${i}`
 
+/**
+ * Reverse to add the top layer first so that we can insert subsequent
+ * layers beneath. Use consistently for ID purposes.
+ */
 export default function useIsochrones (map, isochrones) {
-  // Reverse to add the top layer first so that we can insert subsequent
-  // layers beneath. Use consistently for ID purposes.
-  const forEachIso = fn => reverse(isochrones).forEach(fn)
+  useOnLoad(initializeIsochrones, map, [isochrones])
 
   React.useEffect(() => {
     if (!map) return
 
-    forEachIso((isochrone, i) => {
+    reverse(isochrones).forEach((isochrone, i) => {
       const source = map.getSource(getId(i))
       if (source) source.setData(isochrone || EmptyCollection)
     })
   }, [map, isochrones])
+}
 
-  useOnLoad(() => {
-    forEachIso((isochrone, i) => {
-      const id = `isochrone-${i}`
-      const data = isochrone || EmptyCollection
-
-      map.addSource(id, {type: 'geojson', data})
-
-      const beforeLayer = i === 0
-        ? 'waterway'
-        : `isochrone-${i - 1}`
-
-      // Fill the base layer
-      map.addLayer({
-        id,
-        source: id,
-        type: 'fill',
-        paint: {
-          'fill-color': ['get', 'color'],
-          'fill-opacity': ['get', 'opacity']
-        }
-      }, beforeLayer)
-    })
-  }, map)
+function initializeIsochrones (map, isochrones) {
+  reverse(isochrones).forEach((isochrone, i) => {
+    const id = `isochrone-${i}`
+    const data = isochrone || EmptyCollection
+
+    map.addSource(id, {type: 'geojson', data})
+
+    const beforeLayer = i === 0
+      ? 'waterway'
+      : `isochrone-${i - 1}`
+
+    // Fill the base layer
+    map.addLayer({
+      id,
+      source: id,
+      type: 'fill',
+      paint: {
+        'fill-color': ['get', 'color'],
+        'fill-opacity': ['get', 'opacity']
+      }
+    }, beforeLayer)
+  })
 }

src/hooks/use-map.js

@@ -2,6 +2,8 @@ import lonlat from '@conveyal/lonlat'
 import mapboxgl from 'mapbox-gl'
 import React from 'react'
 
+import {POI_ID} from '../constants'
+
 // Default NavigationControl
 const navControl = new mapboxgl.NavigationControl({showCompass: false})
 
@@ -24,7 +26,19 @@ export default function useMap (mapProps, events) {
     })
 
     m.on('load', () => m.addControl(navControl, 'top-right'))
-    m.on('click', e => events.onClick(lonlat(e.lngLat)))
+    m.on('click', e => {
+      const bbox = [[e.point.x - 5, e.point.y - 5], [e.point.x + 5, e.point.y + 5]]
+      const pois = m.queryRenderedFeatures(bbox, {layers: [POI_ID]})
+      if (pois.length > 0) {
+        const poi = pois[0]
+        events.onClick({
+          label: poi.properties.label,
+          position: lonlat(poi.geometry.coordinates)
+        })
+      } else {
+        events.onClick({position: lonlat(e.lngLat)})
+      }
+    })
     m.on('moveend', () => events.onMove(lonlat(m.getCenter())))
     m.on('zoomend', () => events.onZoom(m.getZoom()))
 

src/hooks/use-on-load.js

@@ -3,10 +3,17 @@ import React from 'react'
 /**
  * Watch a value for a `load` event.
  */
-export default function useOnLoad (effect, emitter) {
+export default function useOnLoad (effect, emitter, watch = []) {
   return React.useEffect(() => {
     if (!emitter) return
-    emitter.on('load', effect)
-    return () => emitter.off('load', effect)
-  }, [emitter])
+
+    function onLoad () {
+      effect(emitter, ...watch)
+    }
+
+    emitter.on('load', onLoad)
+    return () => {
+      emitter.off('load', onLoad)
+    }
+  }, [emitter, ...watch])
 }

src/hooks/use-points-of-interest.js

@@ -1,14 +1,14 @@
-import lonlat from '@conveyal/lonlat'
 import mapboxgl from 'mapbox-gl'
 import React from 'react'
 
+import {POI_ID as ID} from '../constants'
+
 import useOnLoad from './use-on-load'
 
 const EmptyCollection = {type: 'FeatureCollection', features: []}
-const ID = 'taui-points-of-interest'
 
-export default function usePointsOfInterest (map, poi, onClick) {
-  useOnLoad(() => initializePoi(map, poi), map)
+export default function usePointsOfInterest (map, poi) {
+  useOnLoad(initializePoi, map, [poi])
 
   React.useEffect(() => {
     if (!map) return