31:T458,viewof map = { // From https://observablehq.com/@tmcw/using-mapbox-gl-js // Create the map container const container = html`

`; const infoContainer = html`

A simple map

See the Mapbox GL examples for interesting things to try out.

`; container.appendChild(infoContainer); const mapContainer = html`

`; container.appendChild(mapContainer); yield mapContainer; yield container; // Inititalize the GL map let map = addMap({ container: mapContainer, center: [24.9103, 60.2280], zoom: 13 }); // Wait until the map loads. map.on("load", () => { container.value = map; container.dispatchEvent(new CustomEvent("input")); }); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); }32:T466,viewof mousePosition = { var container = html``; var loc1 = [24.90549087524414, 60.23359041665548]; var loc2 = [24.914331436157227, 60.23111883067232]; var marker1 = new mapboxgl.Marker().setLngLat(loc1).addTo(map); var marker2 = new mapboxgl.Marker().setLngLat(loc2).addTo(map); map.on('mousemove', function(e) { let dist1 = turf.distance( turf.point([e.lngLat.lng, e.lngLat.lat]), turf.point(loc1) ); let dist2 = turf.distance( turf.point([e.lngLat.lng, e.lngLat.lat]), turf.point(loc2) ); container.innerHTML = // e.point is the x, y coordinates of the mousemove event relative // to the top-left corner of the map JSON.stringify(e.point) + '
' + // e.lngLat is the longitude, latitude geographical position of the event JSON.stringify(e.lngLat.wrap()); container.value = { point: e.point, lngLat: e.lngLat, vol1: 1 - clamp(dist1, 0, 1), vol2: 1 - clamp(dist2, 0, 1) }; wpts.push(e.point); container.dispatchEvent(new CustomEvent("input")); }); return container; }33:[] 2f:{"title":"Location audio control","cells":[{"id":0,"value":"md`# Location audio control`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"mousePosition","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"wpts = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`## Audio`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof audio1_volume = slider({ value: mousePosition.vol1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"(document.getElementById(\"audio1\").volume = audio1_volume)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof audio2_volume = slider({ value: mousePosition.vol2 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"(document.getElementById(\"audio2\").volume = audio2_volume)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"function clamp(num, min, max) {\n return num <= min ? min : num >= max ? max : num;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`## Appendix`","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"import { addMap, mapboxgl } from \"@planemad/mapbox-gl-cartography\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"turf = require('@turf/turf')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}