2c:null 2d:["$","title",null,{"children":"Learning Leaflet | Rahul Bhargava | Observable"}] 32:T43f,{ // set up the basic map let parent = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield parent; let map = L.map(parent).setView([42.3250, -71.0600], 11); // higher numbers are more zoomed in let osmTileLayer = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo( map ); // make a lookup table indexed by GEOID10, so we can go from that ID to the total housing count let housingByGeoId = new Map(housingData.map(row => [row['GEO.id2'], row])); // this is a *dynamic* style generator, where the fill color is based on the total housing count // and the color scale we built earlier let styleGenerator = feature => { let style = { "color": "rgb(100, 100, 100)", "fillColor": colorScale(housingByGeoId.get(feature.properties.GEOID10).HD01_VD01), "opacity": 1, "weight": 2, "fillOpacity": 0.7, } return style; }; L.geoJSON(censusTracts, {style: styleGenerator}).addTo(map); }33:[{"id":"4879e45e113b20f473d8e01bb7f16af9e656d4165e53768745a20e0ead5f851783274ff64b9de20b4415c22f45edf546cfa10ab283eb449e3604d047f4e3e975","href":"https://static.observableusercontent.com/files/4879e45e113b20f473d8e01bb7f16af9e656d4165e53768745a20e0ead5f851783274ff64b9de20b4415c22f45edf546cfa10ab283eb449e3604d047f4e3e975","name":"boston-neighborhoods.json","type":"application/json","lastModified":1614783147014.09,"size":1450146},{"id":"0978ae2b7f9e548738e74b9b074ed8466e97b7e029860b924b982db9c773c8d02587ff2189eb4a44a51cfd0892e7222cc08145abcd0a2ee4139a9f872e501134","href":"https://static.observableusercontent.com/files/0978ae2b7f9e548738e74b9b074ed8466e97b7e029860b924b982db9c773c8d02587ff2189eb4a44a51cfd0892e7222cc08145abcd0a2ee4139a9f872e501134","name":"boston-census-tracts-2010@1.json","type":"application/json","lastModified":1614785045260.294,"size":1725095},{"id":"439d3998e8e0556daa57c74d924b32a3f69c70eb3e13d50acbef2271b7a2a5272b32ad084ad86d6290b2dea1de2269d745e4643f5e43112a3e16077049575f32","href":"https://static.observableusercontent.com/files/439d3998e8e0556daa57c74d924b32a3f69c70eb3e13d50acbef2271b7a2a5272b32ad084ad86d6290b2dea1de2269d745e4643f5e43112a3e16077049575f32","name":"ACS_13_5YR_B25003_with_ann@1.csv","type":"text/csv","lastModified":1614785604294.486,"size":22145}] 30:{"id":"437946252f102276","slug":"learning-leaflet","title":"Learning Leaflet","thumbnail":"93e61053b11fa207f216a930ecefa83113ff37fa15c9f4c9f79de8333147589e","access_level":"public","create_time":"$D2021-03-03T14:12:32.786Z","update_time":"$D2021-03-09T21:21:21.845Z","view_time":null,"first_public_time":"$D2021-03-03T16:22:10.087Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"ead83bf8946a989c","login":"rahulbot","name":"Rahul Bhargava","avatar_url":"https://avatars-next.observableusercontent.com/ed7a791c6c1530a27392a6ff7e6b4b2c1cfb42b1d7f1cbbb1221da7056329d3c","tier":"starter_2024"},"version":342,"publish_version":342,"role":null,"authored":false,"authors":[{"type":"individual","id":"23c344d271cff546","login":"rahulbot","name":"Rahul Bhargava","avatar_url":"https://avatars-next.observableusercontent.com/ed7a791c6c1530a27392a6ff7e6b4b2c1cfb42b1d7f1cbbb1221da7056329d3c","tier":null}],"members":[{"type":"individual","id":"23c344d271cff546","login":"rahulbot","name":"Rahul Bhargava","avatar_url":"https://avatars-next.observableusercontent.com/ed7a791c6c1530a27392a6ff7e6b4b2c1cfb42b1d7f1cbbb1221da7056329d3c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":27,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learning Leaflet","cells":[{"id":0,"value":"md`# Learning Leaflet\n\n[Leaflet](http://leafletjs.com/) is the go-to library for suing custom maps on your website. It lets you pull tiles from a 3rd party site, render them, and add more layers and interactive elements. This notebook introduces Leaflet and some initial ways to use it. This introduction borrows from [other ones on Observable](https://observablehq.com/@sfu-iat355/introduction-to-leaflet-and-d3/2) and [Boston Data collected/published by DJ Hartman](https://github.com/dj/boston).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`## Bring in the Code\n\nYou need to bring the Leaflet JS and CSS code into Observable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"html` `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"L = require('leaflet@1.7.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`## Your First Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`Leaflet doesn't include any particular map tiles of its own, instead you connect it to a tile server that it fetches tiles from. [OpenStreetMap](https://www.openstreetmap.org/) is a good place to start for free community-created maps, but there are loads of [other map tile servers available](https://wiki.openstreetmap.org/wiki/Tile_servers). Note that Leaflet uses Spherical Mercator projection by default (at time of writing).` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"{\n // Make a container in the Observable DOM to hold the map\n let parent = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });\n // Make sure Observable renders the parent container so Leaflet can figure out it's size\n yield parent;\n // Create a map centered on Northeastern's campus\n let map = L.map(parent).setView([42.3370, -71.0892], 15); // higher numbers are more zoomed in\n let osmTileLayer = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap'\n }).addTo( map );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"html`Easy Challenge: OSM doesn't have the prettiest default styles! Visit the list of map tile servers linked above and try to swap in a different base tile layer.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"md`## Add Some Points\nOne of the first things you might want to do is place mark some specific spots on the map with pins. Leaflet supports this via what they call \"markers\". You can add a marker by specifying a latitude and longitude of where to place it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"{\n // set up the basic map\n let parent = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });\n yield parent;\n let map = L.map(parent).setView([42.3380, -71.0898], 17); // higher numbers are more zoomed in\n let osmTileLayer = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap'\n }).addTo( map );\n // add a marker for the School of Journalism\n let marker = L.marker([42.3377,-71.0908]).addTo(map);\n // and label it using the Leaflet Popups\n marker\n .bindPopup(\"School of Journalism
Northeastern University.\") // \"bind\" basically means \"connect\"\n .openPopup(); // tell it to open by default so no click is required\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"html`Easy Challenge: Add a marker for another spot on campus that you think it important!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"html`Medium Challenge: Pins are boring! Swap out the marker icon for a custom NU logo of some type. Read the custom marker icon tutorial from Leaflet for instructions to follow.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`## Draw Some Polygons\n\nAnother core concept of mapping is the idea of adding \"shape files\" on top of your map - a layer of polygons demarcating the physical space in some way that makes sense to us. We'll use a file with outlines of various neighborhoods of Boston (from [DJ Harman's repo](https://github.com/dj/boston))`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"bostonNeighborhoods = FileAttachment(\"boston-neighborhoods.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"{\n // set up the basic map\n let parent = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });\n yield parent;\n let map = L.map(parent).setView([42.3250, -71.0600], 11); // higher numbers are more zoomed in\n let osmTileLayer = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap'\n }).addTo( map );\n // the geoJson file has outlines of all the neighborhoods\n let myStyles = {\n \"color\": \"rgb(50, 50, 50)\",\n \"fillColor\": \"rgb(100, 100, 100)\",\n \"opacity\": 0.2,\n };\n L.geoJSON(bostonNeighborhoods, {style: myStyles}).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"html`Easy Challenge: Edit the myStyles variable to change the colors of this hard-to-read map.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"html`Medium Challenge: Sometimes you don't want to show everything in your geoJSON file. Use the filter feature to only show the neighborhoods that are over by the airport (you can filter by name). Tips: dig into the bostonNeighborhoods JSON object above to find where the name is; and read the intro to filtering on the Leaflet geoJSON tutorial.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`## Make a Choropleth\n\nOf course, once you can draw polygons you probablty want to do something with them. Let's make a colored choropleth map with some census data on home ownership and rental rates in the area. First we load up some geoJSON of Boston census tracts, then we load up 2010 Census housing data ([docs](https://github.com/dj/boston/blob/master/data/ACS_13_5YR_B25003_metadata.csv)), and we build a color scale based on the column with total housing stock ([reference](https://observablehq.com/@d3/quantile-choropleth)).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"censusTracts = FileAttachment(\"boston-census-tracts-2010@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"housingData = FileAttachment(\"ACS_13_5YR_B25003_with_ann@1.csv\").csv();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"colorScale = d3.scaleSequentialQuantile([...housingData.map(tract => parseInt(tract['HD01_VD01']))], d3.interpolateBlues)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"html`Easy Challenge: Change the stule to reduce the border with and be a little more see through.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"html`Medium Challenge: Check out the census data docs linked to above and change the map to show rental housing stock.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"html`Hard Challenge: Create side by side maps of ownership vs. rental counts, and normalize them as percentages of total ousing stock.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"