Fixed map not showing children (#953)

src/components/area/areaMap.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { Map, Marker, ScaleControl, LngLatBoundsLike, MapboxMap } from 'react-map-gl'
 import { AreaType } from '../../js/types'
 import { MAP_STYLES } from '../maps/BaseMap'
+import { Padding } from '@math.gl/web-mercator/dist/fit-bounds'
 
 interface Mappable {
   id: string
@@ -20,14 +21,15 @@ interface AreaMapProps {
 }
 
 /** get the bounds needed to display this map */
-function getBounds (areas: Mappable[]): [[number, number], [number, number]] | null {
-  if (areas.length > 0) {
-    const initlat = areas[0].metadata.lat
-    const initlng = areas[0].metadata.lng
-    let [minLat, maxLat] = [initlat, initlat]
-    let [minLon, maxLon] = [initlng, initlng]
+function getBounds (area: AreaType): [[number, number], [number, number]] {
+  const initlat = area.metadata.lat
+  const initlng = area.metadata.lng
 
-    areas.forEach((area) => {
+  let [minLat, maxLat] = [initlat, initlat]
+  let [minLon, maxLon] = [initlng, initlng]
+
+  if (area.children.length > 0) {
+    area.children.forEach((area) => {
       const { lat, lng } = area.metadata
       if (lat > maxLat) { maxLat = lat } else if (lng > maxLon) {
         maxLon = lng
@@ -36,61 +38,43 @@ function getBounds (areas: Mappable[]): [[number, number], [number, number]] | n
         minLon = lng
       }
     })
-
-    return [
-      [minLon, minLat], // SouthWest corner
-      [maxLon, maxLat]] // northeastern corner of the bounds
   }
-  // No bounds
-  return null
+
+  return [
+    [minLon, minLat], // SouthWest corner
+    [maxLon, maxLat]] // northeastern corner of the bounds
 }
 
-function computeVS (subAreas: Mappable[]): LngLatBoundsLike | null {
-  return getBounds(subAreas)
+function computeVS (area: AreaType): LngLatBoundsLike {
+  return getBounds(area)
 }
 
 export default function AreaMap (props: AreaMapProps): JSX.Element {
   const mapRef = React.useRef(null)
-  const padding = { top: 45, left: 45, bottom: 45, right: 45 }
-  const [viewState, setVs] =
-    React.useState({ bounds: computeVS(props.subAreas), padding })
+  const padding: Padding = { top: 45, left: 45, bottom: 45, right: 45 }
 
   React.useEffect(() => {
     // re-compute bounds whenever the area changes
     if (mapRef.current !== null) {
       const map: MapboxMap = (mapRef.current as any)
-
-      const bounds = computeVS(props.subAreas)
-
-      if (bounds !== null && props.subAreas.length > 1) {
-        map.fitBounds(bounds, { padding })
-      } else {
-        // maintains safety for cases where bounds aren't useful.
-        map.flyTo({
-          center: [props.area.metadata.lng, props.area.metadata.lat],
-          zoom: 10
-        })
-      }
+      const bounds = computeVS(props.area)
+      map.fitBounds(bounds, { padding })
     }
   }, [props.area.id])
 
   return (
     <div className='w-full h-full'>
       <Map
-        {...{ ...viewState, padding }}
-        onMove={({ viewState }) => setVs(viewState as any)}
         ref={mapRef}
         id='areaHeatmap2'
+        initialViewState={{
+          bounds: computeVS(props.area),
+          fitBoundsOptions: { padding }
+        }}
         reuseMaps
         mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_KEY}
         mapStyle={MAP_STYLES.dark}
       >
-        <Marker longitude={props.area.metadata.lng} latitude={props.area.metadata.lat} anchor='bottom'>
-          <div className='text-xl font-bold'>
-            {props.area.areaName}
-          </div>
-        </Marker>
-
         {props.subAreas.map(subArea => (
           <Marker
             style={{ zIndex: subArea.id === props.focused ? 100 : 0 }}
@@ -107,6 +91,12 @@ export default function AreaMap (props: AreaMapProps): JSX.Element {
             </div>
           </Marker>))}
 
+        <Marker style={{ zIndex: 1 }} longitude={props.area.metadata.lng} latitude={props.area.metadata.lat} anchor='bottom'>
+          <div className='rounded shadow transition text-md px-1 font-bold bg-violet-500 text-white scale-125 z-index-1'>
+            {props.area.areaName}
+          </div>
+        </Marker>
+
         <ScaleControl />
       </Map>
     </div>

src/js/graphql/gql/areaById.ts

@@ -97,6 +97,8 @@ export const QUERY_AREA_BY_ID = gql`
           leaf
           isBoulder
           leftRightIndex
+          lat
+          lng
         }
         children {
           uuid

src/pages/crag/[id].tsx

@@ -56,7 +56,7 @@ const Body = ({ area, history }: CragProps): JSX.Element => {
           <AreaMap
             focused={null}
             selected={area.id}
-            subAreas={[{ ...area }]}
+            subAreas={area.children}
             area={area}
           />
         </div>}