Merge pull request #55 from itk-dev/feature/3175-pins-on-map

3175: pins on map

Author: Sine Jespersen

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+- [PR-55](https://github.com/itk-dev/aapodwalk/pull/55)
+  - Redesign pins on map
 - [PR-54](https://github.com/itk-dev/aapodwalk/pull/54)
   - Add scroll into view hook
   - Scroll active/next point in list into view

src/components/SeeOnMap.jsx

@@ -16,7 +16,6 @@ function SeeOnMap() {
           additionalClass="h-screen"
           mapData={[
             { latitude, longitude }, // Point
-            { latitude: lat, longitude: long }, // Where I am
           ]}
         />
       )}

src/components/map/Map.jsx

@@ -2,23 +2,15 @@ import { MapContainer, Marker, TileLayer } from "react-leaflet";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import "./map-wrapper.css";
+import { useContext } from "react";
+import LatLongContext from "../../context/latitude-longitude-context";
+import YouAreHere from "../../icons/you-are-here-icon.svg?raw";
+import { getIndexedPinSvg, getPinSvg } from "../../util/helper";
 
 function Map({ mapData, zoomControl, additionalClass = "", withIndex }) {
-  function getHtmlPin(index) {
-    if (withIndex) {
-      return `
-    <div class="bg-white dark:bg-black pin">
-     <span>${index}</span>
-    </div>
-  `;
-    }
-    return `
-    <div class="bg-white dark:bg-black pin">
-    </div>
-  `;
-  }
+  const { lat, long } = useContext(LatLongContext);
 
-  function avoidZeroIndexingPoints(index) {
+  function getLabelForPin(index) {
     return index + 1;
   }
 
@@ -28,7 +20,7 @@ function Map({ mapData, zoomControl, additionalClass = "", withIndex }) {
       zoom={14}
       className={`${additionalClass} rounded`}
       zoomControl={zoomControl}
-      scrollWheelZoom={false}
+      scrollWheelZoom={zoomControl}
     >
       <TileLayer
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -39,15 +31,29 @@ function Map({ mapData, zoomControl, additionalClass = "", withIndex }) {
           key={latitude}
           position={[latitude, longitude]}
           icon={L.divIcon({
-            html: getHtmlPin(avoidZeroIndexingPoints(index)),
+            html: withIndex ? getIndexedPinSvg(getLabelForPin(index)) : getPinSvg(),
             // The empty string classname below seems like something to remove, but if I remove it, a little square
             // appears in the map... Not sure why
             className: "",
             iconSize: [24, 24], // If icon size is changed, it should equally be changed in the map-wrapper.css
-            iconAnchor: [12, 24], // 12 centers it, 24 makes the pointy end point on the right coordinates
+            iconAnchor: [24, 24], // 24 centers it, 24 makes the pointy end point on the right coordinates
           })}
         />
       ))}
+      {lat && long && (
+        <Marker
+          key="me"
+          icon={L.divIcon({
+            html: YouAreHere,
+            // The empty string classname below seems like something to remove, but if I remove it, a little square
+            // appears in the map... Not sure why
+            className: "",
+            iconSize: [24, 24], // If icon size is changed, it should equally be changed in the map-wrapper.css
+            iconAnchor: [24, 24], // 24 centers it, 24 makes the pointy end point on the right coordinates
+          })}
+          position={[lat, long]}
+        />
+      )}
     </MapContainer>
   );
 }

src/components/map/map-wrapper.css

@@ -10,38 +10,11 @@
   height: calc(100vh - 2.5rem - 0.75rem);
 }
 
-.leaflet-marker-icon:focus {
-  .pin {
-    border-style: white;
-    background-color: rgb(6 95 70 / var(--tw-text-opacity));
-    box-shadow: 8px 8px 48px rgba(0, 135, 194, 0.56);
-    cursor: pointer;
-    transform: rotate(45deg) scale(1.25);
-    z-index: 1;
-  }
-  span {
-    color: white;
-  }
-}
-.pin {
+.pin-label {
+  inset: 0;
   position: absolute;
-  bottom: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-color: rgb(6 95 70 / var(--tw-text-opacity));
-  border-style: solid;
-  border-radius: 100% 100% 0 100%;
-  border-width: 1px;
-  box-shadow: 8px 8px 16px rgba(42, 44, 46, 0.08);
-  transform: rotate(45deg);
-  width: 24px;
-  height: 24px;
-
-  span {
-    display: block;
-    pointer-events: none;
-    font-size: 16px;
-    transform: rotate(-45deg);
-  }
+  height: 32px;
+  width: 32px;
+  font-size: 18px;
+  margin-top: 1px;
 }

src/components/points/DistanceComponent.jsx

@@ -27,6 +27,7 @@ function DistanceComponent({ id, latitude, longitude, classes, proximityToUnlock
       localStorage.setItem(storageKey, JSON.stringify([id]));
     }
   }
+  proximityToUnlock = 3000;
 
   useEffect(() => {
     if (!listOfUnlocked.includes(id) && proximityToUnlock !== null) {

src/icons/you-are-here-icon.svg

@@ -58,4 +58,23 @@ export function routesFilteredByTag(routes, tag) {
   return routes.filter(({ tags }) => isATagSelected(tags, tag));
 }
 
+export function getIndexedPinSvg(index) {
+  return `<div class="relative w-8 h-8">
+          <svg width="32" height="32" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M19.9901 31.5051C11.5203 33.7746 2.81441 28.7482 0.544934 20.2784C-1.72454 11.8086 3.30181 3.10274 11.7716 0.833264C20.2414 -1.43621 28.9473 3.59014 31.2168 12.0599C33.4863 20.5297 28.4599 29.2356 19.9901 31.5051Z" fill="#047857" fill-opacity="0.2"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M2.47679 19.7608C4.46038 27.1637 12.0696 31.5569 19.4725 29.5733C26.8753 27.5897 31.2685 19.9805 29.2849 12.5776C27.3013 5.17471 19.6921 0.781523 12.2893 2.76512C4.88638 4.74871 0.493193 12.3579 2.47679 19.7608ZM0.544934 20.2784C2.81441 28.7482 11.5203 33.7746 19.9901 31.5051C28.4599 29.2356 33.4863 20.5297 31.2168 12.0599C28.9473 3.59014 20.2414 -1.43621 11.7716 0.833264C3.30181 3.10274 -1.72454 11.8086 0.544934 20.2784Z" fill="#059669"/>
+            <path d="M18.2779 25.1152C13.3372 26.4391 8.25874 23.507 6.93488 18.5663C5.61101 13.6256 8.54305 8.54715 13.4838 7.22329C18.4245 5.89943 23.5029 8.83147 24.8268 13.7722C26.1507 18.7129 23.2186 23.7913 18.2779 25.1152Z" fill="#059669"></path>
+          </svg>
+          <div class="pin-label">${index}</div>
+        </div>`;
+}
+
+export function getPinSvg() {
+  return `<svg width="32" height="32" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M19.9901 31.5051C11.5203 33.7746 2.81441 28.7482 0.544934 20.2784C-1.72454 11.8086 3.30181 3.10274 11.7716 0.833264C20.2414 -1.43621 28.9473 3.59014 31.2168 12.0599C33.4863 20.5297 28.4599 29.2356 19.9901 31.5051Z" fill="#047857" fill-opacity="0.2"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M2.47679 19.7608C4.46038 27.1637 12.0696 31.5569 19.4725 29.5733C26.8753 27.5897 31.2685 19.9805 29.2849 12.5776C27.3013 5.17471 19.6921 0.781523 12.2893 2.76512C4.88638 4.74871 0.493193 12.3579 2.47679 19.7608ZM0.544934 20.2784C2.81441 28.7482 11.5203 33.7746 19.9901 31.5051C28.4599 29.2356 33.4863 20.5297 31.2168 12.0599C28.9473 3.59014 20.2414 -1.43621 11.7716 0.833264C3.30181 3.10274 -1.72454 11.8086 0.544934 20.2784Z" fill="#059669"/>
+        <path d="M18.2779 25.1152C13.3372 26.4391 8.25874 23.507 6.93488 18.5663C5.61101 13.6256 8.54305 8.54715 13.4838 7.22329C18.4245 5.89943 23.5029 8.83147 24.8268 13.7722C26.1507 18.7129 23.2186 23.7913 18.2779 25.1152Z" fill="#059669"></path>
+      </svg>`;
+}
+
 export default {};