Merge development

.github/workflows/check_version.yml

@@ -0,0 +1,22 @@
+name: Check version numbering is updated prior to merging
+
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  check_version:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+    - name: Check if version has been updated
+      id: check
+      uses: EndBug/version-check@v2
+    - name: Fail if version is not changed prior to merge
+      if: steps.check.outputs.changed == 'false'
+      uses: actions/github-script@v7
+      with:
+        script: |
+          core.setFailed('No version number change found. Run `yarn version`-command to upgrade version before merge can be completed.')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hsl-driver-instructions",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "private": true,
   "homepage": "/kuljettaja",
   "dependencies": {

public/index.html

@@ -6,6 +6,7 @@
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
+  <meta name="robots" content="noindex,nofollow" />
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/components/MapillaryViewer.js

@@ -6,7 +6,7 @@ import { getClosestMapillaryImage } from "../utils/mapUtils";
 import styles from "./mapillaryViewer.module.css";
 
 const MapillaryViewer = observer(
-  ({ location, elementId, onNavigation, className, onCloseViewer }) => {
+  ({ location, elementId, onNavigation, className, onCloseViewer, selectedRoutes }) => {
     const [error, setError] = useState(null);
     const mly = useRef(null);
     const resizeListener = useRef(null);
@@ -44,9 +44,10 @@ const MapillaryViewer = observer(
 
       window.addEventListener("resize", currentResizeListener);
       resizeListener.current = currentResizeListener;
-
       currentMly.setFilter(["==", "organizationKey", "227572519135262"]);
-      currentMly.on("image", (evt) => onNavigation(evt.image.lngLat));
+      currentMly.on("image", (evt) => {
+        onNavigation({latlng: evt.image.lngLat, computedCompassAngle: evt.image.computedCompassAngle})
+      });
       mly.current = currentMly;
     }, [mly.current, resizeListener.current]);
 
@@ -57,19 +58,21 @@ const MapillaryViewer = observer(
             const closest = await getClosestMapillaryImage({
               lat: location.lat,
               lng: location.lng,
+              selectedRoutes
             });
             if (closest && closest.id) {
               mly.current
                 .moveTo(closest.id)
-                .then((node) => {
-                  onNavigation(node.lngLat);
+                .then((image) => {
+                  onNavigation({latlng: image.lngLat, computedCompassAngle: image.computedCompassAngle});
                 })
                 .catch((error) => console.warn(error));
               setError(null);
             } else {
               setError("Katukuvia ei löytynyt.");
             }
           } catch (e) {
+            console.log(e)
             setError("Katunäkymän haku epäonnistui.");
           }
         }

src/components/mapContainer.js

@@ -86,7 +86,6 @@ const restroomQuery = gql`
           type
           lat
           lon
-          point
           dateImported
           mode
         }

src/components/mapLeaflet.js

@@ -20,10 +20,12 @@ import locationIconOffline from "../icons/icon-location-offline.svg";
 import fullScreenEnterIcon from "../icons/icon-fullscreen-enter.svg";
 import fullScreenExitIcon from "../icons/icon-fullscreen-exit.svg";
 import restroomIcon from "../icons/restroom-solid.svg";
+import { mapillaryImageMargerIcon } from "../icons/mapillaryImageMargerIcon.js";
 import styles from "./mapLeaflet.module.css";
 import MapillaryViewer from "./MapillaryViewer.js";
 import { isMobile } from "../utils/browser";
 import MapPrinter from "./mapPrinter";
+import { generateStyle } from "hsl-map-style";
 
 const MAX_DISTANCE_TO_RESTROOM = 500;
 
@@ -83,11 +85,11 @@ const addMarkersToLayer = (stops, direction, map, restrooms) => {
   }
   closeByRestrooms.forEach((closeByRestroom) => {
     let icon = mapIcon(restroomIcon);
-    const markerr = L.marker([closeByRestroom.lat, closeByRestroom.lon], { icon });
-    markerr.bindTooltip(`${closeByRestroom.nameFi}, ${closeByRestroom.addressFi}`, {
+    const marker = L.marker([closeByRestroom.lat, closeByRestroom.lon], { icon });
+    marker.bindTooltip(`${closeByRestroom.nameFi}, ${closeByRestroom.addressFi}`, {
       direction: "top",
     });
-    markerr.addTo(map);
+    marker.addTo(map);
   });
 };
 
@@ -296,18 +298,6 @@ class MapLeaflet extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    // All layers except the base layer and mapillary features are removed when the component is updated
-    this.map.eachLayer((layer) => {
-      if (!layer.options.baseLayer) {
-        if (
-          layer.options.type !== "mapillaryGeoJsonLayer" &&
-          layer.options.type !== "mapillaryImageMarker" &&
-          layer.options.type !== "mapillaryHighlightMarker"
-        ) {
-          this.map.removeLayer(layer);
-        }
-      }
-    });
     // Leaflet map is updated once geometry and stop data has been fetched
     // The view (bounding box) is set only the first time the route stops are recieved
     if (
@@ -435,7 +425,7 @@ class MapLeaflet extends React.Component {
       : "";
 
     const digitransitTileLayer = L.tileLayer(
-      `${process.env.REACT_APP_DIGITRANSIT_URL}/map/v2/hsl-map/{z}/{x}/{y}{retina}.png${apikey}`,
+      `${process.env.REACT_APP_DIGITRANSIT_URL}/map/v3/hsl-map/{z}/{x}/{y}{retina}.png${apikey}`,
       {
         maxZoom: 19,
         tileSize: 512,
@@ -468,6 +458,12 @@ class MapLeaflet extends React.Component {
       drawControl: true,
     });
 
+    if (this.map) {
+      this.map.createPane("imageMarkerPane");
+      this.map.getPane("imageMarkerPane").style.zIndex = 650;
+      this.map.getPane("imageMarkerPane").style.pointerEvents = "none";
+    }
+
     const baseMaps = {
       Aerial: aerialTileLayer,
       Digitransit: digitransitTileLayer,
@@ -524,44 +520,41 @@ class MapLeaflet extends React.Component {
     if (!this.state.showMapillaryLayer) {
       return;
     }
-    for (const key in e.target._layers) {
-      const layer = e.target._layers[key];
-      if (layer) {
-        if (layer.options.type === "mapillaryHighlightMarker") {
-          this.setState({ mapillaryLocation: layer._latlng });
-        }
+    e.target.eachLayer((layer) => {
+      if (layer.options && layer.options.type === "mapillaryHighlightMarker") {
+        const latLng = layer.getLatLng();
+        this.setState({ mapillaryLocation: latLng });
       }
-    }
+    });
   }
 
-  setMapillaryLocation(position, playService) {
-    if (!this.state.mapillaryLocation) {
-      if (playService) {
-        playService.stop();
-      }
-      return;
+  setMapillaryLocation({ latlng, computedCompassAngle = 0 }) {
+    function createRotatedIcon(computedCompassAngle) {
+      const svgIconHtml = mapillaryImageMargerIcon(computedCompassAngle);
+
+      const svgIcon = L.divIcon({
+        className: "custom-div-icon",
+        html: svgIconHtml,
+        iconSize: [15, 15],
+        iconAnchor: [7.5, 7.5],
+      });
+
+      return svgIcon;
     }
     if (this.imageMarker) {
       this.imageMarker.remove();
-      this.imageMarker = null;
     }
-    if (this.map && position) {
-      const marker = this.createMarker({
-        position: position,
-        opacity: 1,
-        type: "mapillaryImageMarker",
-        color: "red",
-      });
-      if (!this.imageMarker) {
-        this.imageMarker = marker;
-        this.imageMarker.addTo(this.map);
-      } else {
-        this.imageMarker.setLatLng(position);
-      }
-    } else if (!position) {
+
+    if (this.map && latlng) {
+      const marker = L.marker(latlng, {
+        icon: createRotatedIcon(computedCompassAngle),
+      }).addTo(this.map);
+
+      this.imageMarker = marker;
+    } else if (!latlng) {
       this.removeMarker();
     }
-    this.setState({ mapillaryImageLocation: { lat: position.lat, lng: position.lon } });
+    this.setState({ mapillaryImageLocation: { lat: latlng.lat, lng: latlng.lng } });
   }
 
   onHover = (e) => {
@@ -597,6 +590,7 @@ class MapLeaflet extends React.Component {
       radius: 4,
       color: options.color,
       opacity: options.opacity,
+      pane: "imageMarkerPane",
     });
   };
 
@@ -628,8 +622,10 @@ class MapLeaflet extends React.Component {
     });
     this.setState({ mapillaryLocation: null });
   };
-
   render() {
+    const selectedRouteObjects = this.props.routes.filter((route) =>
+      this.props.selectedRoutes.includes(route.id)
+    );
     return (
       <div
         className={classNames(styles.container, {
@@ -655,6 +651,7 @@ class MapLeaflet extends React.Component {
             elementId="mly"
             onNavigation={this.setMapillaryLocation}
             location={this.state.mapillaryLocation}
+            selectedRoutes={selectedRouteObjects}
           />
         )}
       </div>

src/components/stop.js

@@ -3,15 +3,7 @@ import styles from "./stop.module.css";
 import PropTypes from "prop-types";
 import timeIcon2 from "../icons/icon-time2.svg";
 
-const Stop = ({
-  shortId,
-  stopNameFi,
-  stopNameSv,
-  duration,
-  platform,
-  onClick,
-  timingStopType,
-}) => (
+const Stop = ({ shortId, stopNameFi, stopNameSv, platform, onClick, timingStopType }) => (
   <button className={styles.root} onClick={onClick}>
     <p className={styles.textTitle}>{shortId}</p>
     <div className={styles.infoContainer}>
@@ -21,7 +13,6 @@ const Stop = ({
       </div>
       <div className={styles.additionalInfoContainer}>
         <div className={styles.textAdditional}>{stopNameSv}</div>
-        <div className={styles.textDuration}>{duration} min</div>
       </div>
     </div>
     {timingStopType > 0 && (

src/components/stop.module.css

@@ -24,7 +24,7 @@
 .textTitle {
   font-size: var(--mainTextSize);
   font-weight: 600;
-  width: 68px;
+  width: 100px;
   flex-wrap: wrap;
 }
 

src/components/stopList.js

@@ -9,7 +9,6 @@ const renderStops = (routeStops, isFullScreen, setMapCenter) =>
       shortId={stop.shortId}
       stopNameFi={stop.nameFi}
       stopNameSv={stop.nameSe}
-      duration={stop.duration}
       timingStopType={stop.timingStopType}
       platform={stop.platform}
       onClick={() => setMapCenter({ lat: stop.lat, lng: stop.lon, stopId: stop.stopId })}

src/icons/mapillaryImageMargerIcon.js

@@ -0,0 +1,7 @@
+
+export function mapillaryImageMargerIcon(angle) {
+  const correctedAngle = angle - 90;
+  return `<svg fill="red" width="15px" height="15px" viewBox="-96 0 512 512" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(${correctedAngle}deg); transform-origin: center;">` +
+            `<path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/>` +
+          `</svg>`;
+}