2f:T653,viewof map = { const container = yield html`

`; let resolve container.value = new Promise(_ => resolve = _); const map = (container.value = new maplibregl.Map({ //interactive: false, boxZoom: true, pitch: 0, bearing: 0, maplibreLogo: true, container, center: [-70.2568, 43.64], zoom: 12, style: `https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json`, scrollZoom: true })); resolve(map); // Expose the Map instance as the view’s value. invalidation.then(() => map.remove()); map.addControl(new maplibregl.NavigationControl()); const bb = container.getBoundingClientRect(); var svg = d3.select(container) .append("svg") .style("position", "absolute") .style("top", 0) .style("left", 0) .attr("width", bb.width) .attr("height", bb.height) .style("pointer-events", "none"); function projectPoint(lon, lat) { var point = map.project(new maplibregl.LngLat(lon, lat)); this.stream.point(point.x, point.y); } var transform = d3.geoTransform({point:projectPoint}); var path = d3.geoPath().projection(transform).pointRadius(2); const dots = svg.selectAll(".dot") .data(data) .join("path") .style("class", "dot") .style("fill", "crimson") // .on("mouseover", d => mutable z = d) // .style("pointer-events", "all"); const update = () => { dots.attr("d", path); } // https://maplibre.org/maplibre-gl-js-docs/api/map/#map#on map.on("viewreset", update); map.on("move", update); map.on("moveend", update); update(); }30:T400,function arc(mouseAngle) { // default to the top octant let start = (-Math.PI)/8, end = Math.PI/8; // send the boundaries of the arc based on which octant the mouse is in if (mouseAngle < Math.PI/8) { // do nothing } else if (mouseAngle < (3*Math.PI)/8) { start = Math.PI/8; end = (3*Math.PI)/8; } else if (mouseAngle < (5*Math.PI)/8) { start = (3*Math.PI)/8; end = (5*Math.PI)/8; } else if (mouseAngle < (7*Math.PI)/8) { start = (5*Math.PI)/8; end = (7*Math.PI)/8; } else if (mouseAngle < (9*Math.PI)/8) { start = (7*Math.PI)/8; end = (9*Math.PI)/8; } else if (mouseAngle < (11*Math.PI)/8) { start = (9*Math.PI)/8; end = (11*Math.PI)/8; } else if (mouseAngle < (13*Math.PI)/8) { start = (11*Math.PI)/8; end = (13*Math.PI)/8; } else if (mouseAngle < (15*Math.PI)/8) { start = (13*Math.PI)/8; end = (15*Math.PI)/8; } // draw the arc return d3.arc() .innerRadius(80) .outerRadius(150) .startAngle(start) .endAngle(end) }31:T717,function updateArrow(e) { // get the mouse coordinates and adjust based on the center of the circle const coordinates = adjustCoordinates(e.layerX, e.layerY); const x = coordinates[0], y = coordinates[1]; // make sure the mouse is within the circle; if not, we're done if (calculateRadius(x, y) > 150) return; // get the angle in radians of the mouse location const mouseAngle = calculateAngle(x, y); // default to the top octant let arrowAngle = 0; let squareXOffset = 0; let squareYOffset = 12; // send the boundaries of the arc based on which octant the mouse is in if (mouseAngle < Math.PI/8) { mutable WIND = "SOUTH"; } else if (mouseAngle < (3*Math.PI)/8) { arrowAngle = 45; squareXOffset = -8; squareYOffset = 8; mutable WIND = "SOUTHWEST"; } else if (mouseAngle < (5*Math.PI)/8) { arrowAngle = 90; squareXOffset = -12; squareYOffset = 0; mutable WIND = "WEST"; } else if (mouseAngle < (7*Math.PI)/8) { arrowAngle = 135; squareXOffset = -8; squareYOffset = -8; mutable WIND = "NORTHWEST"; } else if (mouseAngle < (9*Math.PI)/8) { arrowAngle = 180; squareYOffset = -12; mutable WIND = "NORTH"; } else if (mouseAngle < (11*Math.PI)/8) { arrowAngle = 225; squareXOffset = 8; squareYOffset = -8; mutable WIND = "NORTHEAST"; } else if (mouseAngle < (13*Math.PI)/8) { arrowAngle = 270; squareXOffset = 12; squareYOffset = 0; mutable WIND = "EAST"; } else if (mouseAngle < (15*Math.PI)/8) { arrowAngle = 315; squareXOffset = 8; squareYOffset = 8; mutable WIND = "SOUTHEAST"; } d3.select(".arrow").attr("transform", `rotate(${arrowAngle})`); d3.select(".square").attr("transform", `translate(${squareXOffset} ${squareYOffset}) rotate(${arrowAngle})`); }32:[] 2d:{"title":"Stinky Compass","cells":[{"id":0,"value":"# Stinky Compass","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"## Choose Wind Direction","pinned":false,"hidden":false,"mode":"md"},{"id":583,"value":"html`

WIND FROM THE ${WIND}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"compass = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"## Compass Code","pinned":false,"hidden":false,"mode":"md"},{"id":484,"value":"### Draw the Circle and Arrow and Attach Event Handlers","pinned":false,"hidden":false,"mode":"md"},{"id":333,"value":"{\n let triangle = d3.symbol();\n triangle.type(d3.symbolTriangle);\n\n let line = d3.symbol();\n line.type(d3.symbolSquare);\n \n d3.select(compass)\n .on(\"mousemove\", updateArc)\n .append(\"circle\")\n .attr(\"r\", \"150\")\n .style(\"stroke\", \"black\")\n .attr(\"fill-opacity\", \"0.0\")\n \n d3.select(compass)\n .on(\"click\", onCompassClick)\n .append(\"path\")\n .attr(\"class\", \"arrow\")\n .attr(\"d\", triangle.size(300))\n .style(\"fill\", \"rgb(170, 74, 68)\");\n\n d3.select(compass)\n .append(\"path\")\n .attr(\"class\", \"square\")\n .attr(\"d\", line.size(100))\n .attr(\"transform\", \"translate(0 12)\")\n .style(\"fill\", \"rgb(170, 74, 68)\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"### Draw the Arc","pinned":false,"hidden":false,"mode":"md"},{"id":378,"value":"function updateArc(e) {\n // get the mouse coordinates and adjust based on the center of the circle\n const coordinates = adjustCoordinates(e.layerX, e.layerY);\n const x = coordinates[0], y = coordinates[1];\n\n // make sure the mouse is within the circle; if not, we're done\n if (calculateRadius(x, y) > 150) return;\n\n // get the angle in radians of the mouse location\n const mouseAngle = calculateAngle(x, y);\n\n // remove the current arc\n d3.select(compass).selectAll(\"path.arc\").remove();\n\n // draw the new arc based on the angle we calculated\n d3.select(compass)\n .append(\"path\")\n .attr(\"class\", \"arc\")\n .attr(\"d\", arc(mouseAngle))\n .attr(\"stroke\", \"none\")\n .attr(\"fill\", \"steelblue\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"### Compass Click Handler","pinned":false,"hidden":false,"mode":"md"},{"id":494,"value":"function onCompassClick(e) {\n updateArrow(e);\n \n //filterDots();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"#### Rotate the Arrow","pinned":false,"hidden":false,"mode":"md"},{"id":422,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"mutable WIND = \"SOUTH\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"### Compass Math Functions","pinned":false,"hidden":false,"mode":"md"},{"id":611,"value":"function adjustCoordinates(x, y) {\n return [x - 150, y - 150];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"function calculateRadius(x, y) {\n return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"function calculateAngle(x, y) {\n // calculate the angle in radians of the mouse location\n // formula adapted from\n // https://stackoverflow.com/questions/38113634/how-to-find-out-which-part-of-the-circle-was-clicked-using-html5-canvas\n return (2*Math.PI) - (Math.atan2(x, y) + Math.PI);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"## Data Loading","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"### Get Stinky","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"data = stinky.map(d => ({type: \"Feature\", geometry: {type: \"Point\", coordinates: d}}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"import { stinky } from \"095056cccbc4d2e6\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"### Get MapLibre","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"maplibregl = require(\"maplibre-gl@2.1.9\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}