2b:null 2c:["$","title",null,{"children":"Leaflet and D3 Interactive Overlays | drlynb | Observable"}] 31:T56e,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 until it // 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. }32:T598,md` ## Adding a data layer to Map Let's take our vancouver neighbourhoods and add them as a layer to leaflet. Also, let's constrain how much the map can zoom out or in. Finally, we can add a simple popup on the VanAreas layer that simply shows the neighbourhood name in a simple tooltip. ### Leaflet interactions Note there are some subtleties to how we added this layer and allowed a minimal interaction in it. This is added as a map (Leaflet) layer, and so any interactions on it are controlled by Leaflet. In this map above, the only interaction is a minimal popup that shows the neighbourhood name, and the standard Leaflet bindPopUp() function sets both selection and the value to display.

Leaflet allows you to retrieve data around the feature selected in a layer using ~~~ bindPopup(function (Layer) { //binds a popup when clicking on each polygon to access underlying data return Layer.feature.properties.NAME; ~~~ Note that we set this as a selection and not a hover interaction, and that the interaction only works on the vanAreas layer and not the underlying base layer. This has some limitations:

we have to rely on understanding Leaflet selection options;
it's difficult to select multiple items concurrently; and
we cannot export the selected objects to other views to support view integration, brushing and linking.

`33:T46b,VanAreasMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container, { maxZoom: 16, minZoom: 12 }); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); let VanAreasLayer = L.geoJson(VanAreas, { //instantiates a new geoJson layer using built in geoJson handling //Attributes of polygons including the weight of boundaries and colors of map. weight: 2, color: "#432", fillOpacity: .05 }).bindPopup(function (Layer) { //binds a popup when clicking on each polygon to access underlying data return Layer.feature.properties.NAME; }).addTo(map); //Adds the layer to the map. 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 }34:T491,viewof VanAreasMap1 = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container, { maxZoom: 16, minZoom: 12 }); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); let VanAreasLayer = L.geoJson(VanAreas, { //instantiates a new geoJson layer using built in geoJson handling //Attributes of polygons including the weight of boundaries and colors of map. weight: 2, color: "#432", fillOpacity: .05, onEachFeature: areaClick }).bindPopup(function (Layer) { //binds a popup when clicking on each polygon to access underlying data return Layer.feature.properties.NAME; }).addTo(map); //Adds the layer to the map. 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 }35:T874,Dots = { //define our map size const width = 600 const height = 400 // This is a Observables specific convenience method which creates an SVG in the DOM. const svg = d3.select(DOM.svg(width, height)) //projection this projects out points into space and fits the viewport based on const projection = d3.geoMercator().fitExtent([[50,50], [width-50, height-50]], Wcities) ; const points = svg.selectAll('circle')//Selects all circles (haven't been created yet, I know it's confusing) .data(Wcities.features) //loads the data we need - In this case our flat array of objects of features .join('circle') //creates a circle for each element in the array .attr("fill", "green") // colors it blue .attr("cx", d => projection(d.geometry.coordinates)[0]) // forEach element takes the coordinates and *projects* .attr("cy", d => projection(d.geometry.coordinates)[1]) // then we index this array for the long(x) and lat(y) .attr("r", 5) //radius of the circle .on('mouseover', function() { //function to add mouseover event d3.select(this).transition() //D3 selects the object we have moused over in order to perform operations on it .duration('150') //how long we are transitioning between the two states (works like keyframes) .attr("fill", "red") //change the fill .attr('r', 10) //change radius }) .on('mouseout', function() { //reverse the action based on when we mouse off the the circle d3.select(this).transition() .duration('150') .attr("fill", "steelblue") .attr('r', 5) }); //Add text description for each city const text = svg.selectAll('text') .data(Wcities.features) .join('text') .attr("font-size", '9') .attr("dy", 3) //shift on y-axis to align .attr("x", d => projection(d.geometry.coordinates)[0]+5) //Offset to make it visible .attr("y", d => projection(d.geometry.coordinates)[1]) .text(d => d.properties.Name) //Set teh text according to data return svg.node(); }36:T9ef,WesternCanadianCities2 = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([53.2527, -123.1207], 5).fitBounds(L.geoJson(Wcities).getBounds()); 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); const overlay = d3.select(map.getPanes().overlayPane); //const svg = overlay.select('svg'); const svg = overlay.select("svg"); const w = overlay.node().getBoundingClientRect().width; const h = overlay.node().getBoundingClientRect().height; const g1 = svg.append("g").attr("class", "leaflet-zoom-hide") .attr("width", w) .attr("height", h); const Dots = g1.selectAll('circle') .data(Wcities.features) .join('circle') .attr("fill", "purple") //Leaflet has to take control of projecting points. Here we are feeding the latitude and longitude coordinates to leaflet so that it can project them on the coordinates of the view. Notice, we have to reverse lat and lon. Finally, the returned conversion produces an x and y point. We have to select the the desired one using .x or .y .attr("cx", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x) .attr("cy", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) .attr("r", 5); const text = svg.selectAll('text') .data(Wcities.features) .join('text') .attr("font-size", '9') .attr("dy", 3) //shift on y-axis to align .attr("x", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x+5) //Offset to make it visible .attr("y", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) .text(d => d.properties.Name) //Set teh text according to data const update = () => Dots .attr("cx", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x) .attr("cy", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) ; map.on("zoomend", update); // return svg.node(); }37:T513,md` ### Adding d3 interactions to Leaflet The previous map has no interaction, and the real motivation to use d3 is the rich interactions it supports. But note there are some real challenges with making Leaflet allow mouse events to be detected by d3, because Leaflet disables them in its configuration by setting the default pointer-events CSS property to none. So to overcome this, we need to explicitly set the style attribute of the SVG element to automatically detect pointer events as d3 events. In the map code below, we use g1 as this element and set it to capture d3 pointer events thus: ~~~ const g1 = svg.append("g").attr("class", "leaflet-zoom-hide") .attr("width", w) .attr("height", h) .attr("style", "pointer-events: auto;"); ~~~ See this discussion on Stack Overflow to explain in more detail.
In the simple map below we add one interactive point to the Leaflet base map that captures hover events as d3 mouseover(). Note that we have to again set the zoom level to fit a reasonable bounding box.`38:Tcbd,WesternCanadianCities1 = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([53.2527, -123.1207], 5).fitBounds(L.geoJson(City1).getBounds()); 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); const overlay = d3.select(map.getPanes().overlayPane); //const svg = overlay.select('svg'); const svg = overlay.select("svg"); const w = overlay.node().getBoundingClientRect().width +100 const h = overlay.node().getBoundingClientRect().height + 100; const g1 = svg.append("g").attr("class", "leaflet-zoom-hide") .attr("width", w) .attr("height", h) .attr("style", "pointer-events: auto;"); const cdot = g1.selectAll('circle') .data(City1.features) .join('circle') .attr("fill", "purple") //Leaflet has to take control of projecting points. Here we are feeding the latitude and longitude coordinates to leaflet so that it can project them on the coordinates of the view. Notice, we have to reverse lat and lon. Finally, the returned conversion produces an x and y point. We have to select the the desired one using .x or .y .attr("cx", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x) .attr("cy", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) .attr("r", 20) .on('mouseover', function() { //function to add mouseover event d3.select(this).transition() //D3 selects the object we have moused over in order to perform operations on it .duration('150') //how long we are transitioning between the two states (works like keyframes) .attr("fill", "red") //change the fill .attr('r', 30) //change radius }) .on('mouseout', function() { //reverse the action based on when we mouse off the the circle d3.select(this).transition() .duration('150') .attr("fill", "steelblue") .attr('r', 20) }); /* const text = svg.selectAll('text') .data(City1.features) .join('text') .attr("font-size", '10') .attr("dy", 3) //shift on y-axis to align .attr("x", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x+5) //Offset to make it visible .attr("y", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) .text(d => d.properties.Name) //Set teh text according to data */ const update = () => cdot .attr("cx", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x) .attr("cy", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) ; map.on("zoomend", update); // return svg.node(); }39:Tcbb,WesternCanadianCities4 = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([53.2527, -123.1207], 5).fitBounds(L.geoJson(Wcities).getBounds()); 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); const overlay = d3.select(map.getPanes().overlayPane); //const svg = overlay.select('svg'); const svg = overlay.select("svg"); const w = overlay.node().getBoundingClientRect().width; const h = overlay.node().getBoundingClientRect().height; const g1 = svg.append("g").attr("class", "leaflet-zoom-hide") .attr("width", w) .attr("height", h) .attr("style", "pointer-events: auto;"); const cDots = g1.selectAll('circle') .data(Wcities.features) .join('circle') .attr("fill", "purple") //Leaflet has to take control of projecting points. Here we are feeding the latitude and longitude coordinates to leaflet so that it can project them on the coordinates of the view. Notice, we have to reverse lat and lon. Finally, the returned conversion produces an x and y point. We have to select the the desired one using .x or .y .attr("cx", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x) .attr("cy", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) .attr("r", 10) .on('mouseover', function() { //function to add mouseover event d3.select(this).transition() //D3 selects the object we have moused over in order to perform operations on it .duration('150') //how long we are transitioning between the two states (works like keyframes) .attr("fill", "red") //change the fill .attr('r', 30) //change radius }) .on('mouseout', function() { //reverse the action based on when we mouse off the the circle d3.select(this).transition() .duration('150') .attr("fill", "steelblue") .attr('r', 10) }); const text = svg.selectAll('text') .data(Wcities.features) .join('text') .attr("font-size", '9') .attr("dy", 3) //shift on y-axis to align .attr("x", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x+5) //Offset to make it visible .attr("y", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) .text(d => d.properties.Name) //Set teh text according to data const update = () => cDots .attr("cx", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x) .attr("cy", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) ; map.on("zoomend", update); // return svg.node(); }3a:T631,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') // Use Leaflets projection API for drawing svg path (creates a stream of projected points) const projectPoint = function(x, y) { const point = map.latLngToLayerPoint(new L.LatLng(y, x)) this.stream.point(point.x, point.y) } // Use d3's custom geo transform method to implement the above const projection = d3.geoTransform({point: projectPoint}) // creates geopath from projected points (SVG) const pathCreator = d3.geoPath().projection(projection) const areaPaths = g.selectAll('path') .data(VanAreas.features) .enter() .append('path') .attr('fill-opacity', 0.3) .attr('stroke', 'black') .attr('stroke-width', 2.5) // Function to place svg based on zoom const onZoom = () => areaPaths.attr('d', pathCreator) // initialize positioning onZoom() // reset whenever map is moved map.on('zoomend', onZoom) }3b:[{"id":"50886802bef6525bb0c59e392b3744a58d6b11da68399a2738366370d9924ed41c1017d9c1c2358798c1327ea891c22545fd5be224cdf1961e3c4f36d33ac950","href":"https://static.observableusercontent.com/files/50886802bef6525bb0c59e392b3744a58d6b11da68399a2738366370d9924ed41c1017d9c1c2358798c1327ea891c22545fd5be224cdf1961e3c4f36d33ac950","name":"map.geojson","type":"application/geo+json","lastModified":1573854459717.428,"size":980},{"id":"e8a1c62e61765cd84ab67631082775bd53395bcd4f1a6d6fd19f74e236194b9e9606ab4b04114ed5024d04dfffa5a7e1685f0cdf4707636dc571a8e6eef584a8","href":"https://static.observableusercontent.com/files/e8a1c62e61765cd84ab67631082775bd53395bcd4f1a6d6fd19f74e236194b9e9606ab4b04114ed5024d04dfffa5a7e1685f0cdf4707636dc571a8e6eef584a8","name":"VancouverAreaSize.json","type":"application/json","lastModified":1573854459717.428,"size":52857},{"id":"8ef4099dcffc981f20c5cc8429be6f7d1c8bd99039aab8730a7e279e57af0896388ff67f9f1b3eaed9db97efc61545464292d53108541ea6af231b5531328bd4","href":"https://static.observableusercontent.com/files/8ef4099dcffc981f20c5cc8429be6f7d1c8bd99039aab8730a7e279e57af0896388ff67f9f1b3eaed9db97efc61545464292d53108541ea6af231b5531328bd4","name":"feds.json","type":"application/json","lastModified":1573854459717.428,"size":880675}] 2f:{"id":"d513949dece7fe5a","slug":null,"title":"Leaflet and D3 Interactive Overlays","thumbnail":"c368a2e6629ac6d3adeeb7581ddf691975baa7851b9e05d7b215e20688413479","access_level":"public","create_time":"$D2019-11-15T21:47:39.717Z","update_time":"$D2023-03-03T01:59:57.965Z","view_time":null,"first_public_time":"$D2021-01-19T18:54:58.314Z","fork":{"id":"a0bf4019b473e62c","slug":"introduction-to-leaflet-and-d3","title":"Introduction to leaflet and D3","owner":{"id":"bb76b04514ce3a89","login":"sfu-iat355","name":"IAT355"}},"stars":5,"starred":false,"owner":{"type":"team","id":"4a0762a387ec748f","login":"drlynb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dd242441d5e4ed40bfe5b09336f04460a3a4974825e2a9cb9088ade14a49fc15","tier":"starter_2024"},"version":808,"publish_version":null,"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":3,"collection":null,"type":"notebook","body":{"title":"Leaflet and D3 Interactive Overlays","cells":[{"id":0,"value":"md`# Leaflet and D3 Interactive Overlays\nCaveat: Please note this is a work in progress and will be constantly updated!`","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. Unlike Vega, which plots spatial files on a blank canvas and has limited interaction, Leaflet provides built-in map functions such as pan and zoom, and a richer set of interactions. In order to utilize a Leaflet map that supports zooming and panning (like in google maps), we have to use 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 on observable has its own unique requirements:\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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"html` \n`","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"md` ## Preparing data for leaflet\nLeaflet unfortunately does not allow you to use TopoJson files. You will have to convert them to geoJson 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/). Download the TopoJson below and open mapshaper. Here, I am using a feature in observable of [file attachment](https://observablehq.com/@observablehq/file-attachments) that 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":181,"value":"ElectoralDistricts = FileAttachment(\"feds.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"## Building layered maps with Leaflet: Vancouver example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"md` ### Creating a base map\nHere we create a simple Leaflet map 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/). \nNote that in this \\\"base map \\\", i can zoom in and out infinitely. We may not want this!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"VanAreas = FileAttachment(\"VancouverAreaSize.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"### Expanding and exporting interactions\n\nThis is a pretty impoverished interaction if we want to be able to connect this to other views, in particular to link and brush data elements together. To do this, we can add an event listener to collect and return the selected value to control other views in the notebook by global variables. \nOften this may be all you need. Below I have identified a mutable variable nHood that simply contains the NAME property of the selected geoJSON object: e.g., the area feature. This now means that an identifying property of the selected object can be used by other Observable cells to update their contents.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":689,"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{\n //mutable nHood = event.target.feature.properties.NAME;\n setSelectedHoods(event.target.feature.properties.NAME)\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"//We are writing the event listener function for each feature in our geojson layer\nfunction areaClick(feature, layer) {\n layer.on({\n click:whenClicked //callback function\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"mutable nHood = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"### Multiple selections\nA clunky way to support multiple selections is simply to change the event listener to aggregate selections in an array. Here we use an array `called selectedHoods` to collect selected names. But when we try this, we see that it is \"one behind\" in updating the state of the array below, even though if you actually open the array you will see it is correct. Why? not figured out yet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":738,"value":"setSelectedHoods = function(aname)\n{\n console.log(\"Starting values in selectedHoods:\" , selectedHoods);\n let filteredHoods =[];\n if (! selectedHoods.includes(aname))\n {\n mutable selectedHoods.push(aname);\n console.log(\"adding \", aname);\n }\n else\n {\n console.log(\"removing \", aname);\n filteredHoods= selectedHoods.filter(e => e !== aname);\n mutable selectedHoods = JSON.parse(JSON.stringify(filteredHoods)); \n }\n console.log(mutable selectedHoods);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"mutable selectedHoods = [];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"However, `Leaflet` interactions are relatively constrained: you can only select one element at a time, and more complex interactions like hover required resetting some Leaflet attributes (which we discuss a little later). \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"md` ## D3\nWe are now moving into [D3](https://d3js.org/). D3 is a large library that takes a long time to master, and has lot of idiosyncracies with how it functions. You will notice that there are limits to what you can do in Vega-Lite. Instead, we are going to jump straight into D3. Vega-lite is especially limited in the ability to perform various mapping operations. D3.js gives you the flexibility to implement the features that you feel you may need (although, the development time to do so may take longer than you may want). To introduce d3.js, we will be making a very simple dot map. We are going to use a very simple d3 interaction on this map: when we mouseover a city, it will increase in size and change colour.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"Wcities = FileAttachment(\"map.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"City1 = { \n const tempC = JSON.parse(JSON.stringify(Wcities));\n //console.log(tempC);\n let i=0;\n let l = tempC.features.length; \n for (i=1;i\nNote that we have to set the zoom level to fit a reasonable bounding box for the opening view.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"### Extending interaction to multiple points\nAnd now we take the dot map from above and make all the points react to hover events. Then we will add click events, make these multiple select/deselect and finally build in a range select using drag.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":633,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"## Working with Areas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"md`\nHere is another map using polygons. It is using the same geodata we used above in the Leaflet map with the neighbourhoods overlay, but the previous map was using a Leaflet layer with Leaflet interactions, where this example uses a d3 layer integrated with Leaflet. This example gets a bit more complicated. You are free to look at it and play with it. We are going to be covering more complex topics next tutorial.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"md`## Next Week\n* Adding interaction and filtering\n* Selections and Data Binding\n* Linking, filtering, and brushing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md` ### Appendix\n* [Tom Macwright's Leaflet](https://observablehq.com/@tmcw/leaflet)\n* [Canada I + leaflet](https://observablehq.com/@mikelotis/canada-i-leaflet)\n* [d3 + leaflet](https://observablehq.com/@idris-maps/leaflet-et-d3)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"md ` ## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"VegaLite = require('vega-embed@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"fedUnemployment = d3.csv(\"https://gist.githubusercontent.com/mbarison/8ab5b4ef36ade1c6cfd05fb2a680d8f0/raw/4a54f7934ceab051a61fda996c8d58da72693fb8/canada_fed_unemp.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 30:"$2f:body"