30:T7e5,map = { const oriental = [35.0310, -76.6930]; const charleston = [32.7765, -79.9311]; const florence = [34.583, -78.944]; const map = L.map("mymap").setView(florence, 7); map.scrollWheelZoom.disable(); L.control.scale({position: 'bottomright'}).addTo(map); L.tileLayer("https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png", { attribution: "Wikimedia maps | © OpenStreetMap contributors" }).addTo(map); // empty tile layer, used as a convenient way to know which terrain tiles to load (manually) let terrainLayer = L.tileLayer('', { attribution: 'Mapzen terrain tiles' }).addTo(map); let demPane = map.createPane('dem'); // demPane.appendChild(demCanvas); // Uncomment to show raw DEM tiles demPane.appendChild(contourCanvas); // Reposition the single DEM canvas in the Leaflet map // This also triggers (via terrainTileObjects) a reload and rerendering of the DEM tiles let delay; const draw = () => { mutable zoomLevel = map.getZoom(); clearTimeout(delay); // a short delay makes it a little easier to pan around without constant redrawing delay = setTimeout(() => { const ctx = demCanvas.getContext('2d'); const contourCtx = contourCanvas.getContext('2d'); ctx.clearRect(0, 0, width, height); contourCtx.clearRect(0, 0, width, height); // Clear contours immediately before repositioning canvas const top_left = map.containerPointToLayerPoint([0, 0]); L.DomUtil.setPosition(demCanvas, top_left); L.DomUtil.setPosition(contourCanvas, top_left); // reassigning a value to tileObjects kicks off elevation data loading and rendering, in notebook cells below mutable terrainTileObjects = Object.entries(terrainLayer._tiles).map(t => t[1]); }, 500); } // Uncomment the following to redraw the map on pan/zoom map.on('moveend zoomend', draw) .on('movestart zoomstart', () => { clearTimeout(delay); }); draw() return map }31:T859,// Load a single canvas with elevation computed from tiles elevationData = { // const terrainTileUrl = (coords) => `https://elevation-tiles-prod.s3.amazonaws.com/terrarium/${coords.z}/${coords.x}/${coords.y}.png`; // BEGIN NEW function tms(coords) { return coords.z + '/' + coords.x + '/' + ((1 << coords.z) - coords.y - 1) }; const terrainTileUrl = (coords) => `https://pbogden.com/mapping/tiles/${tms(coords)}.png`; const bad_tile = 'Bad tile'; const terrainPromises = terrainTileObjects.map(tile => { return d3.image(terrainTileUrl(tile.coords), {crossOrigin: "anonymous"}) .catch(error => bad_tile); // Catch the error when there are missing tiles }); // END NEW // Get all terrain tiles in map view // const terrainPromises = terrainTileObjects.map(tile => { // return d3.image(terrainTileUrl(tile.coords), {crossOrigin: "anonymous"}); // }); const images = await Promise.all(terrainPromises) // Create large canvas to for assembling individual terrain tiles const demContext = demCanvas.getContext('2d') demContext.clearRect(0, 0, width, height); const mapBounds = container.getBoundingClientRect(); // Draw each tile in the right place on the big canvas images.forEach((image, i) => { if (image != bad_tile) { const bounds = terrainTileObjects[i].el.getBoundingClientRect(); demContext.drawImage(image, bounds.x - mapBounds.x, bounds.y - mapBounds.y); } }); // Load canvas with elevations (before blurring) const demImageData = demContext.getImageData(0,0,width,height); const demData = demImageData.data; const values = []; // for (let y = 0; y < height; y++) { // for (let x = 0; x < width; x++) { // let k = x + y * width; // let k4 = 4 * k; // demImageData.data[k4] = getElevation(4 * k, demData); // demImageData.data[k4 + 1] = 0; // demImageData.data[k4 + 2] = 0; // } // } // StackBlur.R(demImageData, 10); for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const k = x + y * width; values[k] = demData[4 * k]; } } return values; }32:T498,md`### References * [Mapzen terrain tiles](https://www.mapzen.com/blog/terrain-tile-service/) -- blog with algorithm * [Cloud Contours](https://observablehq.com/@d3/cloud-contours) -- mbostock notebook * [the gist](https://gist.github.com/mbostock/818053c76d79d4841790c332656bf9da), which uses stack-blur.js * [stackblur-canvas](https://github.com/flozz/StackBlur) -- github * [Hello, Leaflet!](https://observablehq.com/@mbostock/hello-leaflet) -- mbostock notebook * [Hypsometric tints](https://en.wikipedia.org/wiki/Hypsometric_tints) -- wikipedia * [Topographic hill shading](https://matplotlib.org/3.1.1/gallery/specialty_plots/topographic_hillshading.html) -- matplotlib demo * [Customizing colormaps](https://jakevdp.github.io/PythonDataScienceHandbook/04.07-customizing-colorbars.html) -- VanderPlas * [DIY hillshade](https://observablehq.com/@awoodruff/diy-hillshade) -- notebook * [Hillshader](https://observablehq.com/@sahilchinoy/hillshader) -- notebook * [Canvas shaded relief](https://github.com/awoodruff/canvas-shaded-relief) -- github demo * [Relief shading](http://www.reliefshading.com/) * [Ray Shader](https://github.com/tylermorganwall/rayshader)`33:[] 2e:{"title":"SLOSH","cells":[{"id":0,"value":"md`# SLOSH`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"md`\n* [Florence data](https://www.weather.gov/mhx/Florence2018) -- weather.gov\n* [NHC hurricane data](https://www.nhc.noaa.gov/data/tcr/)\n* [NHC hazard maps](https://www.nhc.noaa.gov/nationalsurge/)\n* [NHC data downloads](https://www.nhc.noaa.gov/nationalsurge/#data)\n* [Hazard maps (Arcgis products)](http://noaa.maps.arcgis.com/apps/MapSeries/index.html?appid=d9ed7904dbec441a9c4dd7b277935fad&entry=1)\n* [Earthquakes on leaflet](https://observablehq.com/@pbogden/observable-leaflet-annotated)\n* [Florence data](https://observablehq.com/d/2844886b21f15c9f) -- my notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"md`### TODO\n* Get hotels to show up in the table\n* Hazard maps don't distinguish land/sea. Consider DEM mask for the ocean.\n* CV -- 3-D possible to overlay buildings and disaster maps\n* Toggle table sort\n* Don't redraw on pan if it's not necessary`","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"mutable draws = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"html`Category ${Math.floor(contourValue)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"viewof contourValue = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"container = html`

`;","pinned":true,"hidden":false,"mode":"ojs"},{"id":584,"value":"count = {\n contourValue\n let count = 0;\n const tr = d3.select(table).selectAll('tbody tr');\n \n hotelsLayer.eachLayer(function(hotelLayer){\n const id = hotelLayer.feature.properties.id;\n const polygons = elevationContours.coordinates.map(d => d[0]); // return the first polygon of possibly many\n const point = [hotelLayer._point.x, hotelLayer._point.y];\n let opacity = polygons.some(inside, point) ? 1 : 0;\n count += opacity;\n \n // Hide the feature on the map if it's not inside one of the polygons\n hotelLayer.setStyle({opacity: opacity, fillOpacity: opacity});\n \n // Hide the row in the table if the feature isn't visible on the map\n tr.filter(d => d.properties.id == hotelLayer.feature.properties.id)\n .style('display', (opacity == 0) ? 'none' : '')\n });\n \n function inside(polygon) {\n return d3.polygonContains(polygon, this)\n }\n \n return html`${count} hotels in range (${d3.select(table).selectAll('tbody tr').nodes().length} total)`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"table = html`\n

\n \n \n \n \n \n \n \n \n \n \n

Name	Address	City
Hello	world!

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":967,"value":"mutable zoomLevel = 42","pinned":true,"hidden":false,"mode":"ojs"},{"id":568,"value":"hotelsLayer = { \n var geojsonMarkerOptions = {\n radius: 4,\n fillColor: \"#ff7800\",\n color: \"#000\",\n weight: 1,\n //opacity: 1, // Opacity set elsewhere\n //fillOpacity: 0.8\n };\n \n // This function defines how GeoJSON points spawn Leaflet layers.\n var pointToLayer = function (feature, latlng) {\n return L.circleMarker(latlng, geojsonMarkerOptions);\n }\n \n // See: https://leafletjs.com/examples/geojson/\n let layer = L.geoJSON(hotels, { pointToLayer: pointToLayer }).addTo(map);\n let points = L.geoJSON(florence, { pointToLayer: pointToLayer }).addTo(map);\n \n return layer;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`#### Compute and draw contours`","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"elevationContours = {\n mutable draws++;\n const context = contourCanvas.getContext('2d');\n const path = d3.geoPath(projection, context);\n const multiPolygon = contours.contour(elevationData, contourValue);\n context.lineWidth = 2;\n context.lineJoin = \"round\";\n context.strokeStyle = \"crimson\";\n context.fillStyle = 'rgba(0,0,0,.1)';\n \n context.clearRect(0, 0, width, height);\n context.beginPath();\n path(contours.contour(elevationData, contourValue));\n context.stroke();\n context.fill();\n \n return multiPolygon\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"// Add tint canvas to the DOM\ntintCanvas = DOM.canvas(width, height);","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"mutable terrainTileObjects = [];","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"width * height","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"d3.extent(elevationData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"// Convert terrain tile RGB to elevation in meters\ngetElevation = (index, demData) => {\n if (!demData) return 0; // TODO: Check this\n if (index < 0 || demData[index] === undefined) return undefined; // TODO: Check this\n let elevation = ((demData[index] * 256 + demData[index+1] + demData[index+2] / 256) - 32768);\n return (elevation == 32768) ? null : elevation;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"// Create tinted canvas here (reconstruct\ntintImageData = {\n const tintData = new Uint8ClampedArray(width * height * 4);\n const white = d3.color('#fff');\n elevationData.forEach((d,i) => {\n const n = i * 4;\n \n // get color based on elevation\n const tint = d3.color(tints(d)) || white;\n tintData[n] = tint.r;\n tintData[n + 1] = tint.g;\n tintData[n + 2] = tint.b;\n tintData[n + 3] = tint.opacity * 255;\n\n });\n \n const tintImageData = new ImageData(tintData, width, height);\n \n tintCanvas.getContext('2d').putImageData(tintImageData, 0, 0);\n return tintImageData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"tints = {\n const tintInterpolation = d3.interpolateHclLong;\n const valueRange = d3.extent(elevationData);\n // besides the \"low\" and \"high\" colors, I want one in between, in this case 75% of the way between low and high\n const middleValue = .65*(Math.max(0, valueRange[0]) + valueRange[1]);\n // for no coloring, try d3.scaleLinear([0, 1]).range(['#fff', '#fff']).clamp(true);\n //c7d6ba\n return d3.scaleSqrt()\n .domain([Math.max(0, valueRange[0]), middleValue, .9*valueRange[1]])\n .range(['#a7b898','#ffeee5', '#fff'])\n .clamp(true)\n .interpolate(tintInterpolation);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"height = Math.floor(width / 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"contours = d3.contours().size([width, height])","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"projection = d3.geoIdentity().scale(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"// Add DEM canvas to the DOM (it gets repositioned elsewhere)\ndemCanvas = DOM.canvas(width, height);","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"// Add canvas for contours to the DOM (it gets repositioned elsewhere)\ncontourCanvas = DOM.canvas(width, height);","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"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":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"// https://github.com/flozz/StackBlur\n//StackBlur = require(\"stackblur-canvas\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"StackBlur = require(\"https://bl.ocks.org/mbostock/raw/818053c76d79d4841790c332656bf9da/94f23ce8973297355271ae07f3c718486ef729e7/stack-blur.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":978,"value":"florence = d3.json('https://pbogden.com/mapping/data/florence/pts.json');","pinned":true,"hidden":false,"mode":"ojs"},{"id":696,"value":"csv = d3.csv('https://pbogden.com/mapping/scrapedhotels.csv');","pinned":true,"hidden":false,"mode":"ojs"},{"id":953,"value":"json = d3.json('https://pbogden.com/mapping/florence_hotels_response.json');","pinned":true,"hidden":false,"mode":"ojs"},{"id":958,"value":"hotels = json.map(d => (\n { type: \"Feature\", \n geometry: { type: \"Point\", coordinates: [+d.longitude, +d.latitude] },\n properties: {id: d.hotel_id, Name: d.hotel_name, Address: d.address_trans, City: d.city_trans}\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":768,"value":"hotels2 = csv.map((d, i) => ({ type: \"Feature\", \n geometry: { type: \"Point\", coordinates: [+d.longitude, +d.latitude] },\n properties: { id: i, name: d.hotel_name, address: d.address_trans, city: d.city_trans } }));","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"{\n // Add the hotel data to the table\n const items = d3.select(table).selectAll('th').nodes().map(d => d.innerHTML.toLowerCase());\n \n d3.select(table).selectAll('tbody tr').remove()\n \n const tr = d3.select(table).select('tbody').selectAll('tr')\n .data(hotels)\n .enter().append('tr')\n .attr('id', function(d) { return d.properties.id });\n \n const td = tr.selectAll('td')\n .data(function(d) { return items.map(k => d.properties[k]) })\n .enter().append('td')\n .html(function(d) { return d })\n \n d3.select(table).selectAll(\"thead th\").on(\"click\", function() {\n let k = this.innerHTML.toLowerCase();\n tr.sort(function(a, b) { return a.properties[k].localeCompare(b.properties[k], 'en', {sensitivity: 'base'}); });\n });\n \n d3.select(table).select(\"thead th\").node().click()\n \n return html`

${'Total # of hotels: ' + tr.nodes().length}

`\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}