30:T630,## Preparing Geographic Data There are two primary types of geographic data that we'll encounter in this notebook, [GeoJSON](https://geojson.org/) and [TopoJSON](https://github.com/topojson/topojson). Leaflet, the library that we will be covering for most of this notebook, uses [GeoJSON](https://geojson.org/), a format for encoding a variety of geographic data structures as JSON objects with a standard specification. GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. This means that it would be possible to map points on a map, streets, and regions (like neighbourhoods). Unfortunately, Leaflet does not allow you to use [TopoJson](https://github.com/topojson/topojson) files. TopoJSON is an extension of GeoJSON that encodes topology. A TopoJSON file describes the topology (geometrical properties and spatial relations of figures) of a group of features, meaning the borders between them. It's structure is more complicated and can potentially lose details from the original latitudes/longitude, but the tradeoff is that the file is usually smaller. You will have to convert TopoJSON files to for use in Leaflet. There are many ways to do this, but a quick an easy way is to use [mapshaper.org](http://mapshaper.org/). For now, let's stick with GeoJSON. Lyn has a notebook that [goes into more detail about working with geodata](https://observablehq.com/@drlynb/lyn-tries-maps-again). This is very helpful to read, especially if you are getting some strange results with your maps!31:T548,--- ## Vega-Lite Mapping Before we take a dive into Leaflet, let's take a brief look at maps in Vega-Lite. Up until now, we've primarily been using Vega-Lite to create visualizations of our data. Vega-Lite does have some built in map capabilities, (see [here](https://observablehq.com/@observablehq/vega-lite-chart-types?collection=@observablehq/observable-for-vega-lite#maps) for some examples about Vega-Lite maps), though it is minimal. We use **`markGeoshape()`** to define a map in Vega-Lite. Unlike Leaflet, Vega-Lite is also able to work with TopoJSON and has a function to unpack it into GeoJSON. The [Cartographic Visualization](https://observablehq.com/@uwdata/cartographic-visualization) has more information about mapping in Vega-Lite. Let's take a look at this set of maps created in Vega-Lite, which show the neighbourhoods of Vancouver with `vanAreas`. Each of these maps uses a different [cartographic projection](https://vega.github.io/vega-lite/docs/projection.html). See how different each map appears. You can get some limited interactions in Vega-lite maps by using ```vl.selectPoint()```, such as this [choropleth map example](https://observablehq.com/@uwdata/cartographic-visualization#cell-262). For these maps, you can hover over a neighbourhood to select it and get a tooltip showing the name of the neighbourhood. 32:T446,viewof cell = { const selection = vl.selectPoint().on("mouseover").clear("mouseout"); //disabled parking dots const disabledParking = vl .markCircle({ fill: "green", fillOpacity: 0.8, stroke: "black", strokeWidth: 0.5 }) .data(dparking1) .params(selection) .transform(vl.filter('datum.x !== "null" && datum.y !== "null"')) .project(vl.projection("mercator")) .encode( vl.latitude().fieldQ("latitude"), vl.longitude().fieldQ("longitude"), vl.size().value(60), vl.tooltip([ { field: "LOCATION", title: "Location"}, { field: "DESCRIPTN", title: "Details" }, { field: "NOTES", title: "Notes"} ]), vl.opacity().if(selection, vl.value(1)).value(0.3) ); // base map of Vancouver const map = vl .markGeoshape({ filled: false, stroke: "#bbbbbb", strokeWidth: 1 }) .data(vanStreets.features); return vl .layer(map, disabledParking) .project(vl.projection("mercator")) .width(900) .height(560) .config({ view: { stroke: null } }) .render(); }33:T4a0,--- ## Vega-Lite vs Leaflet Up until now, we've primarily been using Vega-Lite to create visualizations of our data. While Vega-Lite does have some built in map capabilities, (see https://observablehq.com/@observablehq/vega-lite-chart-types?collection=@observablehq/observable-for-vega-lite#maps for some examples about Vega-Lite maps), Leaflet offers a multitude of plugins and mapping features for developers (such as markers, map control, interaction and layers, as well as custom map projections). [Leaflet](https://leafletjs.com/) is a javascript library for creating maps, which we will focus upon a great deal in this tutorial. Leaflet is a popular, lightweight, open-source Javascript library for creating interactive maps that is well supported, and contains a host of [features](https://leafletjs.com/#features). It provides an interface that pulls map _data & tiles_ from providers like [OpenStreetMap](https://www.openstreetmap.org/#map=3/71.34/-96.82) and [Mapbox](https://www.mapbox.com/), and visualizing it as an interactive map. Including a Leaflet map as part of a notebook is fairly similar to using it anywhere else, but here are the not-so-gritty details. 34:T5ba,//Our function is in map map = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell called 'container', so it's // completely self-contained. let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); // This component utilizes "yield", which pauses the execution of this code block // Yield returns the value of container back to the notebook, which allows the div to be placed on the page. //This is important, because Leaflet uses the div's .offsetWidth and .offsetHeight (to get current size of the div) and size the map. If I were to only return the container at the end of this method, Leaflet might get the wrong idea about the map's size. yield container; // Now we create a map object and add a layer to it. let map = L.map(container).setView([49.2527, -123.1207], 10.5); // initializes the map, sets zoom & coordinates //This adds the tile layer to the map. The map dynamically loads tiles based on current view the experience smooth and seamless. Make sure to add attribution to your map. let baseLayer = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }) .addTo(map); }35:T6a6,### Breaking down the basics of a Leaflet map Let's break down the inside of our ```map``` object which created the leaflet map: #### **let container = DOM.element('div', { style: \`width:${width}px; height: \${width/1.6}px\` });** > You'll often see Leaflet examples initializing a map like ```L.map('map')```, which tells the library to look for a div with the id '```map'``` on the page. > > In Observable, we instead create a div from scratch in this cell called ```'container'```, so it's completely self-contained. #### **yield container;** > ```yield``` returns the value of ```container``` back to the notebook, which allows the div to be placed on the page. It pauses the code block until ```container``` is returned. > > This is important, because Leaflet uses the div's ```.offsetWidth``` and `.offsetHeight` (to get current size of the div) and size the map. If I were to only return the container at the end of this method, Leaflet might get the wrong idea about the map's size. #### **let map = L.map(container).setView([49.2527, -123.1207], 10.5);** > Creates the map object, sets zoom & coordinates #### **let baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors'}).addTo(map); ** > This adds the tile layer (the base layer) to the map. The map dynamically loads tiles based on current view. Make sure to add attribution to your map. We use **`.addTo(map)`** which will add each layer successively to the map. **The order in which you add your layers will be very important in showing what layer is at the top, and can be interacted with. Beware!** 36:T52d, ------ ### Changing the basemap It's possible to change the type of basemaps (aka. tile layer) you want as your map. This is particularly useful if you're using a basemap with a lot of overlying data; you don't want to add to the visual confusion. Hosting sites for maps are often called tile servers. Copy the tile url and replace the .png above, and make sure to check the **EPSG code**. Remember to attribute. Different types of basemaps can be found here: - http://bl.ocks.org/Xatpy/raw/854297419bd7eb3421d0/ - https://github.com/CartoDB/basemap-styles - https://wiki.openstreetmap.org/wiki/Tile_servers - https://maptalks.org/raster-collection/ For now, I'm going to make my life easier by storing these urls and attributions of the basemaps I'll be using into variables (the variables are defined at the bottom of the notebook under **Helper Functions for Styling Maps**). Lots of long url strings can make your Leaflet code busier | Basemap variable | Basemap URL | Attribution variable (for attribution string) |---|---|---| | `cartoLight` |'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png'| `cartoAttr` | | `cartoDark` | 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png | `cartoAttr` | | `osMap` (the green one) | 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' | `osmAttr` | 37:T730,grandCentralMap = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell, so it's // completely self-contained. //Here, I changed the width and height of the map since I got tired of accidentally scrolling in and out while navigating through the page let container = DOM.element('div', { style: `width:${600}px;height:${width/2}px` }); // Note that I'm yielding the container pretty early here: this allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight to size the map. If I were // to only return the container at the end of this method, Leaflet might // get the wrong idea about the map's size. yield container; // Now we create a map object //NOTE: WE DO NOT SET THE VIEW BECAUSE WE WAIT TO GET THE BOUNDS OF THE LAYER WITH OUR POLYGON let map = L.map(container); //Basemap layer let baseLayer = L.tileLayer(cartoLight, { attribution:cartoAttr, subdomains: 'abcd', maxZoom: 20, minZoom: 10 }).addTo(map); //--------------------*** ADDING A LAYER ***-------------------------- //instantiates a new geoJson layer using built in geoJson handling //We can set the attributes of the polygons (like CSS), including line weight and colors let grandCentralLayer = L.geoJson(grandCentral, { weight: 5, color: 'grey' }) .addTo(map); //finds bounds of polygon and automatically gets map view to fit (useful for interaction and not having to 'cook' the map zoom and coordinates as in map instantiation grandCentralLayer.bindPopup('Grand Central Terminal'); //tooltip map.fitBounds(grandCentralLayer.getBounds()); }38:T4ec,{ //here, we constrain the map to a certain size let width = 600 let height = 350 let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield container; // Did not use setView because we are using "fit bounds" to get the polygons to determine this //Also, I fixed the zoom level for this map since we don't get more info by zooming in for this vis let map = L.map(container, {maxZoom: 11, minZoom: 11}); let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr }).addTo(map); //----------- ADDING A NEW LAYER ------- //1. instantiates a new geoJson layer using built in geoJson handling //2. Instead of setting styles of the map by hand, I just returned an object with pre-defined styles //3. bindPopup with name of neighborhood & population let VanAreasLayer = L.geoJson(VanAreas, {style: style}) .bindPopup(d => d.feature.properties.NAME + '
Pop: ' + d.feature.properties.population) .addTo(map); //4. Adds the layer to the map. //finds bounds of polygon and automatically gets map view to fit (useful for interaction and not having to 'cook' the map zoom and coordinates as in map instantiation map.fitBounds(VanAreasLayer.getBounds()); }39:T429,VanAreasMap = { //here, we constrain the map to a certain size let width = 600 let height = 350 let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield container; // Did not use setView because we are using "fit bounds" to get the polygons to determine this //Also, I fixed the zoom level for this map since we don't get more info by zooming in for this vis let map = L.map(container, {maxZoom: 11, minZoom: 11}); let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr }).addTo(map); //----------- ADDING A NEW LAYER ------- //TO-DO: let's call our new layer VanAreasLayer let VanAreasLayer = L.geoJson(VanAreas, {style}) .bindPopup(function(d){return d.feature.properties.NAME + '
Pop: ' + d.feature.properties.population}) .addTo(map); //finds bounds of polygon and automatically gets map view to fit (useful for interaction and not having to 'cook' the map zoom and coordinates as in map instantiation map.fitBounds(VanAreasLayer.getBounds()); }3a:T4b0,{ let width = 600; let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // Did not use setView because we are using "fit bounds" to get the polygons to determine this let map = L.map(container); //add base layer //We can set the minZoom and maxZoom levels of the base layer, but in this case the default is fine let baseLayer = L.tileLayer(cartoLight, { attribution:cartoAttr, }).addTo(map); //instantiates a new geoJson layer using built in geoJson handling //for style, I do something similar here where I pass in an inline function for style //{style: someStyleFunction} has to be passed in with the key 'style' here let VanAreasLayer = L.geoJson(vanOneWays, {style: streetStyle}) //binds a popup when clicking on each line to access underlying data .bindPopup(function (Layer) { return Layer.feature.properties.hblock; }) .addTo(map); //Adds the layer to the map. //finds bounds of polygon and automatically gets map view to fit (useful for interaction and not having to 'cook' the map zoom and coordinates as in map instantiation map.fitBounds(VanAreasLayer.getBounds()); }3b:T826,VanMarkerMap = { let width = 600; let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // Did not use setView because we are using "fit bounds" to get the polygons to determine this let map = L.map(container); //add base layer let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr, subdomains: 'abcd', maxZoom: 20, minZoom: 10 }).addTo(map); //tooltip to define our content that we want to return let tooltip = function (Layer) { return Layer.feature.properties.name + '
Address: ' + Layer.feature.properties.merged_address + '
Neighborhood: ' + Layer.feature.properties.geo_local_area; } //As a reminder: here's an alternative way to write the same function above with arrow notation // let tooltip = (Layer) => { Layer.feature.properties.name + '
Address: ' + Layer.feature.properties.merged_address + '
Neighborhood: ' + Layer.feature.properties.geo_local_area; } //****** TRY UNCOMMENTING THE CODE IN THIS SECTION to define a custom green icon ******************* var myIcon = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], //popupAnchor: [1, -34], //shadowSize: [41, 41] }); let customMarker = L.marker([49.28, -123.12], {icon: myIcon}).addTo(map) .bindPopup('A pretty CSS3 popup added to the map.
Easily customizable.') .openPopup(); //***************************************************************************************** //Adds the layer to the map & bind tooltip let VanAreasLayer = L.geoJson(vanFoodGardens) .bindPopup(tooltip) .addTo(map); // //finds bounds of polygon and automatically gets map view to fit (useful for interaction and not having to 'cook' the map zoom and coordinates as in map instantiation map.fitBounds(VanAreasLayer.getBounds()); }3c:T574,VanCircleFoodMap = { let width = 600; let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // Did not use setView because we are using "fit bounds" to get the polygons to determine this let map = L.map(container); //add base layer let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr, }).addTo(map); //geoMarker obj let geojsonMarkerOptions = { radius: 5, fillColor: "#ff7800", //orange color: "#ff7800", weight: 1, opacity: 1, fillOpacity: 0.6 }; //passing a pointToLayer function in a GeoJSON options object when creating the GeoJSON layer //This function is passed a LatLng and should return an instance of ILayer, in this case likely a Marker or CircleMarker. let VanAreasLayer = L.geoJSON(vanFoodGardens, { pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, geojsonMarkerOptions); }}) //bind popup and add layer to map .bindPopup(function (Layer) { return Layer.feature.properties.name + '
Address: ' + Layer.feature.properties.merged_address + '
Neighborhood: ' + Layer.feature.properties.geo_local_area; }) .addTo(map); //finds bounds of polygon and automatically gets map view to fit map.fitBounds(VanAreasLayer.getBounds()); } 3d:T580,VanDisabledParking = { let width = 600; let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // Did not use setView because we are using "fit bounds" to get the polygons to determine this let map = L.map(container); //add base layer let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr, }).addTo(map); //geoMarker obj let geojsonMarkerOptions = { radius: 5, fillColor: "green", //orange color: "white", weight: .5, opacity: .9, fillOpacity: 1 }; //passing a pointToLayer function in a GeoJSON options object when creating the GeoJSON layer //This function is passed a LatLng and should return an instance of ILayer, in this case likely a Marker or CircleMarker. let VanAreasLayer = L.geoJSON(dparking, { pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, geojsonMarkerOptions); }}) //bind popup and add layer to map .bindPopup(function (Layer) { return 'LOCATION: ' + Layer.feature.properties.LOCATION + '
DESCRIPTION: ' + Layer.feature.properties.DESCRIPTN + '
NOTES: ' + Layer.feature.properties.NOTES; }) .addTo(map); //finds bounds of polygon and automatically gets map view to fit map.fitBounds(VanAreasLayer.getBounds()); } 3e:T5bc,VanTwoLayers = { let width = 600; let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // Did not use setView because we are using "fit bounds" to get the polygons to determine this let map = L.map(container); //add base layer let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr, subdomains: 'abcd', maxZoom: 20, minZoom: 0 }).addTo(map); //geoMarker obj let geojsonMarkerOptions = { radius: 5, fillColor: "#ff7800", color: "#ff7800", weight: 1, opacity: 1, fillOpacity: 0.6 }; //THIS IS THE NEIGHBOURHOODS LAYER. let VanAreasLayer = L.geoJson(VanAreas, {style: neighbourhoodStyle}) .bindPopup(d => d.feature.properties.NAME + '
Pop: ' + d.feature.properties.population) .addTo(map); //THIS IS THE POINTS LAYER, TRY MOVING IT SO THAT IT IS BOUND BEFORE VanPointsLayer let VanPointsLayer = L.geoJSON(vanFoodGardens, { pointToLayer: (feature, latlng) => { return L.circleMarker(latlng, geojsonMarkerOptions); }}) .bindPopup(function (Layer) { return Layer.feature.properties.name + '
Address: ' + Layer.feature.properties.merged_address + '
Neighborhood: ' + Layer.feature.properties.geo_local_area; }) .addTo(map); //finds bounds of polygon and automatically gets map view to fit map.fitBounds(VanAreasLayer.getBounds()); } 3f:T4dc,popMap2 = { let width = 600 let height = 600 let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield container //base layer let map = L.map(container); let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr, minZoom: 11, maxZoom: 11, }).addTo(map); //add van areas let VanAreasLayer = L.geoJson(vanAreas, {style: style}) .bindTooltip(function (Layer) { return Layer.feature.properties.NAME; }).addTo(map); //DEFINING OUR LEGEND var legend = L.control({position: 'bottomright'}); legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), grades = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7], labels = []; // loop through our density intervals and generate a label with a colored square for each interval for (var i = 0; i < grades.length; i++) { div.innerHTML += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+'); } return div; }; legend.addTo(map); map.fitBounds(VanAreasLayer.getBounds()); }40:Ta6e,----- ## Resources **Tutorial Specific** - [Interactive Choropleth map](https://leafletjs.com/examples/choropleth/) in Leaflet - ~~See [Rusty Conover's Leaflet map with legend for a better Observable specific example](https://observablehq.com/@rustyconover/2020-04-22-apparent-temperature-visualized-with-h3-leaflet)~~ Oct 2022 update: Does not properly work, but the CSS specification for the legend still works properly - [Leaflet Tutorials, Examples, and Documentation](https://leafletjs.com/SlavaUkraini/) **Observable-specific Leaflet maps (with vega-lite)** - [Geodata Wrangling for Vega Lite](https://observablehq.com/@drlynb/lyn-tries-maps-again), [Vancouver Crime Map](https://observablehq.com/@drlynb/vancouver-crime-map), and [Leaflet and D3 Interactive Overlays](https://observablehq.com/@drlynb/leaflet-and-d3-interactive-overlays) by Lyn Bartram - [GeoVis](https://observablehq.com/@aunnoy/iat-355-4-geovis) by Aunnoy K. Mutasim - [Leaflet](https://observablehq.com/@tmcw/leaflet) basic notebook by Tom MacWright - [An Old Vega Map Exercise](https://observablehq.com/@drlynb/iat-355-exercise-spatial-visualization) - created in vega-lite JSON spec, NOT API **Vega-Lite Tutorials and Examples**: In case you want other perspectives of Vega-Lite tutorials - Another tutorial on [Vega-Lite's encodings](https://observablehq.com/@aunnoy/iat-355-3-interactions-in-vega-lite) from a previous IAT 355 TA - Lyn's [Exploring Visual Forms](https://observablehq.com/@drlynb/week-4-vega-lite-exploring-visual-forms) notebook - A collection of tutorials on [Observable for Vega-Lite](https://observablehq.com/collection/@observablehq/observable-for-vega-lite) has a big collection of examples - Jeff Heer from the University of Washington has many notebook examples with the [Vega-Lite API](https://observablehq.com/collection/@vega/vega-lite-api), including his own [introduction tutorial](https://observablehq.com/@uwdata/introduction-to-vega-lite) **Vega-Lite Documentation** - The [Vega-Lite Documentation](https://vega.github.io/vega-lite/docs/) uses JSON declaration. - A less complete version of the [Vega-Lite API documentation](https://vega.github.io/vega-lite-api/) is also available; scroll to the bottom to see the API Reference **JAVASCRIPT** - For those needing a Javascript refresher, Min Hyung Chung has a great brief on Javascript in [Section 1](https://observablehq.com/@chunggrace/lab-2-javascript-introduction-to-vega-lite#cell-26) of her notebook **COLOR RESOURCES** - [CSS Color list](https://www.w3schools.com/cssref/css_colors.asp) - [https://coolors.co/](https://coolors.co/) - [ColorBrewer](https://colorbrewer2.org/) ---------------41:[{"id":"54d266d08c6cbdbd72c7c3b485b13699b61400fc0a7bfc187afd62ad7931bd3bfeb1cc4891699a7207d98bd8052b1778214e8561a99fa7dadb6daf45544ddd52","href":"https://static.observableusercontent.com/files/54d266d08c6cbdbd72c7c3b485b13699b61400fc0a7bfc187afd62ad7931bd3bfeb1cc4891699a7207d98bd8052b1778214e8561a99fa7dadb6daf45544ddd52","name":"image@4.png","type":"image/png","lastModified":1679001891263.089,"size":77256},{"id":"2b3a6b94ec23a93c6071b7584adf374c60f9c6eb83804f5a600f3be91596585c2a4f92d120bf15371b1ea686b40911c492029ef5146e31edb6482dedeb5c11eb","href":"https://static.observableusercontent.com/files/2b3a6b94ec23a93c6071b7584adf374c60f9c6eb83804f5a600f3be91596585c2a4f92d120bf15371b1ea686b40911c492029ef5146e31edb6482dedeb5c11eb","name":"image@3.png","type":"image/png","lastModified":1679001891263.089,"size":61308},{"id":"2ddcee3cef64f9000074659a4c927b71f9c1c2bf749c1f514bdd0562db69cde126b45b32ff26b994821446b3019ce58ae0f20ca67dd802cbb386423954a62dd6","href":"https://static.observableusercontent.com/files/2ddcee3cef64f9000074659a4c927b71f9c1c2bf749c1f514bdd0562db69cde126b45b32ff26b994821446b3019ce58ae0f20ca67dd802cbb386423954a62dd6","name":"community-gardens-and-food-trees.geojson","type":"application/geo+json","lastModified":1679001891263.089,"size":88190},{"id":"77b7645e6f50f4af6336f4405d50bd1c6997027a86bd38e8f6701dd9307c6a1d7049e6d419a79f55a5101464fff3d9af00038f2370caf4d91657d16ac66738f0","href":"https://static.observableusercontent.com/files/77b7645e6f50f4af6336f4405d50bd1c6997027a86bd38e8f6701dd9307c6a1d7049e6d419a79f55a5101464fff3d9af00038f2370caf4d91657d16ac66738f0","name":"image.png","type":"image/png","lastModified":1679001891263.089,"size":439082},{"id":"db4cb94eb621418bbef8840cddba3021c68fded0efd28ef00627c4d83b6c8587cec196c12cf7009e6358b0d320840b77b6369c6d6db6ea139be54f90e5008947","href":"https://static.observableusercontent.com/files/db4cb94eb621418bbef8840cddba3021c68fded0efd28ef00627c4d83b6c8587cec196c12cf7009e6358b0d320840b77b6369c6d6db6ea139be54f90e5008947","name":"public-streets.geojson","type":"application/geo+json","lastModified":1679001891263.089,"size":5585502},{"id":"8fd73582e9f5ebf0d816ea5dc566e16abec6b55f94d92c2ad90956d9835e6b3abf0c659fcebd9770209c0165fa0641092d302dd2c904d0dea8399262d65bb9ce","href":"https://static.observableusercontent.com/files/8fd73582e9f5ebf0d816ea5dc566e16abec6b55f94d92c2ad90956d9835e6b3abf0c659fcebd9770209c0165fa0641092d302dd2c904d0dea8399262d65bb9ce","name":"one-way-streets.geojson","type":"application/geo+json","lastModified":1679001891263.089,"size":149498},{"id":"8839234162abeaa37988fcfac9a2943a1ae3090f55f760352abc9b204a02b984a6c3a3327fe3487dc56558bfbfd49bf7a66547f7ff95ae243e8a1a1b101aff62","href":"https://static.observableusercontent.com/files/8839234162abeaa37988fcfac9a2943a1ae3090f55f760352abc9b204a02b984a6c3a3327fe3487dc56558bfbfd49bf7a66547f7ff95ae243e8a1a1b101aff62","name":"geojson.png","type":"image/png","lastModified":1679001891263.089,"size":445640},{"id":"e8a1c62e61765cd84ab67631082775bd53395bcd4f1a6d6fd19f74e236194b9e9606ab4b04114ed5024d04dfffa5a7e1685f0cdf4707636dc571a8e6eef584a8","href":"https://static.observableusercontent.com/files/e8a1c62e61765cd84ab67631082775bd53395bcd4f1a6d6fd19f74e236194b9e9606ab4b04114ed5024d04dfffa5a7e1685f0cdf4707636dc571a8e6eef584a8","name":"VancouverAreaSize.json","type":"application/json","lastModified":1679001891263.089,"size":52857},{"id":"db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","href":"https://static.observableusercontent.com/files/db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","name":"vanCrime.json","type":"application/json","lastModified":1679001891263.089,"size":4714349},{"id":"bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","href":"https://static.observableusercontent.com/files/bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","name":"VanAreas.json","type":"application/json","lastModified":1679001891263.089,"size":52832},{"id":"dd7991ebcc7ee0ca482f2b5418f4f070424e54c3dcc69715ec233b69c266539a39e82862a30de6b4931583a7c8e9b56daf1414ac7563e9b4ace5a9259fe0457a","href":"https://static.observableusercontent.com/files/dd7991ebcc7ee0ca482f2b5418f4f070424e54c3dcc69715ec233b69c266539a39e82862a30de6b4931583a7c8e9b56daf1414ac7563e9b4ace5a9259fe0457a","name":"image@6.png","type":"image/png","lastModified":1679001891263.089,"size":151677},{"id":"fe2d9eb7ede3b1f9bc240e5d219a78f5d4f29e26670343ac506a8053a6fc074efe0f42d1f22eab8cd0604d74924fd3c58edc4556097050aa4c6436fd619cffb9","href":"https://static.observableusercontent.com/files/fe2d9eb7ede3b1f9bc240e5d219a78f5d4f29e26670343ac506a8053a6fc074efe0f42d1f22eab8cd0604d74924fd3c58edc4556097050aa4c6436fd619cffb9","name":"image@7.png","type":"image/png","lastModified":1679001891263.089,"size":30855},{"id":"ecf57e666f691f1696307770b6e4a3a649e8496aeba86112303a6abe995ca589559f43b752edc98d36a294079d0767d6146e096228b8111ab0bc018795af90ef","href":"https://static.observableusercontent.com/files/ecf57e666f691f1696307770b6e4a3a649e8496aeba86112303a6abe995ca589559f43b752edc98d36a294079d0767d6146e096228b8111ab0bc018795af90ef","name":"image@8.png","type":"image/png","lastModified":1679001891263.089,"size":83119},{"id":"692b6696cc73d6a450b12e00f7d193028821cf3ab5c3f6c98fb0e6e3bca05f5ddbf76dff82168cec210e40e142f5faf841934619f4bb2e2622944c7156c9abce","href":"https://static.observableusercontent.com/files/692b6696cc73d6a450b12e00f7d193028821cf3ab5c3f6c98fb0e6e3bca05f5ddbf76dff82168cec210e40e142f5faf841934619f4bb2e2622944c7156c9abce","name":"image@5.png","type":"image/png","lastModified":1679001891263.089,"size":47282}] 2e:{"title":"[IAT355] Tutorial 7: Maps & Geocoding with Vega-Lite and Leaflet (v2) 🍂| SOLUTION","cells":[{"id":932,"value":"# [IAT355] Tutorial 7: Maps & Geocoding with Vega-Lite and Leaflet (v2) 🍂| SOLUTION\n\n^{Content adapted from the following notebooks: \n- [Geodata Wrangling for Vega Lite](https://observablehq.com/@drlynb/lyn-tries-maps-again), [Vancouver Crime Map](https://observablehq.com/@drlynb/vancouver-crime-map), and [Leaflet and D3 Interactive Overlays](https://observablehq.com/@drlynb/leaflet-and-d3-interactive-overlays) by Lyn Bartram\n- [GeoVis](https://observablehq.com/@aunnoy/iat-355-4-geovis) by Aunnoy K. Mutasim\n- [Leaflet JS tutorial](https://leafletjs.com/)\n- [Cartographic Visualization](https://observablehq.com/@uwdata/cartographic-visualization) by UW Interactive Data Lab\n- [Vega-Lite Chart Types: Maps](https://observablehq.com/@observablehq/vega-lite-chart-types#maps) by Visnu Pitiyanuvath\n}\n\n** Tutorial notebook [here](https://observablehq.com/@iat355/07t-maps?collection=@iat355/iat-355-tutorials-exercises)**\n\n## About this Notebook\nMaps and Geocoding in Leaflet","pinned":false,"hidden":false,"mode":"md"},{"id":944,"value":"toc('h2, h3, h4')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1145,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":1193,"value":"FileAttachment(\"geojson.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1196,"value":"**Figure 1.** GeoJSON data structure in Observable. Taken from Lyn's [geodata notebook](https://observablehq.com/@drlynb/lyn-tries-maps-again)\n\n**A few summary points from her notebook:**\n- d3 (and by extension the Vega and Vega-Lite grammars) supports many projections (take a look at them in this workbook: https://observablehq.com/@vega/vega-lite-cartographic-projections). We can typically use the ```Mercator``` projection for most cases. But you will probably need to play with the right scaling factor and centering to position your map as you want it.\n- A **d3 geoProjection** takes coordinates in an [x,y] or **[long,lat]** format. In other words, longitude and latitude are switched from the normal way they will be expressed in many datasets - even after you have done the datum conversion. Typically the most useful workaround is simply to rename your data fields.\n- Geodata files can be very big and gist will typically fail on many. Consider hosting on a more robust webserver.","pinned":false,"hidden":false,"mode":"md"},{"id":3033,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":3484,"value":"vanAreas","pinned":true,"hidden":false,"mode":"ojs"},{"id":3486,"value":"vl.vconcat(\n vl.hconcat(\n vlmaps('mercator'),\n vlmaps(\"albersUSA\"),\n vlmaps('equalEarth')\n ),\n vl.hconcat(\n vlmaps('identity'),\n vlmaps('stereographic'),\n vlmaps()\n )\n).title('Cartographic Projections with Vega-Lite').render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3488,"value":"//Function to create a map in vega lite\nfunction vlmaps(proj) {\n\n //selection on hover\n const selection = vl.selectPoint()\n .on(\"mouseover\")\n .clear('mouseout')\n .resolve(\"intersect\");\n\n //markGeoshape defines our map\n return vl.markGeoshape({ fill: \"grey\", stroke: \"black\" })\n .project(vl.projection(proj)) //projection to be used\n .data(vanAreas.features) //vanAreas is geoJSON data. vanAreas.features is an array that defines the features of each neighbourhood\n .params(selection)\n .encode(\n vl.tooltip().fieldN(\"properties.NAME\"), //get the name of each neighbourhood\n vl.opacity().if(selection, vl.value(0.8)).value(0.1) //if hovered on, make the opacity of nonselected neighbourhoods .1\n )\n .title(proj);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3491,"value":"This Vega-Lite map below shows locations where you can find disabled parking locations in Vancouver. \nWe use the `dparking` geoJSON file. Note that `dparking1` is also used; this is a parsed array from the `features` of the geoJSON file.\nNote that we can do some things like hovering over the circles to get information. \n\nHowever, Vega-Lite's mapping is severely limited in terms of \"map\" interactions that we might expect out of a regular map. Think to the maps that you use (e.g., Apple Maps, Google Maps). What types of interactions are missing?","pinned":false,"hidden":false,"mode":"md"},{"id":3495,"value":"dparking","pinned":true,"hidden":false,"mode":"ojs"},{"id":3499,"value":"dparking1 = d3.csv(\"https://gist.githubusercontent.com/drlynb/2b4ac0221b8138ade06cd91886b95f69/raw/a45e5883da217c0c1b3237df307136b5ee86a7e9/disparking2.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3496,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":977,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":3026,"value":"### Including Leaflet\n\n1. First, include the Leaflet JavaScript with ```require()``` to pull it from https://unpkg.com\n2. Also include Leaflet's required CSS as a link tag, also pulling from unpkg.\n ","pinned":false,"hidden":false,"mode":"md"},{"id":1022,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1026,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":3058,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1017,"value":"## Making your first map in Leaflet 🌿\nNow, let's get to making some maps. Here is an example of a map of Vancouver in Leaflet. Play around with the map in Leaflet and navigate through it.","pinned":false,"hidden":false,"mode":"md"},{"id":983,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1058,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":3531,"value":"//Here is the condensed code\n\nmapCondensed = {\n \n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n yield container;\n let map = L.map(container).setView([49.2527, -123.1207], 10.5);\n let baseLayer = L.tileLayer(\n 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', \n {\n attribution: '© OpenStreetMap contributors'\n })\n .addTo(map); \n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3529,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":3084,"value":"For example, this is how we define the following below (make sure to copy the quotation marks, this is HTML):\n\n- **```cartoAttr```** ```= '© OpenStreetMap, © CARTO'```\n\n- **```cartoLight```** = \t```'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png'```","pinned":false,"hidden":false,"mode":"md"},{"id":1290,"value":"FileAttachment(\"image.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1299,"value":"**Fig 2:** Some of the CartoDB basemaps listed on http://bl.ocks.org/Xatpy/raw/854297419bd7eb3421d0/","pinned":false,"hidden":false,"mode":"md"},{"id":1173,"value":"-----------","pinned":false,"hidden":false,"mode":"md"},{"id":1429,"value":"## Data on a map 🍃","pinned":false,"hidden":false,"mode":"md"},{"id":1745,"value":"Let's get into some of the different types of layers we can make on a map, specifically with the types of marks that can be created (points, lines, areas, and heatmaps)\n","pinned":false,"hidden":false,"mode":"md"},{"id":1137,"value":"-----\n### Mapping Layers on Leaflet's Maps: Polygons/Areas/Boundaries\nLeaflet can also display areas on the map. Let's show the location of [Grand Central Terminal](https://en.wikipedia.org/wiki/Grand_Central_Terminal) in New York City, by searching OpenStreetMap's geocoder for it and then displaying the returned [GeoJSON](http://geojson.org/) on the map.\n\nThe `grandCentral` cell takes care of loading the data asynchronously and the cell that displays the map doesn't have to concern itself with any async behavior - it just displays once the search result is complete.","pinned":false,"hidden":false,"mode":"md"},{"id":1161,"value":"grandCentral = {\n let response = await fetch('https://nominatim.openstreetmap.org/search.php?q=grand+central+station%2C+new+york&polygon_geojson=1&format=json');\n let json = await response.json();\n return json[0].geojson\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1163,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":1184,"value":"**What happened above:**\n1. Notice here how we're creating a new layer called `grandCentralLayer`, which takes in geoJSON info about the polygons, points, etc. that we want to mark off.\n\n2. We can set the attributes of our marked polygons similar to CSS; specifying `weight` and `color` of the line. We call the `.addTo(map)` function to add this layer on our map\n\n3. `grandCentralLayer.bindPopup('Grand Central Terminal')` binds a tooltip popup with the text 'Grand Central Terminal' to `grandCentralLayer`, directly connecting the geoJSON layer such that you can click on the polygon and see the tooltip.\n\n4. Lastly, `map.fitBounds(grandCentralLayer.getBounds())` fits the bounds of the polygon and map view.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1409,"value":"\n--------------------\n### Mapping Layers on Leaflet's Maps: More Areas\n\nHow about a choropleth of Vancouver's neighbouhoods showing population and density? Here, I've attached a GeoJSON file provided by the City of Vancouver's [Open Data Portal](https://opendata.vancouver.ca/explore/dataset/local-area-boundary/information/?disjunctive.name).","pinned":false,"hidden":false,"mode":"md"},{"id":1170,"value":"VanAreas = FileAttachment(\"VancouverAreaSize.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1372,"value":"I've also got a helper function called `densStyle` declared at the bottom of the notebook, that lets me reuse some of the styling for my maps\nAlso, I have a helper function called getDensColor to color the neighbourhoods based on the density.\n\n `function densStyle(feature) {`\n \n return { \n fillColor: getDensColor(feature.properties.density),\n weight: 2,\n opacity: .5,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.7\n };\n `}`\n","pinned":false,"hidden":false,"mode":"md"},{"id":3097,"value":"`function getDensColor(d) {`\n\n\t return d > .7 ? '#800026' :\n\t d > .6 ? '#BD0026' :\n\t d > .5 ? '#E31A1C' :\n\t d > .4 ? '#FC4E2A' :\n\t d > .3 ? '#FD8D3C' :\n\t d > .2 ? '#FEB24C' :\n\t d > .1 ? '#FED976' :\n\t '#FFEDA0';\n\t}\nNow, try clicking on the neighbourhoods to see more information about its name and population","pinned":false,"hidden":false,"mode":"md"},{"id":3075,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":3080,"value":"Let's try building the above map now by adding the layer.\n\nAgain, remember the following:\n1. **```L.geoJson(VanAreas, {style: densStyle})```**\n - Instantiate a new geoJSON layer that accepts ```VanAreas``` data, and also return an object with predefined style using ```densStyle```\n\n2. **```.bindPopup(d => d.feature.properties.NAME + '
Pop: ' + d.feature.properties.population)```**\n - bind Popup tooltip with name of neighbourhood, and population\n - _Note: ```d => d.feature....``` is arrow notation. It's shorthand equivalent to saying ```function(d){return d.feature.properties.NAME......}```_\n\n3. **```.addTo(map);```** \n - Add layer to map\n\n\n#### Try this: Add the layer below to the map so that it looks like the one above","pinned":false,"hidden":false,"mode":"md"},{"id":3081,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":1240,"value":"-----\n### Mapping Layers on Leaflet's Maps: Streets (Lines)\n\nWe can also visualize **lines** on our maps for streets. This map shows one-way streets in Vancouver. I took this from the One-Way street dataset on the City of Vancouver's [Open Data Portal](https://opendata.vancouver.ca/explore/dataset/one-way-streets/information/) (go to the Export tab to pull the data as GeoJSON). Notice how I can click on the street for the name to appear.\n\nThis can be done in `bindPopup` by returning `Layer.feature.properties.hblock` from `vanOneWays'` JSON structure, which shows the street block name.\n\nI also have a couple of helper functions and variables: `streetUses` fetches me the different types of street uses from the JSON array; and `getStreetUsageColor` is like `getDensColor()` in that it categorically defines our street color based on category (red for arterial, blue for residential). `streetStyle` sets the weight and opacity of the lines, and uses `getStreetUsageColor` to get the color","pinned":false,"hidden":false,"mode":"md"},{"id":1888,"value":"vanOneWays","pinned":true,"hidden":false,"mode":"ojs"},{"id":1890,"value":"vanStreets","pinned":true,"hidden":false,"mode":"ojs"},{"id":1864,"value":"//I defined a helper function that fetches me the types of street uses listed in the JSON\n\n//we are using some js shorthand magic here, by first mapping only the streetuses to an array\n//then we use [...new Set(ourArray)] to get uniques \nstreetUses = [...new Set(vanOneWays.features.map(function(d){return d.properties.streetuse}))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1709,"value":"//Simple function for getting street usage color: if it's Arterial, use red, or else blue\nfunction getStreetUsageColor(d) {\n if (d == 'Arterial') \n return 'red';\n else if (d == 'Residential') \n return 'blue';\n else \n return 'black'\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3136,"value":" //Street stylizing: similar to the density map, I made a function that returns red for artery streets, blue for residential streets, and black for other categories\n\n\n\nstreetStyle = function(d){\n return {\n weight: 2, \n color: getStreetUsageColor(d.properties.streetuse),\n opacity: .9\n }}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1605,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1892,"value":"#### Try this ####\n- Replicate the map above\n- Replace `vanOneWays` with the `vanStreets` dataset that shows all streets","pinned":false,"hidden":false,"mode":"md"},{"id":3155,"value":"VanStreetMap = {\n\n let width = 600;\n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n yield container;\n // Did not use setView because we are using \"fit bounds\" to get the polygons to determine this\n let map = L.map(container);\n\n //add base layer\n //We can set the minZoom and maxZoom levels of the base layer, but in this case the default is fine\n let baseLayer = L.tileLayer(cartoLight, {\n attribution:cartoAttr,\n }).addTo(map); \n\n\n //TO-DO: ADD A NEW LAYER HERE THAT SHOWS THE ONE WAY STREETS AND ARTERIES using vanOneWays\n //for style, I do something similar here where I pass in an inline function for style\n //{style: someStyleFunction} has to be passed in with the key 'style' here\n\n let VanStreetLayer = L.geoJson(vanStreets, {style: streetStyle})\n .bindPopup(function (d){return d.feature.properties.hblock})\n .addTo(map)\n\n map.fitBounds(VanStreetLayer.getBounds())\n \n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3339,"value":"vanOneWays","pinned":true,"hidden":false,"mode":"ojs"},{"id":1431,"value":"\n-----\n### Mapping Points on Leaflet's Maps: Locations (Points/Circles)\n\nThis map shows community gardens and fruit trees in Vancouver. I also took this from Vancouver's [Open Data Portal](https://opendata.vancouver.ca/explore/dataset/community-gardens-and-food-trees/information/). When I expand on the `features` array, we see the coordinates are represented as two points (lat & long).\n\nBy default, Leaflet gives you these blue pins to show points. Click on them to see more info about the tooltips.\n\nAs well, we can also drop in our own pins (and even make custom pins. The [Leaflet Tutorial](https://leafletjs.com/examples/quick-start/) has more information about how you could do that. For now, try uncommenting the section specified in the code below, then scroll into the Downtown Vancouver area of the map and see what is different.","pinned":false,"hidden":false,"mode":"md"},{"id":1749,"value":"vanFoodGardens","pinned":true,"hidden":false,"mode":"ojs"},{"id":1752,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":1786,"value":"[Points are handled differently than lines and polygons in Leaflet](https://leafletjs.com/examples/geojson/). By default simple markers are drawn for GeoJSON Points, as we just saw above. We can alter this by passing a `pointToLayer` function in a GeoJSON options object when creating the GeoJSON layer. This function is passed a `LatLng` and should return an instance of ILayer, in this case likely a `Marker` or `CircleMarker`.\n\nHere we're using the pointToLayer option to create a CircleMarker:\n\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1797,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs"},{"id":1791,"value":"While there's more complex ways of making point layers in leaflet with D3, having to learn the core base of D3 is quite complicated and might not be the best use of your time for this assignment. \nSometimes, you'll see Leaflet examples using D3 (and Lyn's [notebook here](https://observablehq.com/@drlynb/leaflet-and-d3-interactive-overlays) has an example of how to add points using D3 to leaflet. However, the method above is meant to be a bit less dense than D3.","pinned":false,"hidden":false,"mode":"md"},{"id":3506,"value":"**Try this: Take the disabled parking spots and overlay them on the map**\n\nWe are going to borrow from the previous map above, but modify it to use the `dparking` dataset. \n\nWe also want to add a tooltip that will show relevant information about each parking location. Let's pull the `LOCATION`, `DESCRIPTN`, and `NOTES` fields from our geoJSON object. ","pinned":false,"hidden":false,"mode":"md"},{"id":3511,"value":"dparking","pinned":true,"hidden":false,"mode":"ojs"},{"id":3508,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs"},{"id":3185,"value":"-----","pinned":false,"hidden":false,"mode":"md"},{"id":1811,"value":" ### Leaflet Heatmap\n\n Let's move to creating a heatmap in Leaflet. We'll be using a dataset of Vancouver crimes. The dataset `vanCrime` has had a lot of filtering and processing done on it with some [helper functions](https://observablehq.com/@krispybird/iat355-tutorial-7-maps-geocoding-with-leaflet-tutorial?collection=@krispybird/iat-355-s22-tutorials-exercises#cell-2485) at the bottom. The array `crimePoints` is a nested array of 3 values: lat, long, and density. ","pinned":false,"hidden":false,"mode":"md"},{"id":2051,"value":"vanCrime","pinned":true,"hidden":false,"mode":"ojs"},{"id":2026,"value":"crimePoints","pinned":true,"hidden":false,"mode":"ojs"},{"id":2085,"value":"FilteredGeoCrimes","pinned":true,"hidden":false,"mode":"ojs"},{"id":2217,"value":"We also have another function for the neighborhoods that is going to have a softer overlay\n\n```function neighborhoodStyle(feature) {```\n \n `return {` \n \n fillColor: '#999999',//getDensColor(feature.properties.density),\n weight: 2,\n opacity: .5,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.3\n \n `}\n }\n","pinned":false,"hidden":false,"mode":"md"},{"id":2067,"value":"#### Adding the heatmap plugin\nWe use a plugin called [`heatLayer`](https://leafletjs.com/plugins.html#heatmaps) that allows us to make heatmaps. Leaflet has a collection of plugins to add additional functionality [here](https://leafletjs.com/plugins.html). \n\nTo add the heatmap plugin, we used this code below in the appendix:\n> `heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)`\n\n`heatLayer` takes an a nested array of lat/long/density values, which is why we did some processing to create `crimePoints`\n\nThe code is as follows:\n\n> `let crimeLayer = heatLayer(crimePoints).addTo(map);`\n\n**Important: ** You will notice that we don't use `fitBounds()` and `getBounds()` in the function below. For some reason, Leaflet decided that this is a ['feature' on Leaflet's part for whatever reason](https://github.com/Leaflet/Leaflet.heat/issues/112). We will have to manually define our initial map view with `setView()` again.","pinned":false,"hidden":false,"mode":"md"},{"id":2273,"value":"**Try this: ** Uncomment the neighborhood lines layer","pinned":false,"hidden":false,"mode":"md"},{"id":1977,"value":"vanCrimeMap = {\n\n let width = 600;\n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n \n yield container;\n\n //Use setview when making heatmaps, because heatLayer doesn't have a getBounds() method\n let map = L.map(container).setView([49.2527, -123.1207], 10.5);\n\n //add base layer\n let baseLayer = L.tileLayer(cartoLight, {\n attribution: cartoAttr,\n }).addTo(map); \n\n let heatStyle = {\n radius: 10,\n blur: 15,\n maxZoom: 10,\n max: 4.0\n }\n\n //our heatmap layer\n let crimeLayer = heatLayer(crimePoints, heatStyle).addTo(map);\n\n //Of course, we can always add more layers on top, such the neighborhood boundaries\n //TO-DO: LET'S TRY THAT NOW. \n let VanAreasLayer = L.geoJson(VanAreas, {style: neighbourhoodStyle})\n .bindPopup(d => d.feature.properties.NAME + '
Pop: ' + d.feature.properties.population)\n .addTo(map);\n\n\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2165,"value":"### Adding layers to maps\nOf course, we can always add additional layers on top of our maps. Try uncommenting the lines above in the chart\n\n**NOTE:** Ordering matters! Leaflet layers stack on top of each other, so the top layer will always take precedent when interacting with the map. Look at this example of a map with the `points` layer representing garden locations, and the `area` layer representing neighbourhoods. Click on the map and try to interact with the points to get details of food garden locations.\n\nNow, try moving `VanAreasLayer` so that it is bound to the map before `VanPointsLayer`. Can you click on the points now to get more info about the food gardens?","pinned":false,"hidden":false,"mode":"md"},{"id":2905,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs"},{"id":2923,"value":"### Adding a Legend to Leaflet","pinned":false,"hidden":false,"mode":"md"},{"id":2926,"value":"Adapted from [this defunct example](https://observablehq.com/@rustyconover/2020-04-22-apparent-temperature-visualized-with-h3-leaflet) for an Observable specific way to do legends. [Leaflet also has an interactive Choropleth example](https://leafletjs.com/examples/choropleth/) ~~[a legend created in Observable](https://observablehq.com/@rustyconover/2020-04-22-apparent-temperature-visualized-with-h3-leaflet)~~. ^{^{Update Oct 2022: The Observable example has broken, but the CSS definitions for the legends still work for Observable notebooks}}\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":3202,"value":"This is the CSS defining the legend\n","pinned":true,"hidden":false,"mode":"html"},{"id":3199,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs"},{"id":3004,"value":"\n---\n## CHALLENGES:\n\n1) Create a map of your own. Go onto the [Open Data Portal](https://opendata.vancouver.ca/pages/home/), or use your project dataset to start creating your map.","pinned":false,"hidden":false,"mode":"md"},{"id":3006,"value":"//Try creating a map here\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":949,"value":"$40","pinned":false,"hidden":false,"mode":"md"},{"id":2485,"value":"## Appendix: Nest of Code","pinned":false,"hidden":false,"mode":"md"},{"id":893,"value":"### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":315,"value":"function isEmpty(obj) {\n for (var prop in obj) {\n return false;\n }\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"epochParse = d3.timeParse(\"%Q\");//ms in unix epochs","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"timeParse = d3.timeParse(\"%m/%d/%y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"dateFormat = d3.timeFormat(\"%m/%d/%y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"### Vega Signal Listeners and Event Variables","pinned":false,"hidden":false,"mode":"md"},{"id":312,"value":"mutable type = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"bSelection = {\n if(isEmpty(type)){\n return Array.from(new Set(vanCrime2.map(d => d.Offense)))\n } else {\n return type\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"mutable time = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"TSelection = {\n if(isEmpty(mutable time)) {\n return d3.extent(vanCrime2, d => dateFormat(timeParse(d.Date)))\n } else {\n return time.Date.map( d => dateFormat(epochParse(d)))\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"//We are writing the event listener function for each feature in our geojson layer\n//when each of these events are fired, a callback function is triggered\n//more interaction (such as hover) is covered here: https://leafletjs.com/examples/choropleth/\n\nfunction featureEvents(feature, layer) {\n layer.on({\n click: whenClicked, //callback functions\n \n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"//We update our data in the function using mutable. This overrides observables defaults so we can push data from within //function scope globally\nwhenClicked = (event) => {\n mutable nHood = event.target.feature.properties.NAME\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":509,"value":"//Mutable overrides Observable's defaults state, so we can push data from within function scope globally\nmutable nHood = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"mapSelection = {\n if(nHood == null ){\n return Array.from(new Set(vanCrime2.map(d => d.NEIGHBOURHOOD))) //Set is a new datastructure in ES6 -> only unique values\n } else {\n return [nHood]\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":848,"value":"selectedNeighbourhoods = selectedNames(mapSelection);","pinned":true,"hidden":false,"mode":"ojs"},{"id":832,"value":"selectedNames = function(arr){\n let newstr = \"\";\n let newstr2=\"\";\n let i=0;\n if (arr.length == 25)\n {\n return (\"All Neighbourhoods\")\n }\n else\n {\n // newstr2 = arr[0];\n// newstr = arr[0];\n // for(i=1;i++;iFullscreen`;\n button.onclick = () => button.parentElement.nextElementSibling.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2829,"value":"------------","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"md` ### Libraries and Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"import {fromColumns, printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"import { toc } from \"@nebrius/indented-toc\" // This component generates the Table of Contents","pinned":false,"hidden":false,"mode":"ojs"},{"id":2419,"value":"VegaLite = require('vega-lite@2.0.0-beta.2/build/vega-lite.min.js') \n//Vegalite = require(\"@observablehq/vega-lite@0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2336,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"embed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"mutable selectedMap = [\"warmgreys\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2825,"value":"------------","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"### Helper Functions for Styling Maps","pinned":false,"hidden":false,"mode":"md"},{"id":1450,"value":"osmAttr = '© OpenStreetMap contributors'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1478,"value":"cartoAttr = '© OpenStreetMap, © CARTO'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"osMap = \t'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1486,"value":"cartoLight = \t'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1488,"value":"cartoDark = \t'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png'","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"function getDensColor(d) {\n\t return d > .7 ? '#800026' :\n\t d > .6 ? '#BD0026' :\n\t d > .5 ? '#E31A1C' :\n\t d > .4 ? '#FC4E2A' :\n\t d > .3 ? '#FD8D3C' :\n\t d > .2 ? '#FEB24C' :\n\t d > .1 ? '#FED976' :\n\t '#FFEDA0';\n\t}","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"function getPopColor(d) {\n\t return d > 50000 ? '#800026' :\n\t d > 45000 ? '#BD0026' :\n\t d > 40000 ? '#E31A1C' :\n\t d > 30000 ? '#FC4E2A' :\n\t d > 25000 ? '#FD8D3C' :\n\t d > 20000 ? '#FEB24C' :\n\t d > 10000 ? '#FED976' :\n\t '#FFEDA0';\n\t}","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"function style(feature) {\n return {\n fillColor: getDensColor(feature.properties.density),\n weight: 2,\n opacity: .5,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.7\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"function popStyle(feature) {\n return {\n fillColor: getPopColor(feature.properties.population),\n weight: 2,\n opacity: 1,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.7\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2697,"value":"function neighbourhoodStyle(){\n return {\n fillColor: '#999999',\n weight: 2,\n opacity: .5,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.2,\n }};","pinned":true,"hidden":false,"mode":"ojs"},{"id":2833,"value":"------------","pinned":false,"hidden":false,"mode":"md"},{"id":1468,"value":"### Datasets and Related Arrays Used","pinned":false,"hidden":false,"mode":"md"},{"id":1585,"value":"vanFoodGardens = FileAttachment(\"community-gardens-and-food-trees.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"vanAreas = FileAttachment(\"VanAreas.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"vanAreaValues2 = d3.json(\"https://www.sfu.ca/~lyn/data/Urban/VancouverAreaSizeTopo.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1880,"value":"vanStreets = FileAttachment(\"public-streets.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1886,"value":"vanOneWays = FileAttachment(\"one-way-streets.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3501,"value":"dparking = d3.json(\"https://gist.githubusercontent.com/drlynb/6dffc7ccdaf774ee031dc46c909721b2/raw/8a8b8fb6b6b60e66980cbb9f897b198bac23dbf7/testparking.geojson\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"vanCrime = FileAttachment(\"vanCrime.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"vanCrime2 = {\n let i=vanCrime.features.length;\n let j=0;\n let k=0;\n let temp ={};\n let newCrime=[];\n for(k=0;k\n feature.geometry.coordinates.slice().reverse().concat([0.1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":642,"value":"function deepCopy(arr)\n{\n let newArr = JSON.parse(JSON.stringify(arr));\n return(newArr)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2836,"value":"------------","pinned":false,"hidden":false,"mode":"md"},{"id":395,"value":"md` ### Filtered Map Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"vanCrimeFiltered = vanCrime.features.filter(d => bSelection.includes(d.properties.Offense))\n .filter(d => timeParse(d.properties.Date) >= timeParse(TSelection[0]) &&\n timeParse(d.properties.Date) <= timeParse(TSelection[1]))\n .filter(d => mapSelection.includes(d.properties.NEIGHBOURHOOD))","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"FilteredGeoCrimes = {\n return new Object({type: \"FeatureCollection\", features: vanCrimeFiltered})\n }","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W41","stdlib":"1","titling":"auto"}