2e:null 2f:["$","title",null,{"children":"Exploring leaflet and embedding visualizations: IAT 355 Tutorial | drlynb | Observable"}] 34:T565,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 "map") 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 // 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 (used to get current size of the div) // 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 and add a layer to it. let map = L.map(container).setView([49.2527, -123.1207], 11.5); // initializes the map, sets zoom & coordinates let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); //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. }35:T680,D3VanAreasMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([49.2527, -123.1207], 11.5); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); //initialize svg to add to map L.svg().addTo(map) //Create selection using D3 const overlay = d3.select(map.getPanes().overlayPane) const svg = overlay.select('svg') // create a group that is hidden during zooming const g = svg.append('g').attr('class', 'leaflet-zoom-hide') // convert x y coordinates to current coordinates in leaflet const projectPoint = function(x, y) { const point = map.latLngToLayerPoint(new L.LatLng(y, x)) this.stream.point(point.x, point.y) } const random255 = () => Math.round(Math.random() * 255) const getColor = () => `rgb(${random255()},${random255()},${random255()})` // Projection const projection = d3.geoTransform({point: projectPoint}) // function to create attributes of path const pathCreator = d3.geoPath().projection(projection) const countryPaths = g.selectAll('path') .data(VanAreas.features) .enter() .append('path') .attr('opacity', 0.3) // .attr('stroke', 'black') .attr('stroke', getColor) .attr('stroke-width', 2.5) // Function to place svg based on zoom const onZoom = () => countryPaths.attr('d', pathCreator) // initialize positioning onZoom() // reset whenever map is moved map.on('zoomend', onZoom) }36:[{"id":"e8a1c62e61765cd84ab67631082775bd53395bcd4f1a6d6fd19f74e236194b9e9606ab4b04114ed5024d04dfffa5a7e1685f0cdf4707636dc571a8e6eef584a8","href":"https://static.observableusercontent.com/files/e8a1c62e61765cd84ab67631082775bd53395bcd4f1a6d6fd19f74e236194b9e9606ab4b04114ed5024d04dfffa5a7e1685f0cdf4707636dc571a8e6eef584a8","name":"VancouverAreaSize.json","type":"application/json","lastModified":1573849765746.728,"size":52857}] 32:{"id":"5e637b852251b983","slug":"exploring-leaflet-and-embedding-visualizations-iat-355-tu","title":"Exploring leaflet and embedding visualizations: IAT 355 Tutorial","thumbnail":"ce59a21170d36e4d5477113b2b0d073cea5787fde326a9c53825b72ebe22b0b1","access_level":"public","create_time":"$D2019-11-15T20:29:25.746Z","update_time":"$D2019-11-15T20:35:33.767Z","view_time":null,"first_public_time":"$D2019-11-15T20:29:59.430Z","fork":{"id":"a0bf4019b473e62c","slug":"introduction-to-leaflet-and-d3","title":"Introduction to leaflet and D3","owner":{"id":"bb76b04514ce3a89","login":"sfu-iat355","name":"IAT355"}},"stars":2,"starred":false,"owner":{"type":"team","id":"4a0762a387ec748f","login":"drlynb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dd242441d5e4ed40bfe5b09336f04460a3a4974825e2a9cb9088ade14a49fc15","tier":"starter_2024"},"version":173,"publish_version":173,"role":null,"authored":false,"authors":[{"type":"individual","id":"90a5d909f6de8793","login":"drlynb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dd242441d5e4ed40bfe5b09336f04460a3a4974825e2a9cb9088ade14a49fc15","tier":null}],"members":[{"type":"individual","id":"90a5d909f6de8793","login":"drlynb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dd242441d5e4ed40bfe5b09336f04460a3a4974825e2a9cb9088ade14a49fc15","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Exploring leaflet and embedding visualizations: IAT 355 Tutorial","cells":[{"id":0,"value":"md`# Exploring leaflet and embedding visualizations: IAT 355 Tutorial`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`# Leaflet\n\n[Leaflet](http://leafletjs.com/) is a library for embedding maps on websites. Up until now, we have used vega which plots spatial files on a blank canvas and has limited interaction. There are no background tiles which have to change based on zoom level and what part of the map is in view. In order to utilize a map that supports zooming and panning (like in google maps), we have to utilize a tile map server that provides these data. Leaflet automatically allows users to connect to tile map servers and other GIS data servers to create maps where user can zoom, pan, and add interactive layers on top. 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.\n\n## 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.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md` ## Creating a base map\nHere we create a simple that uses openstreetmaps as a tile server. You can find other base tile maps that suit your needs [here]('https://leaflet-extras.github.io/leaflet-providers/preview/'). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md` ## Adding Data to Map\nLet's take out vancouver neighbourhoods and add them as a layer to leaflet. Unfortunately, leaflet does not support TopoJson, so you can either convert your file to GeoJson or follow this [example]('http://bl.ocks.org/hpfast/2fb8de57c356d8c45ce511189eec5d6a'). (It's easy to convert from TopoJson to GeoJson in mapshaper.org ). We will also use a new feature in observable [file attachment]('https://observablehq.com/@observablehq/file-attachments'), which allows you to upload files to be hosted in your notebook as long as they are below 15 MB. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"VanAreas = FileAttachment(\"VancouverAreaSize.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"VanAreasMap = {\n\n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n \n yield container;\n \n let map = L.map(container);\n let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap contributors'\n }).addTo(map); \n \n let VanAreasLayer = L.geoJson(VanAreas, { //instantiates a new geoJson layer using built in geoJson handling\n weight: 2, //Attributes of polygons including the weight of boundaries and colors of map.\n color: \"#488\",\n }).bindPopup(function (Layer) { //binds a popup when clicking on each polygon to access underlying data\n return Layer.feature.properties.NAME;\n }).addTo(map); //Adds the layer to the map.\n \n map.fitBounds(VanAreasLayer.getBounds()); //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\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`## Leaflet + D3.js\nWe can also harness the power of D3 as a layer on top of leaflet. This allows us to use the power and expressiveness of d3.js in Leaflet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md` ## Leaflet Plugins\n\nMost Leaflet plugins are written in a style that makes them easy to include as \\`