feat: new lateral popup design

• new desktop lateral popup design
• mobile version
• adapted renderers to interact with new elements

src/components/Map/MapWrapperData/index.tsx

@@ -19,9 +19,9 @@ import SliderPopup from 'slimComponents/SliderPopup'
 import { MobileContext } from 'context/mobileContext'
 import { SliderPopupContext } from 'context/sliderPopupContext'
 
-const SLICE_LAT = 0.05
-const SLICE_LANG = 0.55
-
+const SLICE_LAT = 0.005
+const SLICE_LANG = 0.035
+const DEFAULT_ZOOM = 13
 /**
  * Set default Leaflet icon place
  * Not used but is the way to let Leaflet know where
@@ -60,9 +60,7 @@ const MapWrapperData = ({
   const {
     state: { isMobile }
   } = useContext(MobileContext)
-  const {
-    state: { isOpen }
-  } = useContext(SliderPopupContext)
+  const { state } = useContext(SliderPopupContext)
 
   const findPlace = (arrPlace: PlaceType, placeId: string): Promise<boolean> =>
     new Promise((res) => res(placeId === arrPlace.slug))
@@ -133,7 +131,13 @@ const MapWrapperData = ({
   }
 
   const onClickPlace = (place: PlaceType) => {
-    map.flyTo([Number(place.lat) + SLICE_LAT, Number(place.lng) + SLICE_LANG])
+    map.flyTo(
+      [
+        Number(place.lat) + (isMobile ? 0 : SLICE_LAT),
+        Number(place.lng) + (isMobile ? 0 : SLICE_LANG)
+      ],
+      DEFAULT_ZOOM
+    )
     onOpenPopup(place)
   }
 
@@ -156,8 +160,8 @@ const MapWrapperData = ({
       {!controls.filter && <Filter open={open} setOpen={setOpen} />}
       {!controls.suggestPlace && <SuggestPlace />}
 
-      {(!isOpen || !isMobile) && <Fullscreen position={position} />}
-      {(!isOpen || !isMobile) && <ZoomControl position={position} />}
+      {(!state?.isOpen || !isMobile) && <Fullscreen position={position} />}
+      {(!state?.isOpen || !isMobile) && <ZoomControl position={position} />}
 
       {/* The places. These are the places in the map */}
       <MarkerClusterGroup