[very blocked] Add Mapillary Layer

.storybook/preview.js

@@ -1,9 +1,10 @@
 import { setupWorker } from "msw";
-import handlers from "../packages/location-field/src/mocks/handlers";
+import locationFieldHandlers from "../packages/location-field/src/mocks/handlers";
+import mapillaryHandlers from "../packages/mapillary-overlay/src/mocks/handlers";
 
 // Only install worker when running in browser
 if (typeof global.process === 'undefined') {
-  const worker = setupWorker(...handlers);
+  const worker = setupWorker(...locationFieldHandlers, ...mapillaryHandlers);
   worker.start({onUnhandledRequest: "bypass"})
 }
 

__snapshots__/storybook.test.ts.snap

@@ -83295,6 +83295,45 @@ exports[`Storyshots LocationIcon To 2`] = `
 </svg>
 `;
 
+exports[`Storyshots MapillaryOverlay Default 1`] = `
+<BaseMap
+  baseLayers={
+    Array [
+      Object {
+        "attribution": "Map tiles: &copy; <a href=\\"http://www.openstreetmap.org/copyright\\">OpenStreetMap</a>, &copy; <a href=\\"https://carto.com/attributions\\">CARTO</a>",
+        "maxZoom": 20,
+        "name": "Streets",
+        "url": "//cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png",
+      },
+    ]
+  }
+  center={
+    Array [
+      55.599748649891,
+      12.997537150008,
+    ]
+  }
+  maxZoom={20}
+  onBaseLayerChange={null}
+  onClick={null}
+  onContextMenu={null}
+  onOverlayAdded={null}
+  onOverlayRemoved={null}
+  onPopupClosed={null}
+  onViewportChanged={null}
+  popup={null}
+  zoom={13}
+>
+  <ForwardRef(Leaflet(MapillaryOverlay)) />
+</BaseMap>
+`;
+
+exports[`Storyshots MapillaryOverlay Default 2`] = `
+<div
+  className="map"
+/>
+`;
+
 exports[`Storyshots ParkAndRideOverlay Default 1`] = `
 <BaseMap
   baseLayers={

package.json

@@ -48,7 +48,7 @@
     "eslint-import-resolver-webpack": "^0.11.1",
     "eslint-plugin-import": "2.23.3",
     "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "7.14.3",
     "husky": "^2.4.1",
     "identity-obj-proxy": "^3.0.0",

packages/mapillary-overlay/README.md

@@ -0,0 +1,5 @@
+## Usage
+
+```
+TBD
+```

packages/mapillary-overlay/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@opentripplanner/mapillary-overlay",
+  "version": "1.0.0",
+  "description": "A map overlay to show Mapillary images",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "types": "lib/index.d.ts",
+  "repository": "https://github.com/opentripplanner/otp-ui.git",
+  "author": "Miles  Grant",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "tsc": "tsc"
+  },
+  "devDependencies": {
+    "@types/react-leaflet": "^2.8.2"
+  }
+}

packages/mapillary-overlay/src/MapillaryOverlay.story.js

@@ -0,0 +1,20 @@
+import BaseMap from "@opentripplanner/base-map";
+import React from "react";
+
+import MapillaryOverlay from ".";
+
+import "../../../node_modules/leaflet/dist/leaflet.css";
+
+const center = [55.599748649891, 12.997537150008];
+const zoom = 13;
+
+export default {
+  title: "MapillaryOverlay",
+  component: MapillaryOverlay
+};
+
+export const Default = () => (
+  <BaseMap center={center} zoom={zoom}>
+    <MapillaryOverlay />
+  </BaseMap>
+);

packages/mapillary-overlay/src/MapillaryUtils.ts

@@ -0,0 +1,21 @@
+import { LatLngBounds } from "leaflet";
+
+// https://github.com/mapbox/vt2geojson for tiles
+
+type MapillaryResponse = {
+  data: [GeoJSON.Feature];
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const getImages = async (
+  bounds: LatLngBounds
+): Promise<MapillaryResponse> => {
+  const apiResponse = await fetch(
+    `https://graph.mapillary.com/images?fields=id,geometry&bbox=${
+      bounds.getSouthWest().lng
+    },${bounds.getSouthWest().lat},${bounds.getNorthEast().lng},${
+      bounds.getNorthEast().lat
+    }&access_token=[TODO INSERT ME FROM PROPS]`
+  );
+  return apiResponse.json();
+};

packages/mapillary-overlay/src/index.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import ReactDOMServer from "react-dom/server";
+
+import {
+  Circle,
+  MapComponentProps,
+  LatLngBounds,
+  FeatureGroup,
+  Popup,
+  MapLayer,
+  withLeaflet
+} from "react-leaflet";
+import { getImages } from "./MapillaryUtils";
+
+/**
+ * An overlay to view Mapillary images.
+ */
+class MapillaryOverlay extends MapLayer<MapComponentProps> {
+  state: {
+    boundsAtLastUpdate: LatLngBounds;
+    images: GeoJSON.FeatureCollection;
+  } = {
+    boundsAtLastUpdate: null,
+    images: null
+  };
+
+  componentDidMount = () => {
+    // set up pan/zoom listener
+    this.props.leaflet.map.on("moveend", this.refreshImages);
+    this.refreshImages();
+  };
+
+  // TODO: determine why the default MapLayer componentWillUnmount() method throws an error
+  componentWillUnmount = () => {
+    // Remove the pan/zoom listener set up above.
+    this.props.leaflet.map.off("moveend", this.refreshImages);
+  };
+
+  refreshImages = async () => {
+    const { leaflet } = this.props;
+    const bounds = leaflet.map.getBounds();
+    const zoom = leaflet.map.getZoom();
+    console.log(zoom);
+    if (zoom < 20) return;
+
+    // TODO: check that previous bounds are sufficiently far from new ones before making expensive request
+
+    const images = await getImages(bounds);
+    const featureCollection = {
+      type: "FeatureCollection",
+      features: images.data.map(image => {
+        return {
+          geometry: image.geometry,
+          type: "Feature",
+          properties: { id: image.id }
+        };
+      })
+    };
+
+    this.setState({ images: featureCollection, boundsAtLastUpdate: bounds });
+  };
+
+  // @ts-expect-error This override is not type-correct, but neccesary
+  createLeafletElement() {}
+
+  updateLeafletElement() {}
+
+  onEachFeature = (feature, layer) => {
+    const popupContent = ReactDOMServer.renderToString(
+      <b>feature id: {feature.properties.id}</b>
+    );
+    layer.bindPopup(popupContent);
+  };
+
+  render() {
+    const { images } = this.state;
+    if (!images) return null;
+
+    return (
+      <FeatureGroup>
+        {images.features.map(feature => {
+          if (feature.geometry.type !== "Point") return null;
+
+          return (
+            <FeatureGroup key={feature.properties.id}>
+              <Popup style={{ margin: 0, padding: 0 }}>
+                <iframe
+                  src={`https://www.mapillary.com/embed?image_key=${feature.properties.id}&style=photo`}
+                  title="Street viewer"
+                  height={300}
+                  width={300}
+                  frameBorder="0"
+                ></iframe>
+              </Popup>
+              <Circle
+                center={[
+                  feature.geometry.coordinates[1],
+                  feature.geometry.coordinates[0]
+                ]}
+                fillColor="#00ff48"
+                radius={5}
+                color="#000"
+                weight={1}
+                opacity={1}
+                fillOpacity={0.8}
+              />
+            </FeatureGroup>
+          );
+        })}
+      </FeatureGroup>
+    );
+  }
+}
+
+export default withLeaflet(MapillaryOverlay);

packages/mapillary-overlay/src/mocks/handlers.js

@@ -0,0 +1,9 @@
+import { rest } from "msw";
+
+import region from "./mapillary-region.json";
+
+export default [
+  rest.get("https://graph.mapillary.com/images", (req, res, ctx) => {
+    return res(ctx.json(region));
+  })
+];