Merge pull request #56 from itk-dev/feature/3175-street-map-bounds

Feature/3175 street map bounds

Author: Sine Jespersen

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+- [PR-56](https://github.com/itk-dev/aapodwalk/pull/56)
+  - Rename component `Map.jsx` -> `MapComponent.jsx` to "[not shadow the global "Map" property](https://eslint.org/docs/latest/rules/no-shadow)"
+  - Create a mapper to map lats/longs to fit the outer bounds react-leaflet uses
+  - Create a `MapMarker.jsx`
 - [PR-55](https://github.com/itk-dev/aapodwalk/pull/55)
   - Redesign pins on map
 - [PR-54](https://github.com/itk-dev/aapodwalk/pull/54)

src/components/map/Map.jsx

@@ -0,0 +1,43 @@
+import { MapContainer, TileLayer } from "react-leaflet";
+import { useContext, useEffect, useState } from "react";
+import LatLongContext from "../../context/latitude-longitude-context";
+import YouAreHere from "../../icons/you-are-here-icon.svg?raw";
+import { getIndexedPinSvg, getPinSvg, mapArrayForOuterBounds } from "../../util/helper";
+import MapMarker from "./MapMarker";
+import "leaflet/dist/leaflet.css";
+import "./map-wrapper.css";
+
+function MapComponent({ mapData, additionalClass = "", withIndex }) {
+  const { lat, long } = useContext(LatLongContext);
+  const [outerBounds, setOuterBounds] = useState(null);
+  function getLabelForPin(index) {
+    return index + 1;
+  }
+
+  useEffect(() => {
+    if (mapData.length > -1) {
+      setOuterBounds(mapArrayForOuterBounds(mapData, lat, long));
+    }
+  }, [mapData, lat, long]);
+
+  if (outerBounds === null) return null;
+
+  return (
+    <MapContainer bounds={outerBounds} className={`${additionalClass} rounded`} scrollWheelZoom={true}>
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      {mapData.map(({ latitude, longitude }, index) => (
+        <MapMarker
+          key={latitude}
+          latitude={latitude}
+          longitude={longitude}
+          iconHtml={withIndex ? getIndexedPinSvg(getLabelForPin(index)) : getPinSvg()}
+        />
+      ))}
+      {lat && long && <MapMarker latitude={lat} longitude={long} iconHtml={YouAreHere} />}
+    </MapContainer>
+  );
+}
+export default MapComponent;

src/components/map/MapComponent.jsx

@@ -0,0 +1,21 @@
+import { Marker } from "react-leaflet";
+import L from "leaflet";
+
+const MapMarker = ({ iconHtml, latitude, longitude }) => {
+  return (
+    <Marker
+      key={latitude}
+      position={[latitude, longitude]}
+      icon={L.divIcon({
+        html: iconHtml,
+        // 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
+      })}
+    />
+  );
+};
+
+export default MapMarker;

src/components/map/MapMarker.jsx

@@ -1,5 +1,5 @@
 import { useState, useContext } from "react";
-import Map from "./Map";
+import MapComponent from "./MapComponent";
 import PermissionContext from "../../context/permission-context";
 import "./map-wrapper.css";
 import CloseButton from "../CloseButton";
@@ -20,9 +20,9 @@ function MapWrapper({ mapData, additionalClass = "", focusable, withIndex }) {
         }
         onClick={() => setFocusOnMap(true)}
       >
-        {focusOnMap && <Map withIndex={withIndex} zoomControl mapData={mapData} />}
+        {focusOnMap && <MapComponent withIndex={withIndex} mapData={mapData} />}
         {!focusOnMap && focusable && (
-          <Map withIndex={withIndex} zoomControl={false} additionalClass={additionalClass} mapData={mapData} />
+          <MapComponent withIndex={withIndex} additionalClass={additionalClass} mapData={mapData} />
         )}
       </button>
       {focusOnMap && focusable && (

src/components/map/MapWrapper.jsx

@@ -8,7 +8,7 @@ function DistanceComponent({ id, latitude, longitude, classes, proximityToUnlock
   const { lat, long } = useContext(LatLongContext);
   const distance = useMemo(
     () => getDistanceBetweenCoordinates(lat, long, latitude, longitude),
-    [lat, long, latitude, longitude]
+    [lat, long, latitude, longitude],
   );
   function unlockThisPoint() {
     setListOfUnlocked([...listOfUnlocked, ...[id]]);

src/components/points/DistanceComponent.jsx

@@ -77,4 +77,14 @@ export function getPinSvg() {
       </svg>`;
 }
 
+export function mapArrayForOuterBounds(pointArray, userLat, userLong) {
+  if (userLat && userLong) {
+    return [
+      ...pointArray.map(({ latitude, longitude }) => [latitude, longitude]),
+      ...[[userLat.toString(), userLong.toString()]],
+    ];
+  }
+  return pointArray.map(({ latitude, longitude }) => [latitude, longitude]);
+}
+
 export default {};