Merge pull request #5177 from HSLdevcom/DT-6153

DT-6513 fix geojson zoom errors

app/component/RentalVehiclePageMapContainer.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { createFragmentContainer, graphql } from 'react-relay';
 import { FormattedMessage } from 'react-intl';
@@ -18,15 +17,6 @@ const RentalVehiclePageMapContainer = ({ rentalVehicle }) => {
   return <StopPageMap stop={rentalVehicle} stopName={stopName} scooter />;
 };
 
-RentalVehiclePageMapContainer.contextTypes = {
-  config: PropTypes.shape({
-    map: PropTypes.shape({
-      tileSize: PropTypes.number,
-      zoom: PropTypes.number,
-    }),
-  }),
-};
-
 RentalVehiclePageMapContainer.propTypes = {
   rentalVehicle: rentalVehicleShape,
 };

app/component/itinerary/ItineraryPage.js

@@ -115,6 +115,8 @@ const emptyState = {
 const emptyPlan = { plan: {}, loading: LOADSTATE.DONE };
 const unset = { plan: {}, loading: LOADSTATE.UNSET };
 
+const noFocus = { center: undefined, zoom: undefined, bounds: undefined };
+
 export default function ItineraryPage(props, context) {
   const headerRef = useRef(null);
   const mwtRef = useRef();
@@ -651,7 +653,7 @@ export default function ItineraryPage(props, context) {
       mobileRef.current.setBottomSheet(isEnabled ? 'bottom' : 'middle');
     }
     if (!isEnabled) {
-      setMapState({ center: undefined, zoom: undefined, bounds: undefined });
+      setMapState(noFocus);
       navigateMap();
       clearLatestNavigatorItinerary();
     }
@@ -802,7 +804,7 @@ export default function ItineraryPage(props, context) {
 
   useEffect(() => {
     navigateMap();
-    setMapState({ center: undefined, zoom: undefined, bounds: undefined });
+    setMapState(noFocus);
 
     if (detailView) {
       // If itinerary is not found in detail view, go back to summary view
@@ -813,6 +815,7 @@ export default function ItineraryPage(props, context) {
       // turn off tracking when user navigates away from tracking view
       setNavigation(false);
     }
+    setTimeout(() => mwtRef.current?.map?.updateZoom(), 1);
   }, [hash, secondHash]);
 
   useEffect(() => {
@@ -917,7 +920,8 @@ export default function ItineraryPage(props, context) {
         )
         .filter(a => a[0] && a[1]),
     );
-    setMapState({ bounds, center: undefined });
+    setMapState({ bounds, center: undefined, zoom: undefined });
+    setTimeout(() => mwtRef.current?.map?.updateZoom(), 1);
   };
 
   const changeHash = index => {

app/component/itinerary/OriginDestinationBar.js

@@ -159,7 +159,7 @@ class OriginDestinationBar extends React.Component {
             'Datasource',
             props.showFavourites ? 'Favourite' : '',
           ]}
-          targets={getLocationSearchTargets(config, false)}
+          targets={getLocationSearchTargets(config, props.isMobile)}
           lang={props.language}
           disableAutoFocus={props.isMobile}
           isMobile={props.isMobile}

app/component/map/ItineraryLine.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 
 import polyUtil from 'polyline-encoded';
 import React from 'react';
-import { intlShape } from 'react-intl';
 import { isBrowser } from '../../util/browser';
 import { getMiddleOf } from '../../util/geo-utils';
 import {
@@ -23,7 +22,6 @@ import SpeechBubble from './SpeechBubble';
 class ItineraryLine extends React.Component {
   static contextTypes = {
     config: configShape.isRequired,
-    intl: intlShape.isRequired,
   };
 
   static propTypes = {
@@ -73,7 +71,6 @@ class ItineraryLine extends React.Component {
         {
           mode: leg.mode,
           type: leg.route?.type,
-          gtfsId: leg.route?.gtfsId,
         },
         this.context.config,
       );

app/component/map/Map.js

@@ -141,9 +141,6 @@ export default class Map extends React.Component {
       startClient(this.context);
     }
     this.updateZoom();
-    if (this.props.mapRef) {
-      this.props.mapRef(this);
-    }
   }
 
   // eslint-disable-next-line camelcase

app/component/map/MapWithTracking.js

@@ -16,7 +16,6 @@ import { isBrowser } from '../../util/browser';
 import PositionStore from '../../store/PositionStore';
 import { mapLayerShape } from '../../store/MapLayerStore';
 import BubbleDialog from '../BubbleDialog';
-// eslint-disable-next-line import/no-named-as-default
 import PreferencesStore from '../../store/PreferencesStore';
 import MapLayersDialogContent from '../MapLayersDialogContent';
 import MenuDrawer from '../MenuDrawer';
@@ -280,6 +279,7 @@ class MapWithTrackingStateHandler extends React.Component {
       (!isEqual(this.oldBounds, this.props.bounds) || this.refresh)
     ) {
       this.naviProps.bounds = cloneDeep(this.props.bounds);
+      delete this.naviProps.zoom;
       if (this.refresh) {
         // bounds is defined by [min, max] point pair. Substract min lat a bit
         this.naviProps.bounds[0][0] -= 0.000001 * Math.random();

app/component/map/NearYouMap.js

@@ -141,6 +141,7 @@ function NearYouMap(
     position,
     showWalkRoute,
     prioritizedStopsNearYou,
+    setMWTRef,
     ...rest
   },
   { ...context },
@@ -153,6 +154,7 @@ function NearYouMap(
   const [walk, setWalk] = useState({ itinerary: null, stop: null });
   const prevPlace = useRef();
   const prevMode = useRef();
+  const mwtRef = useRef();
   const { mode } = match.params;
   const isTransitMode = mode !== 'CITYBIKE';
   const walkRoutingThreshold =
@@ -209,6 +211,15 @@ function NearYouMap(
     }
   };
 
+  // get ref to MapWithTracking.js
+  const setMWTRefNearYou = ref => {
+    mwtRef.current = ref;
+    if (setMWTRef) {
+      // forward to parent component
+      setMWTRef(ref);
+    }
+  };
+
   useEffect(() => {
     prevPlace.current = match.params.place;
     prevMode.current = match.params.mode;
@@ -221,6 +232,7 @@ function NearYouMap(
     const newBounds = handleBounds(position, sortedStopEdges);
     if (newBounds.length > 0) {
       setBounds(newBounds);
+      setTimeout(() => mwtRef.current?.map.updateZoom(), 1);
     }
   }, [position, sortedStopEdges]);
 
@@ -395,6 +407,7 @@ function NearYouMap(
     bounds,
     leafletObjs,
     breakpoint,
+    setMWTRef: setMWTRefNearYou,
     ...rest,
   };
 
@@ -436,13 +449,15 @@ NearYouMap.propTypes = {
   relay: relayShape.isRequired,
   loading: PropTypes.bool,
   showWalkRoute: PropTypes.bool,
+  setMWTRef: PropTypes.func,
 };
 
 NearYouMap.defaultProps = {
   stopsNearYou: null,
   showWalkRoute: false,
   loading: false,
   favouriteIds: undefined,
+  setMWTRef: undefined,
   prioritizedStopsNearYou: [],
 };
 

app/component/map/WalkQuery.js

@@ -100,21 +100,12 @@ const walkQuery = graphql`
                 platformCode
               }
             }
-            trip {
-              stoptimes {
-                stop {
-                  gtfsId
-                }
-                pickupType
-              }
-            }
             intermediatePlaces {
               stop {
                 gtfsId
                 lat
                 lon
                 name
-                code
                 platformCode
               }
             }

app/component/stop/StopPageMapContainer.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { createFragmentContainer, graphql } from 'react-relay';
-import { configShape } from '../../util/shapes';
 import StopPageMap from '../map/StopPageMap';
 
 function StopPageMapContainer({ stop }) {
@@ -12,10 +11,6 @@ function StopPageMapContainer({ stop }) {
   return <StopPageMap stop={stop} />;
 }
 
-StopPageMapContainer.contextTypes = {
-  config: configShape.isRequired,
-};
-
 StopPageMapContainer.propTypes = {
   stop: PropTypes.shape({
     lat: PropTypes.number.isRequired,

sass/themes/default/_theme.scss

@@ -28,7 +28,6 @@ $background-color-lighter: #f4f4f5;
 $primary-color: $livi-blue;
 $primary-font-color: $white;
 $secondary-color: #008bde;
-$secondary-font-color: $white;
 $favourite-color: $livi-gold;
 $hilight-color: $livi-blue;
 $action-color: $secondary-color;
@@ -38,7 +37,6 @@ $cancelation-background: #fbe0ea;
 $disruption-color: $cancelation-red;
 $banner-disruption-color: $disruption-color;
 $realtime-color: #3b7f00;
-$visited-link-color: #8c4799;
 $current-location-color: $primary-color;
 $desktop-title-color: $primary-color;
 $desktop-title-arrow-icon-color: $secondary-color;