31:T559,viewof settings = Inputs.form({ windpark: Inputs.radio( [ windkraftanlage_joellenbeck, // windkraftanlage_hollandskopf, //windpark_asseln, { type: "FeatureCollection", description: { name: "Create your own" }, features: [] } ], { label: "Example wind turbine / create your own", format: (geojson) => geojson.description?.name || "Create custom", value: windkraftanlage_joellenbeck } ), windparkName: Inputs.text({ label: "Name of the windpark (used when embedding)", value: "My wind turbine" }), description: Inputs.text({ label: "Optional description (used when embedding)", value: "" }), selectedTurbineModel: Inputs.radio(turbineModels, { label: "Turbine model", value: turbineModels[0], format: (m) => m.name }), show3DTerrain: Inputs.checkbox([" "], { label: "Show 3D terrain", value: [" "] }), animateTurbine: Inputs.checkbox([" "], { label: "Animate turbine", value: [" "] }), height: Inputs.range([0, 500], { value: 98, label: "Hub height (m)", step: 0.5 }), rotation: Inputs.range([0, 360], { value: 180, label: "Rotation (°)", step: 1 }), isEditable: Inputs.radio(["True", "False"], { label: "Allow adding new turbines", value: "True" }) })32:T574,usage_description = { let showAddTurbine = settings.isEditable === "True" ? true : false; // check if query string was passed, in this case override settings let url = new URL(window.location.href); let params = new URLSearchParams(url.search); const mapDataQS = params.get("map-data"); if (mapDataQS) { // parse initial settings (base64) from url let initialSettings = base64Tojson(mapDataQS); if (initialSettings.isEditable !== "True") showAddTurbine = false; } return md`Use \`right click + drag\` to **rotate and pitch** the map or \`click + drag\` the

button. ${ showAddTurbine ? `To add a new wind turbine, click the

button, then place the turbine on the map by clicking on the desired location.` : "" } `; }33:T313d,viewof wind_turbine_map = { const container = html`

`; yield container; forceReload; let initialSettings = viewof settings.value; // check if query string was passed, in this case override settings let url = new URL(window.location.href); let params = new URLSearchParams(url.search); const mapDataQS = params.get("map-data"); if (mapDataQS) { // parse initial settings (base64) from url initialSettings = base64Tojson(mapDataQS); console.log(initialSettings); console.log(initialSettings); mutable currentView = { center: initialSettings.center, pitch: initialSettings.pitch, bearing: initialSettings.bearing, zoom: initialSettings.zoom }; // remove from url params.delete("map-data"); } let showTerrain = initialSettings.show3DTerrain.length; let selectedWindpark = initialSettings.windpark; let selectedWindparkProps = selectedWindpark.description; let modelCenter = selectedWindpark.features.length ? selectedWindpark.description.center || turf.centroid(selectedWindpark).geometry.coordinates : [8.483355, 52.10006]; let showAnimation = initialSettings.animateTurbine.length ? true : false; let selectedTurbineModel = initialSettings.selectedTurbineModel; let animationDuration = 35 * 1000; let turbineModelHeight = selectedTurbineModel.modelHeight; let turbineScalingFactor = turbineModelHeight / selectedTurbineModel.hubHeight; let loading = false; const meshCache = {}; const floormaterial = new THREE.MeshPhongMaterial({ color: 0xffff00, opacity: 1, // wireframe: true, side: THREE.DoubleSide }); const shadowmaterial = new THREE.ShadowMaterial({ side: THREE.DoubleSide }); shadowmaterial.opacity = 1; const map = new mapboxgl.Map({ container: container, style: selectedBasemap[0], zoom: selectedWindparkProps.zoom || 2, center: modelCenter, transformRequest: (url, resourceType) => { if (url.includes("mapbox.mapbox-terrain-dem-v1/") && showTerrain) { // it's a request to the terrain source! // parse the slippy map tile from the request console.log(url); const slippyTile = url.split("mapbox-terrain-dem-v1/")[1].split(".")[0]; // check if the tile is already in the cache if (meshCache[slippyTile]) return; // only load tile of zoom 14 // if (!slippyTile.startsWith("14")) return; // console.log(slippyTile); createMeshForSlippyTile({ slippyTile, elevationOffset: 5, // terrainExaggeration: 1.01, mapboxAccessToken: mapboxgl.accessToken }).then((res) => { const { geometry, tileStartingCoord } = res; meshCache[slippyTile] = true; let threeMesh = new THREE.Mesh(geometry, shadowmaterial); threeMesh.name = "terrain"; threeMesh = tb.Object3D({ obj: threeMesh, units: "meters" }); threeMesh.setRotation({ y: 0, x: 0, z: 90 }); threeMesh.receiveShadow = true; threeMesh.castShadow = true; threeMesh.setCoords(tileStartingCoord); tb.add(threeMesh); tb.update(); }); console.log(slippyTile); } }, pitch: selectedWindparkProps.pitch || 0, bearing: selectedWindparkProps.bearing || 0, preserveDrawingBuffer: true, antialias: true }); if (mutable currentView) { map.flyTo({ ...mutable currentView, duration: 0 }); } const geocodeControl = new MapboxGeocoder({ accessToken: mapboxgl.accessToken, mapboxgl: mapboxgl }); if (initialSettings.isEditable === "True") { map.addControl(geocodeControl); } const navigationControl = new mapboxgl.NavigationControl({ visualizePitch: true }); map.addControl(navigationControl); const Draw = new MapboxDraw({ displayControlsDefault: false, // Select which mapbox-gl-draw control buttons to add to the map. controls: { point: true, trash: false } }); if (initialSettings.isEditable === "True") { map.addControl(Draw, "top-right"); } // map event listeners map.on("load", function () { if (selectedWindpark.features.length) { add3DLayer(); } }); map.on("move", () => { modelCenter = map.getCenter().toArray(); mutable currentView = { center: modelCenter, pitch: map.getPitch(), bearing: map.getBearing(), zoom: map.getZoom() }; updateContainerValue(initialSettings, mutable currentView); }); map.on("draw.modechange", (e) => { if (e.mode === "draw_point") { tb.defaultCursor = "crosshair"; } else { tb.defaultCursor = "grab"; } }); map.on("draw.create", async function (e) { Draw.delete(e.features[0].id); selectedWindpark.features.push(e.features[0]); const countTurbines = selectedWindpark.features.length; // remove all models and layers await remove3DLayer(); // create new layer with updated wind park await add3DLayer(); updateContainerValue(initialSettings, mutable currentView); }); // initialize threebox let tb = (window.tb = new Threebox.Threebox( map, map.getCanvas().getContext("webgl"), { realSunlight: true, sky: selectedBasemap[1].includes("Transparent") ? false : true, enableSelectingObjects: false, enableTooltips: false, terrain: showTerrain } )); tb.defaultCursor = "grab"; let geometry = false; let meshes = []; let modelReferences = []; const date = new Date(viewof dateInput.value); updateContainerValue(initialSettings, mutable currentView); // observable input event listeners viewof dateInput.addEventListener("input", () => { if (loading) return; const oldDate = new Date(date); const newDate = viewof dateInput.value; date.setMonth(newDate.getMonth()); date.setDate(newDate.getDate()); date.setHours(oldDate.getHours(), oldDate.getMinutes()); mutable curSunlightTime = date; map.triggerRepaint(); }); viewof hourInput.addEventListener("input", () => { if (loading) return; const hourIndex = viewof hourInput.value; const newHour = calcSunlightTime(modelCenter, date, hourIndex); date.setHours(newHour.getHours(), newHour.getMinutes()); mutable curSunlightTime = date; map.triggerRepaint(); }); viewof settings.addEventListener("input", async () => { loading = true; const newSettings = viewof settings.value; // stop animation during settings update modelReferences.forEach((ref) => { ref.stop(); }); //if (newSettings.animateTurbine.length === 0) { //} // update terrain try { tb.terrain = newSettings.show3DTerrain.length ? true : false; } catch (error) { console.log(error); } if (tb.terrain && !showTerrain) { // wait for data to load console.log("waiting for terrain"); await map.once("idle"); } // update controls if they changed if (newSettings.isEditable !== initialSettings.isEditable) { if (newSettings.isEditable === "True") { // remove navigation control first, // so that geocoder remains on top map.removeControl(navigationControl); map.addControl(geocodeControl); map.addControl(navigationControl); map.addControl(Draw, "top-right"); } else { map.removeControl(geocodeControl); map.removeControl(Draw, "top-right"); } } // update settings data updateSettings(newSettings); await remove3DLayer(); await add3DLayer(); loading = false; updateContainerValue(newSettings, mutable currentView); }); function updateSettings(newSettings) { showTerrain = newSettings.show3DTerrain.length ? true : false; selectedWindpark = newSettings.windpark; selectedWindparkProps = selectedWindpark.description; modelCenter = selectedWindpark.features.length ? turf.centroid(selectedWindpark).geometry.coordinates : [8.483355, 52.10006]; showAnimation = newSettings.animateTurbine.length ? true : false; selectedTurbineModel = newSettings.selectedTurbineModel; turbineModelHeight = selectedTurbineModel.modelHeight; turbineScalingFactor = turbineModelHeight / selectedTurbineModel.hubHeight; initialSettings = newSettings; } function updateContainerValue(settings, view) { container.value = { ...settings, ...view }; container.dispatchEvent(new Event("input", { bubbles: true })); } function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } async function remove3DLayer() { try { await tb.clear(); } catch (error) { console.log(error); } if (map?.getLayer("3d-model")) { map.removeLayer("3d-model"); } } async function add3DLayer() { const customLayer = await createCustomLayer("3d-model"); map.addLayer(customLayer); } async function createCustomLayer(layerName) { // create model url // Source of Enercon E70 model: https://www.blendswap.com/blend/16126, // Source of Generic Wind Turbine (modeled after Vestas V136) const url = selectedTurbineModel.url; const animationDuration = 35 * 1000 + 10; //create the layer let customLayer3D = { id: layerName, type: "custom", renderingMode: "3d", onAdd: function (map, gl) { console.log(tb.lights); tb.lights.dirLight.shadow.normalBias = 5; // tb.lights.dirLight.shadow.bias = 0.0001; let options = { type: "gltf", // IMPORTANT - DO NOT REMOVE // the mtl option MUST be present, it just needs a URL that returns a 200 status code // if you uncommented / delete the mtl option the actual object won't load // Thanks @mootari for debugging this mtl: "https://cdn.jsdelivr.net/npm/threebox-plugin@2.2.7/examples/models/radar/", obj: url, units: "meters", scale: (initialSettings.height * turbineScalingFactor) / turbineModelHeight / devicePixelRatio, rotation: { x: 90, y: initialSettings.rotation, z: 0 }, anchor: "auto", cloned: true }; // tb.enableDraggingObjects = true; // tb.enableRotatingObjects = true; for (let i = 0; i < selectedWindpark.features.length; ++i) { const location = selectedWindpark.features[i]; const origin = location.geometry.coordinates; tb.loadObj(options, function (model) { if (!geometry) { model.traverse(function (object) { if (object.isMesh) meshes.push(object.geometry); }); geometry = true; } // query height of location const height = map.queryTerrainElevation( { lng: origin[0], lat: origin[1] }, { exaggerated: false } ); const coordinates = [ origin[0], origin[1], showTerrain ? origin[2] || height : 0 ]; const turbine = model.setCoords(coordinates); modelReferences.push(turbine); model.addTooltip(location.properties?.name || "Wind turbine", true); turbine.addEventListener( "ObjectChanged", // "SelectedChange", (e) => { console.log(e); }, false ); tb.add(turbine); model.castShadow = true; tb.lights.dirLight.target = model; }); } // start the animation animate(); }, render: function (gl, matrix) { tb.setSunlight(date, modelCenter); //set Sun light for the given datetime and lnglat tb.update(); }, onRemove: function () { cancelAnimationFrame(lastRequestId); } }; return customLayer3D; } let lastRequestId; function animate(timestamp) { tb.previousFrameTime = timestamp; if (modelReferences.length && showAnimation && !loading) { modelReferences.forEach((modelRef, i) => { modelRef.playDefault({ animation: 0, duration: animationDuration }); }); } lastRequestId = requestAnimationFrame(animate); } invalidation.then(async () => { await tb.dispose(); map.remove(); }); }34:Tc6e,{ const styles = htl.html` `; const container = htl.html`

`; yield container; const header = htl.html` `; let content = htl.html`

${shareURL}

`; container.appendChild(styles); container.appendChild(header); container.appendChild(content); const copyButton = document.getElementById("copy-button"); const headerTabs = document.getElementById("header-tabs").children; let curTab = "URL"; copyButton.addEventListener("click", function (e) { if (curTab === "URL") navigator.clipboard.writeText(shareURL); else navigator.clipboard.writeText(iframe_html); copyButton.style.color = "green"; copyButton.innerHTML = "done"; setTimeout(() => { copyButton.style.color = "grey"; copyButton.innerHTML = "content_copy"; }, 3000); }); for (let index = 0; index < headerTabs.length; ++index) { const tab = headerTabs[index]; tab.addEventListener("click", (e) => { if (e.target.innerText === "URL") { curTab = "URL"; content.innerHTML = `

${shareURL}

`; headerTabs[0].classList.add("active"); headerTabs[1].classList.remove("active"); } else { curTab = "Embed"; content.innerText = `${iframe_html}`; headerTabs[1].classList.add("active"); headerTabs[0].classList.remove("active"); } }); } }35:T4d2,iframe_html = `

${ settings.windparkName }

${ settings.description ? `

${settings.description}

` : "" }

`36:[{"id":"e7cb6dfa74087871716cd7a8c212401295922c3ffa6e131e21ec140aa7efc51f4e5d71e643dd45a76d24c77af37a347d794c534ad0a3762bbd1fbffd046b19b2","href":"https://static.observableusercontent.com/files/e7cb6dfa74087871716cd7a8c212401295922c3ffa6e131e21ec140aa7efc51f4e5d71e643dd45a76d24c77af37a347d794c534ad0a3762bbd1fbffd046b19b2","name":"wind_turbine.glb","type":"model/gltf-binary","lastModified":1673282934095.202,"size":274944},{"id":"8e294a3ffa1d862d9943137030d38f68a332ac06141ac035979af716a54f5b4c4296059a8ca765d44a0640e5f919a04b56fffa0a9a2c94aaae76517458e68d36","href":"https://static.observableusercontent.com/files/8e294a3ffa1d862d9943137030d38f68a332ac06141ac035979af716a54f5b4c4296059a8ca765d44a0640e5f919a04b56fffa0a9a2c94aaae76517458e68d36","name":"Enercon_E70_2.glb","type":"model/gltf-binary","lastModified":1673532080111.897,"size":4598204},{"id":"279be7b0c096835312fec81001d7924a9de16489e5e3c9f86845ffb24440ff49c8f52aaf841326ffdca3b3dd0c60aca5dbe91177b24e25fcb787a3ffef099ed0","href":"https://static.observableusercontent.com/files/279be7b0c096835312fec81001d7924a9de16489e5e3c9f86845ffb24440ff49c8f52aaf841326ffdca3b3dd0c60aca5dbe91177b24e25fcb787a3ffef099ed0","name":"image@1.png","type":"image/png","lastModified":1673732994505.683,"size":4500},{"id":"22916be3a1c538c6287d43c98eeb13403e2dcbe82ff45238841fe94b74a231e079ab8964996473176ac90452d4354e168448f92cb10f5c265aefedd06133a083","href":"https://static.observableusercontent.com/files/22916be3a1c538c6287d43c98eeb13403e2dcbe82ff45238841fe94b74a231e079ab8964996473176ac90452d4354e168448f92cb10f5c265aefedd06133a083","name":"wind_turbine@1.drawio.png","type":"image/png","lastModified":1673736132779.316,"size":10650}] 2f:{"title":"Visualizing wind turbines in 3D using threebox","cells":[{"id":0,"value":"# Visualizing wind turbines in 3D using threebox","pinned":false,"hidden":false,"mode":"md"},{"id":1432,"value":"**Update: Shadows now work in 3D terrains as well!**","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"paragraph1 = md`Wind energy is a clean and renewable energy source that plays a vital role in reducing our reliance on fossil fuels. However, the construction of new wind turbines often faces low acceptance rates among local communities. One of the main concerns is the fear of landscape degradation, with many people viewing wind turbines as \"blots on the landscape\"^{[[1](#footnote1)]}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":850,"value":"paragraph2 = md`To address this concern, interactive visualizations are required that allow for a fair and transparent discussion about the visual impact of a new wind turbine project^{[[2](#footnote2)]}. This notebook demonstrates a free and simple method for creating such visualizations using [threebox](https://github.com/jscastro76/threebox), an open-source [Three.js](https://threejs.org/) plugin for [Mapbox GL JS](https://www.mapbox.com/). Creating your own wind turbine visualization only involves 3 steps, so let's get started!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"md`## 1. Adjust wind turbine settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"viewof selectedBasemap = Inputs.radio(basemapOptions, {\n value: basemapOptions[0],\n label: \"Select a basemap\",\n format: (b) => b[1]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"md`## 2. Add turbines to the map and adjust view `","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"viewof dateInput = Scrubber(dates, {\n autoplay: true,\n delay: 500,\n format: (date) =>\n \"Sunlight on \" +\n date.toLocaleString(\"en\", { month: \"long\", day: \"numeric\" })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"viewof hourInput = Scrubber(hours, {\n autoplay: true,\n format: () =>\n \"Time of day: \" +\n mutable curSunlightTime.toLocaleTimeString(\"en\", {\n hour12: false,\n hour: \"2-digit\",\n minute: \"2-digit\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"md`## 3. Share your custom wind turbine visualization!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1296,"value":"md`Use the following link (URL) to share your wind turbine map, or embed it into another website using the \\`html\\` snippet provided in the Embed tab.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"md`> **_Why is this link (URL) so long?:_** All of your custom wind turbine settings are stored within the URL instead of storing them on a server, making it longer than most other URLs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"md`You may also download an \\`html\\` file embedding your custom wind turbine map using the following button. Note that the \\`html\\` won't run if you open it as a local file due to CORS policy (https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"DOM.download(\n new Blob([iframe_html], {\n type: \"text/plain\"\n }),\n \"wind-turbine-3d-visualization.html\",\n `Download wind-turbine-3d-visualization.html`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1313,"value":"md`## Known issues\n\n- Map remains dark, regardless of sunlight times -> **fix: switch basemap, and switch back**\n- Upon viewport changes, the wind turbines are distorted / misplaced -> known issue in threebox (https://github.com/jscastro76/threebox/issues/293) **fix: reload wind_turbine_map cell**\n- Toggling 3D terrain removes wind turbines -> **fix: switch basemap, and switch back**\n- No shadows are shown when 3D terrain is present -> there's currently no way to access the 3D terrain mesh used by mapbox internally, which would be needed to calculate correct shadows in three.js. Please advise if you have an idea for how to fix this! (https://github.com/jscastro76/threebox/issues/381)\n- Console is flooded with errors when turbines are animated -> To the best of my knowledge, threebox does not provide any error handlers where these errors could be intercepted. Please advise if you have an idea for fixing!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`### References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"footnote1 = footnote(\n \"paragraph1\",\n 1,\n `Herring, H. (2004) – “Windy blots on the landscape?”. Organization & Environment\nVol. 17, No. 4 (December 2004), pp. 533-537 (5 pages)\nPublished By: Sage Publications, Inc. Retrieved from: ‘https://www.jstor.org/stable/26162407’ [Last Accessed 11.01.2023]`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"footnote2 = footnote(\n \"paragraph2\",\n 2,\n `Grassi, S., & Klein, T. M. (2016). 3D augmented reality for improving social acceptance and public participation in wind farms planning. In Journal of Physics: Conference Series (Vol. 749, No. 1, p. 012020). IOP Publishing. Retrieved from: ‘https://iopscience.iop.org/article/10.1088/1742-6596/749/1/012020/meta’ [Last Accessed 11.01.2023]`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"md`### Methods & Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"shareURL = `https://observablehq.com/@chrispahm/visualizing-wind-turbines-in-3d-using-threebox?map-data=${jsonToBase64(\n wind_turbine_map\n)}#dateInput`","pinned":false,"hidden":false,"mode":"ojs"},{"id":960,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"mutable currentView = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"mutable curSunlightTime = new Date()","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"function calcSunlightTime(coord, day, index) {\n // get sunrise and sunset for currently selected date\n const times = SunCalc.getTimes(day, coord[1], coord[0]);\n // get time difference in minutes\n const timeDiff = (times.sunset - times.sunrise) / (1000 * 60);\n // slice into equal parts according to currently selected day\n const minuteSlices = timeDiff / hours.length;\n // get current sunlight time for given index\n const start = times.sunrise.getMinutes();\n const curSunlightTime = new Date(times.sunrise);\n curSunlightTime.setMinutes(start + minuteSlices * index);\n return curSunlightTime;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"turbineModels = [\n {\n url: await FileAttachment(\"Enercon_E70_2.glb\").url(),\n modelHeight: 89,\n hubHeight: 85,\n name: \"Enercon E70\"\n },\n {\n url: await FileAttachment(\"wind_turbine.glb\").url(),\n modelHeight: 220,\n hubHeight: 125.5,\n name: \"Vestas V136-3.45\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"basemapOptions = [\n [\"mapbox://styles/mapbox/satellite-v9\", \"Satellite\"],\n [\"mapbox://styles/mapbox/satellite-streets-v11\", \"Satellite-Streets\"],\n [\n \"mapbox://styles/toffi/clcroxqez00ew14ldga325352\",\n \"Transparent (for photo montages)\"\n ]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"footnote = (referencingCellName, number, text) => {\n return html`

^ ${text}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"windkraftanlage_hollandskopf = ({\n type: \"FeatureCollection\",\n description: {\n name: \"Windkraftanlage Hollandskopf\",\n zoom: 15,\n pitch: 70\n },\n features: [\n {\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: [8.281944, 52.115, 307]\n },\n properties: {\n name: \"Windrkaftanlage Hollandskopf\"\n }\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"windkraftanlage_joellenbeck = ({\n type: \"FeatureCollection\",\n description: {\n name: \"Windkraftanlage Jöllenbeck\",\n center: [8.482079840791243, 52.10062194039986],\n pitch: 71.49999999999994,\n bearing: -50.39999999999992,\n zoom: 17.17171513940881\n },\n features: [\n {\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: [8.4833, 52.10006]\n },\n properties: {\n name: \"Windrkaftanlage Jöllenbeck\"\n }\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"function jsonToBase64(json) {\n return encodeURIComponent(btoa(JSON.stringify(json)));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":984,"value":"function base64Tojson(base64) {\n return JSON.parse(atob(decodeURIComponent(base64)));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"dates = Array.from({ length: 365 }, (_, i) => {\n const date = new Date(2023, 0, 1);\n date.setDate(i + 1);\n return date;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"hours = Array.from({ length: 960 }, (_, i) => {\n return i;\n})\n/*\nhours = {\n // get sunrise and sunset for currently selected date\n const times = SunCalc.getTimes(date, centroid[1], centroid[0]);\n // get time difference in minutes\n const timeDiff = (times.sunset - times.sunrise) / (1000 * 60);\n // create an array of minutes from sunrise to sunset\n const start = times.sunrise.getMinutes();\n const arr = [];\n for (let i = 0; i < Math.floor(timeDiff); ++i) {\n const newMinute = new Date(times.sunrise);\n newMinute.setMinutes(start + i);\n arr.push(newMinute);\n }\n return arr;\n}\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":1349,"value":"mutable forceReload = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"THREE = Threebox.THREE","pinned":false,"hidden":false,"mode":"ojs"},{"id":1370,"value":"import { createMeshForSlippyTile } from \"ef613bbe681dfc58\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"SunCalc = require(\"suncalc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"MapboxDraw = {\n const href = await require.resolve(\n \"@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css\"\n );\n document.head.appendChild(html``);\n\n return require(\"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.1.2/mapbox-gl-draw.js\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"MapboxGeocoder = {\n const MapboxGeocoder =\n await require(\"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js\");\n\n document.head.appendChild(\n html``\n );\n return MapboxGeocoder;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"turf = require(\"@turf/turf\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"Threebox = (await import(\"https://esm.sh/threebox-plugin@2.2.7\")).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.10.0\");\n if (!gl.accessToken) {\n // token allowed only this Observable\n gl.accessToken =\n \"pk.eyJ1IjoidG9mZmkiLCJhIjoiY2lvMDBxMzR3MDB1eHZza2x4NGI2YjI5OSJ9.IEaNA05pWbT92nOu-lEOYw\";\n const href = await require.resolve(\"mapbox-gl@2.10.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}