30:T550,count = { // Set the opacity of the hotels based on their position relative to the contours contourValue let count = 0; const tr = d3.select(table).selectAll('tbody tr'); const top_left = map.containerPointToLayerPoint([0, 0]); // KLUDGE mutable z = top_left; hotelsLayer.eachLayer(function(hotelLayer){ function inside(polygon) { return d3.polygonContains(polygon, this) } const id = hotelLayer.feature.properties.id; // BUG -- hotel positions do not "pan" with contours // let point = [hotelLayer._point.x, hotelLayer._point.y]; // DO NOT USE ._point!! let point = [hotelLayer._point.x - top_left.x, hotelLayer._point.y - top_left.y] let opacity = elevationContours.some(inside, point) ? 1 : 0; count += opacity; // Hide the feature on the map if it's not inside one of the polygons hotelLayer.setStyle({opacity: opacity, fillOpacity: opacity}); // mutable z = 'checking ' + elevationContours.length + " point: " + point; // mutable z = hotelLayer // Hide the row in the table if the feature isn't visible on the map tr.filter(d => d.properties.id == hotelLayer.feature.properties.id) .style('display', (opacity == 0) ? 'none' : ''); }); return html`${count} hotels in range (${d3.select(table).selectAll('tbody tr').nodes().length} total)` }31:T7b9,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(charleston, 9); 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 = () => { 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); const top_left = map.containerPointToLayerPoint([0, 0]); mutable z = "top_left: " + top_left; L.DomUtil.setPosition(demCanvas, top_left); L.DomUtil.setPosition(contourCanvas, top_left); // trigger elevation data loading and rendering resetting terrainTileObjects 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', () => { mutable z = "start"; clearTimeout(delay); }); draw() return map }32:T62f,// 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`; // 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) => { 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++) { let k = x + y * width; values[k] = demImageData.data[4 * k]; } } return values; }33: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)`34:[] 2e:{"title":"Mapzen DEM","cells":[{"id":0,"value":"md`# Mapzen DEM`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"md`\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)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"md`### TODO\n* Contours change on pan -- these are mostly near shore, so probably have to do with representation of ocean is blurred\n* ~~Fix pan (redraws old contours before repositioning canvas, positions are incorrect for filtering)~~ -- DONE\n * Probably shouldn't use _point for repositioning on pan\n* ~~Smooth *elevationData* before contouring (use StackBlur)~~ -- DONE\n* Add NHC hazard maps\n * NOTE: hazard maps do not distinguish land ocean water!!!\n* CV -- 3-D possible to overlay buildings and disaster maps\n* ~~Make table sortable~~ -- DONE`","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"contourValue","pinned":true,"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":1007,"value":"map._pixelOrigin","pinned":true,"hidden":false,"mode":"ojs"},{"id":986,"value":"elevationContours","pinned":true,"hidden":false,"mode":"ojs"},{"id":989,"value":"mutable z = 42","pinned":true,"hidden":false,"mode":"ojs"},{"id":584,"value":"$30","pinned":true,"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":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":568,"value":"hotelsLayer = { \n // Add the hotels to the map as GeoJSON points\n \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 \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 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.coordinates.map(d => d[0]); // Return array of polygon exteriors\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":"$32","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":"$33","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":696,"value":"csv = d3.csv('https://pbogden.com/mapping/scrapedhotels.csv');","pinned":true,"hidden":false,"mode":"ojs"},{"id":768,"value":"hotels = 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":"$W34","stdlib":"1","titling":"auto"}