3f:null 40:["$","title",null,{"children":"Explorable Detroit | Seth Fitzsimmons | Observable"}] 46:T80c,map = { let map = this; if (!map) { // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div map = new mapboxgl.Map({ container: container, center: [-83.0611, 42.3395], minZoom: 15, maxZoom: 22, zoom: 15, style: 'mapbox://styles/mapbox/light-v9' }); } // Wait until the map loads, then yield the container again. await new Promise(resolve => { if (map.loaded()) resolve(map); else map.on('load', () => resolve(map)); }); map.addSource("history", { type: "vector", tiles: [ "https://osm-detroit.s3.amazonaws.com/detroit-geom-tiles-20180930/{z}/{x}/{y}.mvt" ], minzoom: 15, maxzoom: 15 }); map.addLayer({ id: "polygons", type: "fill", source: "history", "source-layer": "all", minzoom: 10, maxzoom: 24, paint: { "fill-opacity": 0.25, "fill-color": "hotpink" } }, 'waterway-label'); map.addLayer({ id: "lines", type: "line", source: "history", "source-layer": "all", minzoom: 10, maxzoom: 24, layout: { "line-cap": "butt", "line-join": "round" }, "paint": { "line-opacity": 0.25, "line-color": "rgb(53, 175, 109)", "line-width": 2 } }, 'waterway-label'); map.addLayer({ id: "points", type: "circle", source: "history", "source-layer": "all", minzoom: 10, maxzoom: 24, paint: { "circle-radius": 5, // "circle-color": "#fff", // "circle-opacity": 0.1, "circle-opacity": 0.5, "circle-color": "steelblue" // "circle-blur": 1 }, }, 'waterway-label'); yield map; map.addControl(new mapboxgl.NavigationControl()); map.on('mousemove', function (e) { const features = map.queryRenderedFeatures(e.point, { layers: ["points", "polygons", "lines"] }); document.getElementById('features').innerHTML = JSON.stringify(features.map(x => x.properties), null, 2) console.log(features); }); }47:[] 44:{"id":"4aaf0b9ecf57ebff","slug":"explorable-detroit","title":"Explorable Detroit","thumbnail":"ec94a43892eba650addb74e3d2ca66c97d168fa990dc472d1faaaef1b7eb2d95","access_level":"public","create_time":"$D2018-10-05T00:13:57.266Z","update_time":"$D2018-11-14T03:37:32.014Z","view_time":null,"first_public_time":"$D2018-10-05T15:34:09.234Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"461277f0bca7897c","login":"mojodna","name":"Seth Fitzsimmons","avatar_url":"https://avatars-next.observableusercontent.com/2da6648e4443edddbb03f8be4bbbd7a74211c5c91f4b601246faa6f14d278a5d","tier":"starter_2024","bio":"","following":false},"version":267,"publish_version":267,"role":null,"authored":false,"authors":[{"type":"individual","id":"8981a93cd4c5e490","login":"mojodna","name":"Seth Fitzsimmons","avatar_url":"https://avatars-next.observableusercontent.com/2da6648e4443edddbb03f8be4bbbd7a74211c5c91f4b601246faa6f14d278a5d","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"8981a93cd4c5e490","login":"mojodna","name":"Seth Fitzsimmons","avatar_url":"https://avatars-next.observableusercontent.com/2da6648e4443edddbb03f8be4bbbd7a74211c5c91f4b601246faa6f14d278a5d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Explorable Detroit","cells":[{"id":0,"value":"md`# Explorable Detroit`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"viewof currentDate = slider({\n min: Date.parse(\"2007-09-01T00:00:00Z\") / 1000,\n max: Date.parse(\"2018-09-30\") / 1000,\n step: 86400,\n value: Date.now() / 1000,\n title: \"Date\",\n submit: true,\n description: \"Date when features were active\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"html`${new Date(currentDate * 1000).toLocaleDateString()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"viewof features = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"viewof showAllFeatures = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"{\n  map.setFilter(\"points\", activeFilter.concat(pointFilter));\n  map.setFilter(\"lines\", activeFilter.concat(lineFilter));\n  map.setFilter(\"polygons\", activeFilter.concat(polygonFilter));\n  \n  return map.getFilter(\"points\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"activeFilter = {\n  return dateFilter.concat(featureFilter);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"featureFilter = {\n  switch (features) {\n    case \"address\":\n      return [[\"has\", \"addr:housenumber\"]];\n      \n    case \"park\":\n      return [[\"==\", \"leisure\", \"park\"]];\n\n    case \"parking\":\n      return [[\"==\", \"amenity\", \"parking\"]];\n      \n    case \"poi\":\n      return [[\"any\", [\"has\", \"amenity\"], [\"has\", \"shop\"], [\"has\", \"craft\"], [\"has\", \"office\"], [\"has\", \"leisure\"], [\"has\", \"aeroway\"]]];\n\n    case \"road\":\n      return [[\"==\", \"$type\", \"LineString\"], [\"has\", \"highway\"]];\n\n    case \"route\":\n      return [[\"==\", \"$type\", \"LineString\"], [\"has\", \"route\"]];\n      \n    case \"trafficSign\":\n      return [[\"any\", [\"==\", \"highway\", \"stop\"], [\"==\", \"highway\", \"give_way\"]]];\n\n    case \"trafficSignal\":\n      return [[\"==\", \"highway\", \"traffic_signals\"]];\n  \n    default:\n      return [];\n  }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"dateFilter = {\n  if (showAllFeatures) {\n    return [\"all\"];\n  } else if (currentDate < Date.parse(\"2018-09-30\") / 1000) {\n    const validityFilter = [\n      \"all\",\n      [\"<=\", \"__updated\", currentDate * 1000],\n      [\n        \"any\",\n        [\"all\", [\">\", \"__validUntil\", currentDate * 1000], [\"!=\", \"__validUntil\", 0]],\n        [\"==\", \"__validUntil\", 0]\n      ]\n    ];\n\n    return validityFilter;\n  } else {\n    return currentlyValidFilter;\n  }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"currentlyValidFilter = [\"all\", [\"==\", \"__validUntil\", 0]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"pointFilter = [[\"==\", \"$type\", \"Point\"]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"lineFilter = [[\"==\", \"$type\", \"LineString\"]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"polygonFilter = [[\"==\", \"$type\", \"Polygon\"]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"mapboxgl = {\n  let mapboxgl = await require('mapbox-gl@0.43.0');\n  mapboxgl.accessToken = 'pk.eyJ1IjoidG1jdyIsImEiOiJjamN0Z3ZiOXEwanZkMnh2dGFuemkzemE3In0.gibebYiJ5TEdXvwjpCY0jg';\n  return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"stylesheet=html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}}
45:"$44:body"