fix: Fix initial map position

src/MapView/MapView.stories.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 // @flow
 import React from 'react'
 import { action } from '@storybook/addon-actions'
@@ -13,12 +14,11 @@ function getMediaUrl(id, size) {
 }
 
 export default {
-  title: 'MapView',
-  decorators: [withKnobs]
+  title: 'MapView'
 }
 
 const filters = {
-  All: [],
+  All: null,
   Mining: ['all', ['in', '$preset', 'mining']],
   Fishing: ['all', ['in', '$preset', 'fishing']]
 }
@@ -34,6 +34,7 @@ export const defaultStory = () => {
   return (
     <div style={{ width: '100vw', height: '100vh', display: 'flex' }}>
       <MapView
+        value={value}
         observations={fixtureObs}
         filter={filters[value]}
         onUpdateObservation={action('update')}
@@ -45,5 +46,32 @@ export const defaultStory = () => {
 }
 
 defaultStory.story = {
-  name: 'default'
+  name: 'default',
+  decorators: [withKnobs]
+}
+
+export const delayedLoad = () => {
+  const [obs, setObs] = React.useState()
+
+  React.useEffect(() => {
+    let timeoutId = setTimeout(() => {
+      setObs(fixtureObs)
+      timeoutId = setTimeout(() => {
+        console.log('changing obs')
+        setObs(fixtureObs.slice(50))
+      }, 5000)
+    }, 200)
+    return () => clearTimeout(timeoutId)
+  }, [])
+
+  return (
+    <div style={{ width: '100vw', height: '100vh', display: 'flex' }}>
+      <MapView
+        observations={obs}
+        onUpdateObservation={action('update')}
+        getMediaUrl={getMediaUrl}
+        mapboxAccessToken="pk.eyJ1IjoiZ21hY2xlbm5hbiIsImEiOiJSaWVtd2lRIn0.ASYMZE2HhwkAw4Vt7SavEg"
+      />
+    </div>
+  )
 }

src/MapView/MapViewContent.js

@@ -4,6 +4,7 @@ import React, {
   useMemo,
   useCallback,
   useRef,
+  useEffect,
   useImperativeHandle
 } from 'react'
 import { useIntl, IntlProvider } from 'react-intl'
@@ -85,6 +86,8 @@ const MapViewContent = (
   const classes = useStyles()
   const intl = useIntl()
   const [hovered, setHovered] = useState<?Observation>(null)
+  const [styleLoaded, setStyleLoaded] = useState(false)
+  console.log(observations.length)
 
   useImperativeHandle(ref, () => ({
     fitBounds: (...args: any) => {
@@ -109,6 +112,27 @@ const MapViewContent = (
     []
   )
 
+  useEffect(() => {
+    if (
+      !map.current ||
+      !observations ||
+      !observations.length ||
+      map.current.__hasMoved
+    )
+      return
+    map.current.__hasMoved = true
+    const bounds = getBounds(observations)
+    map.current.flyTo({
+      center: [
+        bounds[0][0] + (bounds[1][0] - bounds[0][0]) / 2,
+        bounds[0][1] + (bounds[1][1] - bounds[0][1]) / 2
+      ],
+      zoom: 9,
+      bearing: 0,
+      pitch: 0
+    })
+  }, [observations, styleLoaded])
+
   // We don't allow the map to be a controlled component - position can only be
   // set when the map is initially mounted and after that state is internal
   const position = useMemo(() => {
@@ -119,10 +143,10 @@ const MapViewContent = (
     // we set some default values
     return {
       center: center || [
-        (bounds[1][0] - bounds[0][0]) / 2,
-        (bounds[1][1] - bounds[0][1]) / 2
+        bounds[0][0] + (bounds[1][0] - bounds[0][0]) / 2,
+        bounds[0][1] + (bounds[1][1] - bounds[0][1]) / 2
       ],
-      zoom: zoom ? [zoom] : [12],
+      zoom: zoom ? [zoom] : [9],
       bearing: bearing ? [bearing] : [0],
       pitch: pitch ? [pitch] : [0]
     }
@@ -144,14 +168,15 @@ const MapViewContent = (
   )
 
   const handleStyleLoad = useCallback(mapInstance => {
-    mapInstance.addControl(new mapboxgl.NavigationControl({}))
-    mapInstance.addControl(new mapboxgl.ScaleControl({}))
+    mapInstance.addControl(new mapboxgl.NavigationControl())
+    mapInstance.addControl(new mapboxgl.ScaleControl())
     mapInstance.addControl(
       new mapboxgl.AttributionControl({
         compact: true
       })
     )
     map.current = mapInstance
+    setStyleLoaded(true)
   }, [])
 
   const handleMouseMove = useCallback(

src/ViewWrapper.js

@@ -76,7 +76,6 @@ const WrappedMapView = ({
 
   const getPresetWithFallback = React.useCallback(
     (observation: Observation): PresetWithAdditionalFields => {
-      console.log('presets', presets)
       const preset = getPreset(observation, presets)
       const defaultPreset = defaultGetPreset(observation, stats)
       if (!preset) return defaultPreset
@@ -157,7 +156,5 @@ function getPreset(
   const tags = observation.tags
   if (!tags || !tags.categoryId) return
   const preset = presets.find(preset => preset.id === tags.categoryId)
-  if (preset) console.log(preset)
-  else console.log(tags, presets)
   return preset
 }