30:T5fb,chooseFile = { const bgwn7 = d3.range(9, 12.5, .5).map(d => d.toFixed(1).replace('.','_')); const chin7 = d3.range(29.5, 40, .5).map(d => d.toFixed(1).replace('.','_')); const files = ["Florence"].concat(bgwn7).concat(chin7); const florence = "https://pbogden.com/mapping/data/florence/AL062018_pts.shp"; const inundation_base = "https://pbogden.com/mapping/data/inundation/shapefiles/"; const bfiles = bgwn7.map((d,i) => { return inundation_base + "polygons/" + d + ".shp" }); const cfiles = chin7.map((d,i) => { return inundation_base + "shp/ahps/inundation/chin7/polygons/" + d + ".shp" }); d3.select(viewof choice).append('input') .attr('type', 'button') .attr('value', 'florence') .on('click', (d, i) => { mutable x = [d,i, florence]; mutable z = getData(florence); }) // Add buttons to the form d3.select(viewof choice).select("#bgwn7").selectAll("input") .data(bgwn7) .enter().append('input') .attr('type', 'button') .attr('value', d => d) .on('click', (d, i) => { mutable x = [d,i, bfiles[i]]; mutable z = getData(bfiles[i]); }) // d3.select(viewof choice).select("#chin7").selectAll("#input") // .data(chin7) // .enter().append('input') // .attr('type', 'button') // .attr('value', d => d) // .on('click', (d, i) => { // mutable x = [d,i, cfiles[i]]; // mutable z = getData(cfiles[i]); // }) return [florence, bfiles, cfiles] }31:[] 2e:{"title":"Florence on Leaflet","cells":[{"id":0,"value":"md`# Florence on Leaflet\n\nThis notebook displays two datasets on Leaflet: Florence storm track and local high-resolution inundation calculation.\n\n* [2018 Hurricane season (shapefiles)](https://www.nhc.noaa.gov/data/tcr/index.php?season=2018&basin=atl) -- National Hurricane Center\n* [Inundation sites](https://water.weather.gov/ahps/inundation.php) -- water.weather.gov\n* NOTE: Not all sites use the same projection, (chin7 is in EPSG:2264 = Lambert Conformal Conic for NC)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"viewof choice = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"md`### Update the shapefile`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"mutable x = 42","pinned":true,"hidden":false,"mode":"ojs"},{"id":1354,"value":"z","pinned":true,"hidden":false,"mode":"ojs"},{"id":1365,"value":"{\n if (z == 42) return \"too soon\";\n shapeLayer.clearLayers()\n shapeLayer.addData(z)\n \n if (typeof map.getZoom() == \"undefined\") map.fitBounds(bounds(z)); // Initialize map\n map.flyToBounds(bounds(z));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1420,"value":"map.getZoom()","pinned":true,"hidden":false,"mode":"ojs"},{"id":788,"value":"md`### Add the map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"map = {\n let map = L.map('myMap', {zoomSnap: 0, zoomAnimation: false}) ;\n let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', {\n attribution: 'Wikimedia maps beta | © OpenStreetMap contributors'\n }).addTo(map);\n \n shapeLayer.addTo(map);\n \n return map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":793,"value":"md`### Add the shapefile layer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1358,"value":"florence = getData()\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"shapeLayer = { \n let shapeLayer = L.geoJson(florence, { pointToLayer: pointToLayer }) // .addTo(map);\n \n return shapeLayer;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1268,"value":"pointToLayer = function (feature, latlng) {\n const geojsonMarkerOptions = {\n radius: 3,\n fillColor: \"#ff7800\",\n color: \"#000\",\n weight: 1,\n opacity: 1,\n fillOpacity: 0.8\n };\n \n return L.circleMarker(latlng, geojsonMarkerOptions);\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"md`#### References\n\n* [async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) -- MDN\n* [Leaflet](https://beta.observablehq.com/@tmcw/leaflet) by Tom MacWright\n * How To: Observable notebook with leaflet\n* Leaflet docs\n * [SVG Overlay](https://leafletjs.com/reference-1.5.0.html#svgoverlay) -- API reference\n * [Interactive Choropleth demo](https://leafletjs.com/examples/choropleth/) -- tutorial\n* [L.geoJson.setStyle(layer)](https://leafletjs.com/reference-1.4.0.html#geojson-resetstyle) -- Leaflet docs\n* [D3 + Leaflet](https://bost.ocks.org/mike/leaflet/) by Mike Bostock\n* [Observable: The User Manual](https://observablehq.com/@observablehq/observable-user-manual)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"md`### Shapefile`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1023,"value":"bounds = function(features) { \n const bounds = d3.geoBounds({type: 'FeatureCollection', features: features});\n let sw = [bounds[0][1], bounds[0][0]]; // Leaflet likes [Longitude, Latitude]\n let ne = [bounds[1][1], bounds[1][0]];\n const dx = (ne[0] - sw[0]) / 10;\n const dy = (ne[1] - sw[1]) / 10;\n sw = [sw[0] - dx, sw[1] - dy];\n ne = [ne[0] + dx, ne[1] + dy];\n \n return [sw, ne];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1319,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":998,"value":"getData = {\n // Default shapefile\n const florence = \"https://pbogden.com/mapping/data/florence/AL062018_pts.shp\";\n \n async function getData(d) {\n let file = d || florence;\n let source = await shapefile.open(file, null);\n\n let a = [];\n while (true) {\n const result = await source.read();\n if (result.done) break;\n a.push(result.value);\n }\n \n mutable z = a;\n \n return a\n }\n \n return getData\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1002,"value":"mutable z = 42","pinned":true,"hidden":false,"mode":"ojs"},{"id":922,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"shapefile = require(\"shapefile@0.6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1025,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":923,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"L = require('leaflet@1.5.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"html`leaflet.css`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}