31:T4d6,report = { var count = 0; // The bounds are here for the extra credit question. var bounds = map.getBounds() var ne = bounds.getNorthEast(); var sw = bounds.getSouthWest(); // Earthquake filtering occurs here quakesLayer.eachLayer(function(quakeLayer) { // Each earthquake has its own "layer" var threshold = slider / 10; // The next line uses Javascript's conditional (ternary) operator. // If you're not familiar with this operator, then look at the following reference. // See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator // Python version: https://docs.python.org/3/reference/expressions.html#conditional-expressions let mag = quakeLayer.feature.properties.mag; let opacity = ((mag > slider) && bounds.contains(quakeLayer.getLatLng())) ? 1 : 0; count = count + opacity; quakeLayer.setStyle({opacity: opacity, fillOpacity: opacity}); }); var bnds = " \nmap bound -- sw: " + Math.round(sw.lng) + " " + Math.round(sw.lat) + " \nmap bound -- ne: " + Math.round(ne.lng) + " " + Math.round(ne.lat); return count + " earthquake" + (count == 1 ? "" : "s") + " exceeding magnitude " + slider + bnds; }32:[] 2f:{"title":"Earthquakes on Leaflet","cells":[{"id":0,"value":"md`# Earthquakes on Leaflet\n\nInteractive filtering of earthquakes on a Leaflet map. \n\nThis notebook shows how to add user interface \nelements that interact with the data visualized on a Leaflet map.\nIt's not the only way to do it and it may not be the best way, but it works.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`### 1. Get Leaflet\n\nSee [D3 + Leaflet](https://bost.ocks.org/mike/leaflet/) by Mike Bostock and [Leaflet](https://beta.observablehq.com/@tmcw/leaflet) by Tom MacWright. They show how to do it,\nwhich is great because it's not straightforward.\nFor background on how it's done, see: [Introduction to Require](https://observablehq.com/@observablehq/introduction-to-require).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`### 2. Fetch some earthquake data\n\n...from the awesome [USGS GeoJSON feed](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"quakes = {\n let response = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week.geojson');\n let json = await response.json();\n return json;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`### 3. Add a container for the map\n\nThe next cell creates a [div](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) container for the map. The [map](#map) cell references the container and returns a reference to the map object. This approach differs from [D3 + Leaflet](https://bost.ocks.org/mike/leaflet/) demo, which doesn't expose a map reference to the rest of the notebook. It's an important difference because we use the map reference to add interactive controls to the map without triggering recreation of the map.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"md`### Map status\n\n${report}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":778,"value":"md`### 4. Add a slider\n\nThis next cell adds a bare-bones HTML slider using the approach described in [Introduction to Views](https://observablehq.com/@observablehq/introduction-to-views). You could also use [Observable Inputs](https://observablehq.com/@observablehq/inputs). \n\nIf you adjust the slider, you should see the map status change, likewise if you pan or zoom the map. The connections between the map and the slider are made in the steps below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"viewof slider = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":788,"value":"md`### 5. Add the map\n\nThis next cell adds a map, returns a map instance, and uses [invalidation](http://observablehq.com/@pbogden/hello-leaflet-with-a-map-reference) so that you can\nrerun the cell to create a new map and remove the old one. \nWithout the invalidation line, Leaflet would throw an Error indicating that the map had already\nbeen initialized.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"map = {\n container;\n let map = L.map('myMap', {zoomSnap: 0.1, zoomAnimation: false}) ;\n L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg', {\n attribution: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA'\n }).addTo(map);\n \n map.fitBounds([\n [-75, -180],\n [75, 180]\n ]);\n \n invalidation.then(() => map.remove());\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":793,"value":"md`### 6. Add the data\n\nAdd the earthquakes as a [Leaflet GeoJSON layer](https://leafletjs.com/examples/geojson/),\nand return a reference to that layer so we can implement an interactive data filter with the slider.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"quakesLayer = {\n \n // See: https://leafletjs.com/examples/geojson/\n var geojsonMarkerOptions = {\n radius: 8,\n fillColor: \"#ff7800\",\n color: \"#000\",\n weight: 1,\n opacity: 1,\n fillOpacity: 0.8\n };\n \n // See: https://leafletjs.com/reference-1.4.0.html#geojson-pointtolayer\n var pointToLayer = function (feature, latlng) {\n return L.circleMarker(latlng, geojsonMarkerOptions);\n }\n \n let quakesLayer = L.geoJson(quakes.features, { pointToLayer: pointToLayer }).addTo(map);\n\n\n return quakesLayer;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"md`### 7. Connect the slider to the map\n\nThe next cell connects the slider to the map. \nWhen the slider changes, it filters the visible earthquakes on the map.\nThe next cell effectively isolates the slider reference from the cells that \ncreate the map and the earthquake layer. As a result, the slider will not trigger \nrecreation of those objects, which would seriously degrade performance.\n\nThe cell returns a string that reports various things (map extent and the number of earthquakes that are visible on the map) that update when the user\ninteracts with the map or the slider.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1155,"value":"md`### 8. Connect the map to the slider\n\nThe next cell updates the slider filter whenever a user pans or zooms the map, which\ntriggers the map's \"zoom\" and \"move\" events.\nThe map then triggers re-evaluation of slider view’s value by emitting a custom input event\nand dispatching it to the slider.\nThis technique is described in \n[Introduction to Views](https://observablehq.com/@observablehq/introduction-to-views).\n\nFor info on Leaflet events, see the reference docs for [evented](https://leafletjs.com/reference-1.7.1.html#evented) and [map.on](https://leafletjs.com/reference-1.7.1.html#evented-on).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"map.on('load, zoom, move', (evt) => { \n viewof slider.dispatchEvent(new CustomEvent(\"input\"));\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}