Merge pull request #673 from opentripplanner/fix-mobile-map

Fix mobile map

Author: binh-dam-ibigroup

Diff for: lib/actions/map.js

@@ -53,7 +53,10 @@ export function setMapCenter(map /* MapRef */, location, zoom) {
   return function () {
     const { lat, lon } = location
     if (map && !isNaN(lat) && !isNaN(lon)) {
-      map.jumpTo({ center: [lon, lat], zoom })
+      const center = [lon, lat]
+      // Note: passing an undefined zoom to map.jumpTo will trigger a "can't invert matrix" error.
+      const jumpParams = zoom !== undefined ? { center, zoom } : { center }
+      map.jumpTo(jumpParams)
     }
   }
 }

Diff for: lib/components/mobile/batch-results-screen.js

@@ -4,8 +4,9 @@ import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import { FormattedMessage } from 'react-intl'
 import { ListUl } from '@styled-icons/fa-solid/ListUl'
+import { useMap } from 'react-map-gl'
 import coreUtils from '@opentripplanner/core-utils'
-import React from 'react'
+import React, { useEffect } from 'react'
 import styled, { css } from 'styled-components'
 
 import * as uiActions from '../../actions/ui'
@@ -94,6 +95,12 @@ const BatchMobileResultsScreen = ({
     itineraryView === ItineraryView.LIST_HIDDEN
   const itineraryExpanded = itineraryView === ItineraryView.FULL
 
+  const { default: map } = useMap()
+  // Trigger map resize when the map expanded variable changes.
+  useEffect(() => {
+    if (map) map.resize()
+  }, [mapExpanded, map])
+
   return (
     <StyledMobileContainer>
       <ResultsHeader />
@@ -130,7 +137,7 @@ const BatchMobileResultsScreen = ({
 
 // connect to the redux store
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const activeSearch = getActiveSearch(state)
   const urlParams = coreUtils.query.getUrlParams()
   return {