34:["$","title",null,{"children":"testing observable, leaflet, and sharedstreets | Kevin Webb | Observable"}] 3c:T797,map = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container, { //center: [43.814488, -79.218430], // toronto zoo center: [43.645302, -79.380641], // downtown core zoom: 14, defaultExtentControl: true }); map.setView([43.814488, -79.218430], 14); // Basemap layers var CartoDB_Voyager = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png', { maxZoom: 20, attribution: '© OpenStreetMap | © CartoDB' }); var Stamen_TonerLite = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.png', { attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap', minZoom: 0, maxZoom: 20 }); // Filling out the layers control var baseMap = { "CartoDB Voyager": CartoDB_Voyager, "Stamen Toner Lite": Stamen_TonerLite }; var overlays = { "OG Centrelines 3": c3layer, "SS Centrelines 3": ssC3layer, "Failed Centrelines 3": ssC3layerfail, "OG Speed Limits 3": sl3layer, "SS Speed Limits 3": ssSL3layer, "Failed Speed Limits 3": ssSL3layerfail, "OG Centrelines 2": c2layer, "SS Centrelines 2": ssC2layer, "Failed Centrelines 2": ssC2layerfail, "OG Speed Limits 2": sl2layer, "SS Speed Limits 2": ssSL2layer, "Failed Speed Limits 2": ssSL2layerfail }; // Adding controls, layers, to the map L.control.layers(baseMap, overlays).addTo(map); L.control.scale().addTo(map); CartoDB_Voyager.addTo(map); map.addLayer(sl2layer); map.addLayer(ssSL2layerfail); }3d:T416,md`A recent edit was made to grab and show the geometries that failed to match in addition to the matched layers. On the map, these geometries are in red, and have the same geometries as the original geometries, so make sure to layer the failed ones on top! Comparing the failed geometries to the OSM base map and essentially the SharedStreets geometries, sometimes it is fairly obvious as to why the geometries did not match, but other times it is not clear. To better understand why some segments match better than others, it is suggested to conduct a deeper investigation into the parameters that the \`matchUrl\` is composed of. This notebook does not (currently) cover such an investigation. Some important observations: - if an OG segment is matched to an SS segment on one side of a median and not both sides, there is no way to identify that this happened without visual inspection - honestly, most of the time it is unclear at a glance why a segment was not matched, especially when it looks like it matches the OSM basemap underneath`3e:[] 38:{"id":"712e1631785547cc","slug":"testing-observable-leaflet-and-sharedstreets","title":"testing observable, leaflet, and sharedstreets","thumbnail":"ebf28d933e8afbe0633f055fcd2ee193135961573a1c212bf0670db4f61002f4","access_level":"public","create_time":"$D2018-09-18T14:44:10.094Z","update_time":"$D2019-01-07T15:20:51.078Z","view_time":null,"first_public_time":"$D2019-01-07T15:17:06.135Z","has_unpublished_edits":null,"fork":{"id":"c5f77e272738f7d3","slug":"testing-observable-leaflet-and-sharedstreets","title":"testing observable, leaflet, and sharedstreets","owner":{"id":"c62b66f2e9313b2c","login":"q-schen","name":"Q"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a64354931bab0b08","login":"kpwebb","name":"Kevin Webb","avatar_url":"https://avatars-next.observableusercontent.com/c66a6f9dd4ec19f0d2193a376e4f6a934f755ccaf76493919dc315d9f1b1119b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":710,"publish_version":710,"role":null,"authored":false,"authors":[{"type":"individual","id":"11bd00d66734027d","login":"kpwebb","name":"Kevin Webb","avatar_url":"https://avatars-next.observableusercontent.com/c66a6f9dd4ec19f0d2193a376e4f6a934f755ccaf76493919dc315d9f1b1119b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"11bd00d66734027d","login":"kpwebb","name":"Kevin Webb","avatar_url":"https://avatars-next.observableusercontent.com/c66a6f9dd4ec19f0d2193a376e4f6a934f755ccaf76493919dc315d9f1b1119b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"testing observable, leaflet, and sharedstreets","cells":[{"id":0,"value":"md`# testing observable, leaflet, and sharedstreets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`## Setting up Leaflet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`\nTo include the Leaflet JavaScript, we have to use \\`require()\\` to pull it from https://unpkg.com, and assign it to the usual \\`L\\`. The \\`require()\\` pull can also specify a specific version of Leaflet.\n\nUsing \\`html\\`\\` \\` allows us to run HTML in the JavaScript environment of Observable, which is needed to bring in CSS.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"L = require('leaflet')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"leafletCSS = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`\nIncluding Leaflet plugins is similar to including Leaflet, in that you have to use \\`require()\\`, just with a \\`leaflet\\` prefix. Remember to add the CSS from your plugins!\n\nWe'll add the \\`leaflet.defaultextent\\` plugin, to create a control button that allows us to zoom and recentre to a defined extent. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"defaultextent = require('leaflet.defaultextent')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"defaultextentCSS = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`## Bringing in the Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`There are many ways we can bring data into Observable using JavaScript libraries. The two (2) easiest methods are using Fetch and D3. We'll present both methods in this notebook.\n\nCurrently, our data was produced as a selection from the Toronto Streets Centreline and the Toronto Speed Limits. We believe the centreline is up to date to 2017, while the speed limits geometry is up to date to early 2016, and the posted speed column is up to date to June 2018. The two data snippets are hosted on GitHub Gist.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`### Fetch`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md`**Fetch** takes a URL and creates a promise based on the GET request it sends to the URL. If the GET request is successful, the promise is fulfilled, and gives us a response that is an object. This response object has many methods to convert it into something else, namely strings with \\`.text()\\` and JSONs with \\`.json()\\`. \n\nBrief JavaScript Backgrounder: A Promise lets devs handle events when and how they happen. There are two states for promises, and they are handled with different methods: fulfilled promises return a resolved promise object and goes to \\`.then()\\`, while rejected promises see a \\`.catch()\\`. These methods can be chained.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"centreline3 = (await fetch('https://gist.githubusercontent.com/q-schen/473fbb7db2a2ab74296c36ba2d02ee40/raw/c9e771cbe755ab25b3bb9a8b73c8199d2b14aa64/centreline3.geojson')).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"md`### D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`**D3** works in the same way as Fetch does, but as it is a library external to JavaScript, you will need to place a \\`require()\\` call.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`For D3, there are two main ways to load data: \\`d3.json\\` and \\`d3.csv\\`. For our geospatial data, we'll use \\`d3.json\\` to load in our GeoJSONs.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"speedlimits3 = await d3.json('https://gist.githubusercontent.com/q-schen/473fbb7db2a2ab74296c36ba2d02ee40/raw/c9e771cbe755ab25b3bb9a8b73c8199d2b14aa64/speedlimit3.geojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`## SharedStreets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"md`Now that we have our data loaded, we can use the data in SharedStreets! To use SharedStreets in this environment, we have to set up the \\`matchUrl\\`, which is composed of the SharedStreets server URL, the API key (taken from the [Getting Started with SharedStreets](https://beta.observablehq.com/@kpwebb/sharedstreets-api) notebook), and the tolerance filters to help match our data to the SharedStreets reference!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"server = 'https://api.sharedstreets.io/'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"apiKey = \"bdd23fa1-7ac5-4158-b354-22ec946bb575\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"matchUrl = server + 'v0.1.0/match/geoms?tileHierarchy=8&dataSource=osm/planet-181029&lengthTolerance=0.25' + '&ignoreDirection=true&bearingTolerance=' + 90 + '&searchRadius=' + 25 + '&auth=' + apiKey ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"md`With the \\`matchUrl\\` string ready, we can send our data to the SharedStreets API at the \\`matchUrl\\`, and store what it returns using the same \\`d3.json\\` method we just learned.\n\nTo send the appropriate information with our request of the SharedStreets API, we have copied what was used in the [Getting Started with SharedStreets](https://beta.observablehq.com/@kpwebb/sharedstreets-api) notebook.\n\nFollowing this, we'll set a cell to hold only the matched data, which is also in the form of a JSON.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"matchedC3 = await d3.json(matchUrl + \"&snapTopology=true\", {\n method:\"POST\",\n body: JSON.stringify(centreline3),\n headers: {\n \"Content-type\": \"application/json; charset=UTF-8\"\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"ssC3 = { return matchedC3.matched; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"ssC3failed = { return matchedC3.unmatched; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"matchedSL3 = await d3.json(matchUrl + \"&snapTopology=true\", {\n method:\"POST\",\n body: JSON.stringify(speedlimits3),\n headers: {\n \"Content-type\": \"application/json; charset=UTF-8\"\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"ssSL3 = { return matchedSL3.matched; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"ssSL3failed = { return matchedSL3.unmatched; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"md`## Leaflet Layers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"md`Leafet will be able to take in the GeoJSON data with the L.geoJson method and turn it into a displayable layer. Within this method, we can define certain things about the layer, such as the stroke weight and colour.\n\nThe centreline layers are purple, with the original being a light purple and the SharedStreets being a dark purple.\nThe speed limits layers are orange, with the original being a light orange and the SharedStreets being a dark orange.\n\nFor all four of our layers, we will bind a popup to them to indicate the layer, so that you can also check which layer it is by clicking on the feature.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"c3layer = L.geoJson(centreline3, {weight: 2, color: '#b2abd2'}).bindPopup('OG Centreline')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"ssC3layer = L.geoJson(ssC3, {weight: 2, color: '#5e3c99'}).bindPopup('SS Centreline')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"ssC3layerfail = L.geoJson(ssC3failed, {weight: 2, color: '#de2d26'}).bindPopup('Failed to Match Centreline')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"sl3layer = L.geoJson(speedlimits3, {weight: 2, color: '#fdb863'}).bindPopup('Original Speed Limit')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"ssSL3layer = L.geoJson(ssSL3, {weight: 2, color: '#e66101'}).bindPopup('SS Speed Limit')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"ssSL3layerfail = L.geoJson(ssSL3failed, {weight: 2, color: '#de2d26'}).bindPopup('Failed to Match Speed Limits')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"md`### Ex 2\n\nA second data snippet to explore.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"centreline2 = await d3.json('https://gist.githubusercontent.com/q-schen/473fbb7db2a2ab74296c36ba2d02ee40/raw/6bcd5b3fd55c6c7ef0333f28075eaebfaa90f220/centreline2.geojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"speedlimits2 = (await fetch('https://gist.githubusercontent.com/q-schen/473fbb7db2a2ab74296c36ba2d02ee40/raw/6bcd5b3fd55c6c7ef0333f28075eaebfaa90f220/speedlimit2.geojson')).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"matchedC2 = await d3.json(matchUrl + \"&snapTopology=true\", {\n method:\"POST\",\n body: JSON.stringify(centreline2),\n headers: {\n \"Content-type\": \"application/json; charset=UTF-8\"\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"ssC2 = { return matchedC2.matched; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"ssC2failed = { return matchedC2.unmatched; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"matchedSL2 = await d3.json(matchUrl + \"&snapTopology=true\", {\n method:\"POST\",\n body: JSON.stringify(speedlimits2),\n headers: {\n \"Content-type\": \"application/json; charset=UTF-8\"\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"ssSL2 = { return matchedSL2.matched; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"ssSL2failed = { return matchedSL2.unmatched; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"c2layer = L.geoJson(centreline2, {weight: 2, color: '#b2abd2'}).bindPopup('OG Centreline')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"ssC2layer = L.geoJson(ssC2, {weight: 2, color: '#5e3c99'}).bindPopup('SS Centreline')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"ssC2layerfail = L.geoJson(ssC2failed, {weight: 2, color: '#de2d26'}).bindPopup('Failed to Match Centreline')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"ssSL2layerfail = L.geoJson(ssSL2failed, {weight: 2, color: '#de2d26'}).bindPopup('Failed to Match Speed Limits')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"md`#### Popups for Ex2\n\nCreated popups for the speed limit layers of Ex2 in order to (slightly) better visualize the segmenting of the centreline and the SharedStreets geometry. The popups for SS features also show the match scores for the features, where a score closer to 0 is a greater match (the highest in this example seems to be ~~11.85~~ **13.13**).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"sl2layer = L.geoJson(speedlimits2, {\n weight: 2, \n color: '#fdb863',\n onEachFeature: function(feature, layer) {\n layer.bindPopup(\"GEO_ID: \" + feature.properties.geo_id);\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"ssSL2layer = L.geoJson(ssSL2, {\n weight: 2, \n color: '#e66101',\n onEachFeature: function(feature, layer) {\n layer.bindPopup(\"SS ID: \" + feature.properties.referenceId + \"
Match Score: \" + feature.properties.score);\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 33:null