feat(component): update map settings display

Pin is now like the Map page and, when clicked, displays the popup

fix #3856

packages/components/src/MapWithPin/MapPin.css

@@ -0,0 +1,7 @@
+.leaflet-marker-icon:hover {
+  cursor: grab !important;
+}
+
+.leaflet-drag-target {
+  cursor: grabbing;
+}

packages/components/src/MapWithPin/MapPin.stories.tsx

@@ -12,8 +12,7 @@ export const Default: StoryFn<typeof MapPin> = () => {
   return (
     <MapPin
       position={position}
-      draggable={true}
-      ondragend={(lng: number) => {
+      onDrag={(lng: number) => {
         position.lng = lng
       }}
     />

packages/components/src/MapWithPin/MapPin.tsx

@@ -1,9 +1,13 @@
-import * as React from 'react'
+import { useRef, useState } from 'react'
 import { Marker } from 'react-leaflet'
 import L from 'leaflet'
 
 import customMarkerIcon from '../../assets/icons/map-marker.png'
 
+import type { DivIcon } from 'leaflet'
+
+import './MapPin.css'
+
 const customMarker = L.icon({
   iconUrl: customMarkerIcon,
   iconSize: [20, 28],
@@ -15,31 +19,40 @@ export interface IProps {
     lat: number
     lng: number
   }
-  draggable: boolean
-  ondragend(lng: number): void
+  onDrag(lng: number): void
+  markerIcon?: DivIcon
+  onClick?: () => void
 }
 
 export const MapPin = (props: IProps) => {
-  const markerRef = React.useRef(null)
+  const markerRef = useRef(null)
+  const [isDragging, setIsDragging] = useState(false)
+
+  const handleDrag = () => {
+    const marker: any = markerRef.current
+
+    if (!marker) {
+      return
+    }
+
+    const markerLatLng = marker.leafletElement.getLatLng()
+    if (props.onDrag) {
+      props.onDrag(markerLatLng)
+    }
+  }
 
   return (
     <Marker
-      draggable={props.draggable}
-      ondragend={() => {
-        const marker: any = markerRef.current
-
-        if (!marker) {
-          return null
-        }
-
-        const markerLatLng = marker.leafletElement.getLatLng()
-        if (props.ondragend) {
-          props.ondragend(markerLatLng)
-        }
-      }}
+      className={`map-pin ${isDragging ? 'dragging' : ''}`}
+      draggable
+      onDrag={handleDrag}
       position={[props.position.lat, props.position.lng]}
       ref={markerRef}
-      icon={customMarker}
+      icon={props.markerIcon || customMarker}
+      onMouseDown={() => setIsDragging(true)}
+      onMouseUp={() => setIsDragging(false)}
+      onMouseLeave={() => setIsDragging(false)}
+      onclick={props.onClick}
     />
   )
 }

packages/components/src/MapWithPin/MapWithPin.stories.tsx

@@ -1,6 +1,9 @@
+import React from 'react'
+
 import { MapWithPin } from './MapWithPin'
 
 import type { Meta, StoryFn } from '@storybook/react'
+import type { Map } from 'react-leaflet'
 
 export default {
   title: 'Map/MapWithPin',
@@ -9,10 +12,12 @@ export default {
 
 export const Default: StoryFn<typeof MapWithPin> = () => {
   const position = { lat: 0, lng: 0 }
+  const newMapRef = React.useRef<Map>(null)
+
   return (
     <MapWithPin
+      mapRef={newMapRef}
       position={position}
-      draggable={true}
       updatePosition={(_position: { lat: number; lng: number }) => {
         position.lat = _position.lat
         position.lng = _position.lng

packages/components/src/MapWithPin/MapWithPin.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { ZoomControl } from 'react-leaflet'
 import { Alert, Box, Flex, Text } from 'theme-ui'
 
@@ -7,33 +7,38 @@ import { Map } from '../Map/Map'
 import { OsmGeocoding } from '../OsmGeocoding/OsmGeocoding'
 import { MapPin } from './MapPin'
 
-import type { LeafletMouseEvent } from 'leaflet'
+import type { DivIcon, LeafletMouseEvent } from 'leaflet'
+import type { Map as MapType } from 'react-leaflet'
 import type { Result } from '../OsmGeocoding/types'
 
 import 'leaflet/dist/leaflet.css'
 
 const useUserLocation = 'Use my current location'
 const mapInstructions =
-  "You can click on the map, or drag the marker to adjust it's position."
+  "To move your pin, grab it to move it or double click where you want it to go. Tap on your pin to see how it'll look on the map."
 
 export interface Props {
+  mapRef: React.RefObject<MapType>
   position: {
     lat: number
     lng: number
   }
-  draggable: boolean
+  markerIcon?: DivIcon
   updatePosition?: any
   center?: any
   zoom?: number
   hasUserLocation?: boolean
+  onClickMapPin?: () => void
+  popup?: React.ReactNode
 }
 
 export const MapWithPin = (props: Props) => {
-  const [zoom, setZoom] = React.useState(props.zoom || 1)
-  const [center, setCenter] = React.useState(
+  const [dragging, setDragging] = useState<boolean>(false)
+  const [zoom, setZoom] = useState(props.zoom || 1)
+  const [center, setCenter] = useState(
     props.center || [props.position.lat, props.position.lng],
   )
-  const { draggable, position } = props
+  const { mapRef, position, markerIcon, onClickMapPin, popup } = props
 
   const hasUserLocation = props.hasUserLocation || false
   const onPositionChanged =
@@ -58,22 +63,20 @@ export const MapWithPin = (props: Props) => {
     )
   }
 
-  const onClick = (evt: LeafletMouseEvent) => {
+  const onDblClick = (evt: LeafletMouseEvent) => {
     onPositionChanged({ ...evt.latlng })
   }
 
   return (
     <Flex sx={{ flexDirection: 'column', gap: 2 }}>
-      {draggable && (
-        <Alert
-          variant="info"
-          sx={{
-            marginTop: 2,
-          }}
-        >
-          <Text sx={{ fontSize: 1 }}>{mapInstructions}</Text>
-        </Alert>
-      )}
+      <Alert
+        variant="info"
+        sx={{
+          marginTop: 2,
+        }}
+      >
+        <Text sx={{ fontSize: 1 }}>{mapInstructions}</Text>
+      </Alert>
       <div
         style={{
           position: 'relative',
@@ -84,66 +87,77 @@ export const MapWithPin = (props: Props) => {
         <Box
           sx={{
             position: 'absolute',
-            top: 0,
-            left: 0,
-            padding: 2,
+            width: '100%',
             zIndex: 2,
+            padding: 2,
+            bottom: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
           }}
         >
-          {draggable && (
-            <Flex style={{ width: '280px' }}>
-              <OsmGeocoding
-                callback={(data: Result) => {
-                  if (data.lat && data.lon) {
-                    onPositionChanged({
-                      lat: data.lat,
-                      lng: data.lon,
-                    })
-                    setCenter([data.lat, data.lon])
-                    setZoom(15)
-                  }
+          <Flex style={{ width: '280px' }}>
+            <OsmGeocoding
+              callback={(data: Result) => {
+                if (data.lat && data.lon) {
+                  onPositionChanged({
+                    lat: data.lat,
+                    lng: data.lon,
+                  })
+                  setCenter([data.lat, data.lon])
+                  setZoom(15)
+                }
+              }}
+              acceptLanguage="en"
+            />
+            {hasUserLocation && (
+              <Button
+                type="button"
+                mx={2}
+                onClick={(evt) => {
+                  evt.preventDefault()
+                  setLocationToNavigatorLocation()
                 }}
-                countrycodes=""
-                acceptLanguage="en"
-              />
-              {hasUserLocation && (
-                <Button
-                  type="button"
-                  mx={2}
-                  onClick={(evt) => {
-                    evt.preventDefault()
-                    setLocationToNavigatorLocation()
-                  }}
-                >
-                  {useUserLocation}
-                </Button>
-              )}
-            </Flex>
-          )}
+              >
+                {useUserLocation}
+              </Button>
+            )}
+          </Flex>
         </Box>
         <Map
+          ref={mapRef}
+          className="markercluster-map"
           center={center}
           zoom={zoom}
           zoomControl={false}
           setZoom={setZoom}
-          onclick={onClick}
+          ondblclick={onDblClick}
+          doubleClickZoom={false}
           style={{
-            height: '300px',
+            height: '500px',
             zIndex: 1,
           }}
+          ondragstart={() => setDragging(true)}
+          ondragend={() => setDragging(false)}
         >
-          <ZoomControl position="topright" />
-          <MapPin
-            position={position}
-            draggable={draggable}
-            ondragend={(evt: any) => {
-              if (evt.lat && evt.lng)
-                onPositionChanged({
-                  lat: evt.lat,
-                  lng: evt.lng,
-                })
-            }}
-          />
+          <ZoomControl position="bottomleft" />
+          {!dragging && (
+            <>
+              {popup}
+              <MapPin
+                position={position}
+                markerIcon={markerIcon}
+                onClick={onClickMapPin}
+                onDrag={(evt: any) => {
+                  if (evt.lat && evt.lng)
+                    onPositionChanged({
+                      lat: evt.lat,
+                      lng: evt.lng,
+                    })
+                }}
+              />
+            </>
+          )}
         </Map>
       </div>
     </Flex>

src/models/common.models.tsx

@@ -23,7 +23,8 @@ export interface ILocation {
   postcode: string
   value: string
 }
-interface ILatLng {
+
+export interface ILatLng {
   lat: number
   lng: number
 }

src/models/index.ts

@@ -1,5 +1,3 @@
-import type { IComment } from './discussion.models'
-
 export * from './common.models'
 export * from './discussion.models'
 export * from './howto.models'
@@ -17,3 +15,4 @@ export * from './moderation.model'
 export interface UserComment extends IComment {
   isEditable: boolean
 }
+export * from './userPreciousPlastic.models'

src/pages/Maps/Content/MapView/Popup.tsx

@@ -5,6 +5,7 @@ import { MapMemberCard, PinProfile } from 'oa-components'
 import { IModerationStatus } from 'oa-shared'
 import { MAP_GROUPINGS } from 'src/stores/Maps/maps.groupings'
 
+import type { ILatLng } from 'oa-shared'
 import type { Map } from 'react-leaflet'
 import type { IMapPin, IMapPinWithDetail } from 'src/models/maps.models'
 
@@ -15,12 +16,13 @@ interface IProps {
   mapRef: React.RefObject<Map>
   newMap?: boolean
   onClose?: () => void
+  customPosition?: ILatLng
 }
 
 export const Popup = (props: IProps) => {
   const leafletRef = useRef<LeafletPopup>(null)
   const activePin = props.activePin as IMapPinWithDetail
-  const { mapRef, newMap, onClose } = props
+  const { mapRef, newMap, onClose, customPosition } = props
 
   useEffect(() => {
     openPopup()
@@ -47,8 +49,14 @@ export const Popup = (props: IProps) => {
     activePin.location && (
       <LeafletPopup
         ref={leafletRef}
-        position={[activePin.location.lat, activePin.location.lng]}
+        position={
+          customPosition
+            ? customPosition
+            : [activePin.location.lat, activePin.location.lng]
+        }
         offset={new L.Point(2, -10)}
+        closeOnClick={false}
+        closeOnEscapeKey={false}
         closeButton={false}
         className={activePin !== undefined ? '' : 'closed'}
         minWidth={230}