Add basic popup for item information

layers/511mn/layer.js

@@ -1,24 +0,0 @@
-import VectorLayer from 'ol/layer/Vector';
-import {Vector as VectorSource} from 'ol/source.js';
-import GeoJSON from 'ol/format/GeoJSON.js';
-
-import {Style} from 'ol/style.js';
-import Icon from 'ol/style/Icon.js';
-
-import url from './data.geojson?url'; // TODO: remove `?url`?
-import pin from './pin.svg?url'; // TODO: remove `?url`?
-
-const vectorLayer = new VectorLayer({
-    source: new VectorSource({
-        url: url,
-        format: new GeoJSON,
-    }),
-    style: new Style({
-        image: new Icon({
-            anchor: [0.5, 1],
-            src: pin,
-        }),
-    }),
-});
-
-export default vectorLayer;

layers/511mn/pin.svg

@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   viewBox="0 0 384 512"
-   width="40px"
-   height="30px"
-   version="1.1"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
-  <path
-     d="m 384,192 c 0,87.4 -117,243 -168.3,307.2 -12.3,15.3 -35.1,15.3 -47.4,0 C 116.1,435 0,279.4 0,192 0,85.96 85.96,0 192,0 245.96029,0 294.73775,22.275796 329.62577,58.136607 363.27205,92.721042 384,139.94065 384,192 Z"
-     style="fill:#000;fill-opacity:1" />
-  <g transform="translate(-10 -52.362) scale(0.4)">
-    <g transform="matrix(1.1311 0 0 1.1311 -76.881 -20.513)">
-      <rect style="stroke:#ffffff;stroke-width:7.7518;fill:#ffffff" ry="57.185" height="337.9" width="560.25" y="363.1" x="233.88" />
-      <rect style="stroke:#ffffff;stroke-width:7.2923;fill:#ffffff" ry="40.515" height="81.03" width="241.25" y="310.54" x="389.61" />
-    </g>
-      <path style="stroke:#000000;stroke-width:32;fill:#00000000" d="m508.57 188.08c0 32.348-26.223 58.571-58.571 58.571s-58.571-26.223-58.571-58.571 26.223-58.571 58.571-58.571c32.339 0 58.559 26.209 58.571 58.548" transform="matrix(1.4504 0 0 1.4504 -257.49 -204.11) matrix(1.274 0 0 1.274 -47.288 304.47)" />
-  </g>
-</svg>

layers/511mn/process_data.py

@@ -1,66 +0,0 @@
-#!/usr/bin/env python3
-
-import requests
-import json
-import re
-
-with open("query.graphql") as f:
-    QUERY = f.read()
-
-PAYLOAD = [
-    {
-        "query": QUERY,
-        "variables": {
-            "input": {
-                # Cover the whole state (this is pretty overkill, admittedly)
-                "north":53.23294,
-                "south":40.40589,
-                "east":-78.6823,
-                "west":-107.24675,
-                "zoom":9,
-                "layerSlugs": ["normalCameras"],
-                "nonClusterableUris": ["dashboard"]
-            },
-            "plowType":"plowCameras",
-        }
-    }
-]
-
-res = requests.post('https://511mn.org/api/graphql', json=PAYLOAD)
-res.raise_for_status()
-
-camera_views = res.json()[0]['data']['mapFeaturesQuery']['mapFeatures']
-
-cameras = []
-
-viewCount = 0
-
-for c in camera_views:
-    if len(c['features']) != 1:
-        print(c)
-        raise Exception(f"Unexpected number of features: {len(c['features'])}")
-    
-    if re.match(r"Show [\d]* cameras", c['tooltip']):
-        raise Exception(f"Not zoomed in enough! Finding aggregate cameras: {c}")
-
-    viewCount += len(c['views'])
-    cameras.append({
-        "type": "Feature",
-        "geometry": c['features'][0]['geometry'],
-        "properties": {
-            'address': c['tooltip'],
-            'website': c['views'][0]['url'],
-            'originalData': c,
-        },
-    })
-
-geojson = {
-    "type": "FeatureCollection",
-    "features": cameras,
-}
-
-with open("data.geojson", "w") as f:
-    f.write(json.dumps(geojson))
-
-print(f"{len(cameras)} locations found")
-print(f"{viewCount} total views")

layers/511mn/query.graphql

@@ -1,40 +0,0 @@
-query MapFeatures($input: MapFeaturesArgs!, $plowType: String) {
-  mapFeaturesQuery(input: $input) {
-    mapFeatures {
-      bbox
-      tooltip
-      uri
-      features {
-        id
-        geometry
-        properties
-      }
-      ... on Event {
-        priority
-      }
-      __typename
-      ... on Camera {
-        views(limit: 5) {
-          uri
-          ... on CameraView {
-            url
-          }
-          category
-        }
-      }
-      ... on Plow {
-        views(limit: 5, plowType: $plowType) {
-          uri
-          ... on PlowCameraView {
-            url
-          }
-          category
-        }
-      }
-    }
-    error {
-      message
-      type
-    }
-  }
-}

layers/index.js

@@ -14,7 +14,6 @@ import cellular from './cellular.js';
 import light_pollution from './light_pollution.js';
 import state_land from './state-land/index.js';
 import trips from './trips/index.js';
-import _511mncamerasLayer from './511mn/layer.js';
 
 const layerCategories = [
     { // Base maps
@@ -76,11 +75,6 @@ const layerCategories = [
                 name: "Bikepacking.com Routes",
                 layer: bikepackingLayer,
             },
-            {
-                name: "511MN Cameras",
-                layer: _511mncamerasLayer,
-                enabled: true,
-            }
         ]
     },
     trips,

main.js

@@ -79,9 +79,10 @@ for (let category of layerCategories) {
 }
 
 function objectToTable(o) {
-  // TODO: hack hack hack
   let table = `<table style="margin: 0.5em; border-collapse: collapse;">`;
+  // TODO: hack hack hack
   for (let [key, value] of Object.entries(o)) {
+    console.log(`typeof ${value} = ${typeof value}`);
     if (typeof value === "object") {
       value = objectToTable(value);
     }
@@ -103,9 +104,10 @@ map.on('click', function (evt) {
     return;
   }
   
-  // exclude geometry -- https://stackoverflow.com/a/208106
+  // https://stackoverflow.com/a/208106
   const {geometry: _, ...featureData} = feature.values_;
 
   content.innerHTML = objectToTable(featureData);
   popupOverlay.setPosition(evt.coordinate);
+  console.log(feature);
 });