Merge pull request #1121 from data-for-change/revert-1113-feat-modify…

…-map-zoom-in-search-and-location-approval-1110

Revert "Modify map zoom in search button"

.env

@@ -10,7 +10,7 @@ REACT_APP_AUTH_PROD_URL=https://www.anyway.co.il/
 REACT_APP_SHOW_META_TAGS=true
 
 # Default zoom
-REACT_APP_DEFAULT_MAP_ZOOM=14
+REACT_APP_DEFAULT_MAP_ZOOM=13
 
 # Should demo card be visible
 REACT_APP_SHOW_DEMO_CARDS=false

src/components/molecules/Header.tsx

@@ -36,7 +36,6 @@ const Header: FC = () => {
   const { userStore, settingsStore } = store;
 
   const [open, setOpen] = useState(false);
-  const [zoomLevel] = useState(parseInt(process.env.REACT_APP_DEFAULT_MAP_ZOOM!));
 
   const isUserDetailsRequired: boolean = !userStore.userInfo?.meta.isCompleteRegistration;
   const roadSegmentLocation = store.gpsLocationData;
@@ -114,8 +113,6 @@ const Header: FC = () => {
         }}
         onSearch={onLocationSearch}
         onStreetAndCitySearch={onStreetAndCitySearch}
-        zoom={zoomLevel}
-
       />
     </AppBar>
   );

src/components/molecules/MapDialog.tsx

@@ -2,12 +2,11 @@ import { FC, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import { Box } from '@material-ui/core';
-import { Dialog, Typography } from 'components/atoms';
+import { Dialog , Typography } from 'components/atoms';
 import { IPoint } from 'models/Point';
 import { useStore } from 'store/storeConfig';
 import SearchCityAndStreetScreen from 'components/molecules/SearchCityAndStreetScreen';
 import SearchSegmentScreen from 'components/molecules/SearchSegmentScreen';
-import Map from 'components/molecules/map/Map'
 
 interface IProps {
   section?: string;
@@ -17,7 +16,6 @@ interface IProps {
   onLocationChange: (location: IPoint) => void;
   onSearch: () => void;
   onStreetAndCitySearch: (street?: string, city?: string) => void;
-  zoom: number;
 }
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -66,7 +64,6 @@ const MapDialog: FC<IProps> = ({
   onLocationChange,
   onSearch,
   onStreetAndCitySearch,
-  zoom,
 }) => {
   const classes = useStyles();
   const { t } = useTranslation();
@@ -78,8 +75,8 @@ const MapDialog: FC<IProps> = ({
     store.fetchCitiesList();
   }, [store]);
 
-  // the code I deleted should be here...
-  // SearchCityAndStreetScreen()
+// the code I deleted should be here...
+// SearchCityAndStreetScreen()
 
   return (
     <Dialog isShowing={open} onClose={onClose} maxWidth="lg" fullWidth>
@@ -98,10 +95,9 @@ const MapDialog: FC<IProps> = ({
             <Typography.Title1>{t('mapDialog.searchStreetAndCity')}</Typography.Title1>
           </Box>
         </Box>
-        {searchScreen === 'segment' && <SearchSegmentScreen onLocationChange={onLocationChange} roadNumber={roadNumber} section={section} onSearch={onSearch} onClose={onClose} />}
+        {searchScreen === 'segment' && <SearchSegmentScreen onLocationChange={onLocationChange} roadNumber={roadNumber} section={section} onSearch={onSearch} onClose={onClose}/>}
         {searchScreen === 'cityAndStreet' && <SearchCityAndStreetScreen onStreetAndCitySearch={onStreetAndCitySearch} onClose={onClose}
         />}
-        <Map />
       </Box>
     </Dialog>
   );

src/components/molecules/map/Map.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 
-import { MapContainer, TileLayer } from 'react-leaflet';
+import { MapContainer } from 'react-leaflet';
 import L, { LatLng } from 'leaflet';
 import { IPoint } from 'models/Point';
 import { INITIAL_CENTER, INITIAL_ZOOM } from 'const/generalConst';
@@ -34,16 +34,11 @@ interface IProps {
 const Map: FC<IProps> = ({ zoom = INITIAL_ZOOM, center = INITIAL_CENTER, data, children }) => {
   const classes = useStyles();
 
-
-  const bounds = data && getBounds(data);
-
+  const bounds = getBounds(data);
 
   return (
     <MapContainer zoom={zoom} center={center} className={classes.root}>
-      <TileLayer
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-      />
-      {bounds && <MapViewControl bounds={bounds} />}
+      <MapViewControl bounds={bounds} />
       <GoogleMapsLayer />
       {children}
     </MapContainer>