25:["$","title",null,{"children":"Interactive plane ✈️ | melanie | Observable"}] 49:T14a6,viewof map2 = { let buttonText = "Welcome!"; const container = html`

`; const footer = html`

Flight progress
Distance

4710 km
Time to go

2h 45min
Altitude

11889 m
Speed

878 km/h
Local time

08:25 am
Local radio station

Radio Alistiqama

`; const button = html`

${buttonText}

`; const parent = html`

`; parent.appendChild(button); parent.appendChild(container); parent.appendChild(footer); //console.log(test); const configs = config.tenerifaHelsinki; let bearing = turf.bearing(configs.origin, configs.destination); const map = new mapboxgl.Map({ container, style, center: configs.mapCenter, zoom: configs.zoom, projection: 'globe', pitch: 40, attributionControl: false }); invalidation.then(() => map.remove()); map.addControl(new mapboxgl.FullscreenControl()); container.value = map; map.on('load', () => { map.resize(); addIconLayers(map, features, bearing); container.dispatchEvent(new CustomEvent('input')); }); // wait for the terrain to load before starting animations map.once('idle', () => { // animate const distance = turf.lineDistance(features.route); let start; const animationDuration = configs.animationDuration; //get countries from source for geofencing const countries = map.querySourceFeatures('composite', {sourceLayer: 'country_boundaries'}); const intersectingCountries = countries.filter((country) => turf.booleanIntersects(features.route, country)); function frame(time) { if (!start) start = time; const phase = (time - start) / animationDuration; const pointAlongRoute = turf.along( features.route.features[0], distance * phase ); map.getSource('animatedIconSource').setData(pointAlongRoute); //this would be nicer with line-gradient, but can't get it to work const split = turf.lineSplit(features.route.features[0], pointAlongRoute); map.getSource('routeSourceUpdated').setData(split.features[0]); //start camera behind const translatedRoute = turf.transformTranslate(features.route.features[0], -800, bearing); const pointAlongRouteCamera = turf.along( translatedRoute, distance * phase ); //interate through country subset and update button intersectingCountries.forEach((country) => { if (turf.booleanPointInPolygon(pointAlongRoute, country)) { document.getElementById('mapbutton').innerHTML = country.properties.name; } }) //constantly update bearing, otherwise icons gets off track bearing = turf.bearing(pointAlongRoute, configs.destination); map.setLayoutProperty( 'animatedIconShadow', 'icon-rotate', bearing ); map.setLayoutProperty( 'animatedIcon', 'icon-rotate', bearing ); if(followBtn)updateCamera(map, bearing, pointAlongRouteCamera.geometry.coordinates, configs); if (phase > 1) { return; } requestAnimationFrame(frame); } requestAnimationFrame(frame); }); return parent; }4a:Tbc2,function addIconLayers(map, features, bearing) { // add source and layer in original position let arc = []; const lineDistance = turf.lineDistance(features.route); const steps = 1000; for (let i = 0; i < lineDistance; i += lineDistance / steps) { const segment = turf.along(features.route.features[0], i); arc.push(segment.geometry.coordinates); } // Update the route with calculated arc coordinates features.route.features[0].geometry.coordinates = arc; map.addSource('routeSource', { type: 'geojson', data: features.route }); map.addSource('routeSourceUpdated', { type: 'geojson', data: features.route2 }); map.addSource('animatedIconSource', { type: 'geojson', data: features.point }); map.addLayer({ id: 'animatedIconShadow', type: 'symbol', source: 'animatedIconSource', layout: { "icon-image": "plane-symbol-black-simple", "icon-rotation-alignment": "map", "icon-allow-overlap": true, "icon-ignore-placement": true, "icon-offset": [20, 40], "icon-size": [ "step", ["zoom"], 0.5, 4, 1 ] }, paint: { "icon-opacity": 0.4 } }); map.addLayer({ id: 'animatedIcon', type: 'symbol', source: 'animatedIconSource', layout: { "icon-image": "plane-symbol-simple", "icon-rotation-alignment": "map", "icon-allow-overlap": true, "icon-ignore-placement": true, "icon-size": [ "step", ["zoom"], 0.5, 4, 1 ] } }); map.addLayer({ id: 'animatedNorth', type: 'symbol', source: 'animatedIconSource', layout: { "icon-image": "north-symbol-white", "icon-rotation-alignment": "map", "icon-allow-overlap": true, "icon-ignore-placement": true, "icon-size": [ "step", ["zoom"], 0.5, 4, 1.3 ] }, paint: { 'icon-opacity': 0.4 } }); map.addLayer({ id: 'route', source: 'routeSource', type: 'line', paint: { 'line-width': 8, 'line-color': '#a1ccf7' } }, 'animatedIcon'); map.addLayer({ id: 'routeUpdated', source: 'routeSourceUpdated', type: 'line', paint: { 'line-width': 9, 'line-color': '#0e73d8' } }); map.setLayoutProperty( 'animatedIcon', 'icon-rotate', bearing ); map.setLayoutProperty( 'animatedIconShadow', 'icon-rotate', bearing ); //need to figure out why this is not working // map.setPaintProperty( // "route", // "line-gradient", [ // "step", ["line-progress"], // "yellow", // 0.5, // '#0e73d8', // ] // ); }4b:T7d7,viewof map = { const container = html`

`; const map = new mapboxgl.Map({ container, style, center: [110, 10.589], zoom: 3, projection: 'globe', pitch: 40, attributionControl: false }); invalidation.then(() => map.remove()); map.addControl(new mapboxgl.FullscreenControl()); container.value = map; map.on('load', () => { map.resize(); const poly = turf.polygon([planeFeatures]); // add source and layer in original position map.addSource('planeSource', { type: 'geojson', data: poly }); map.addSource('trailSource', { type: 'geojson', data: trailFeature }); map.addLayer({ id: 'animatedPoly', type: 'fill-extrusion', source: 'planeSource', paint: { 'fill-extrusion-height': 500005, 'fill-extrusion-base': 500000, 'fill-extrusion-color': 'hsl(0, 0%, 100%)', 'fill-extrusion-vertical-gradient': false } }); map.addLayer({ id: 'animatedShadow', type: 'fill', source: "planeSource", paint: { 'fill-color': 'hsl(0, 2%, 55%)', 'fill-opacity': 0.3 } }); const deltaLon = 360; function translate(features, deltaLon, deltaLat) { const updatedFeatures = features.map( coords => [coords[0] + deltaLon, coords[1] + deltaLat]) const translated = turf.polygon([updatedFeatures]); //map.setCenter(turf.centroid(translated).geometry.coordinates); map.getSource('planeSource').setData(translated); } //animate let i = 0; const timer = setInterval(() => { if (i <= deltaLon) { translate(planeFeatures, i, 0); i++; } else { i = 0 } }, 20); container.dispatchEvent(new CustomEvent('input')); }); return container; }4c:T866,planeFeatures = [ [ 9.38232421875, 14.912938374530881 ], [ 11.6015625, 11.393879232967407 ], [ 13.831787109375, 11.393879232967407 ], [ 14.2822265625, 11.296934440596317 ], [ 14.666748046875, 11.081384602413067 ], [ 14.864501953125, 10.822515257716773 ], [ 14.91943359375, 10.54182109465907 ], [ 14.666748046875, 10.07703715440472 ], [ 14.2822265625, 9.860628145365894 ], [ 13.51318359375, 9.763197528547252 ], [ 11.6015625, 9.774024565864735 ], [ 9.38232421875, 6.249776453227824 ], [ 8.756103515625, 6.468151012664208 ], [ 9.788818359375, 9.774024565864735 ], [ 7.22900390625, 9.990490803070287 ], [ 6.85546875, 9.427386615032361 ], [ 6.6357421875, 9.297306856327594 ], [ 6.427001953125, 9.362352822055598 ], [ 6.251220703125, 9.654907854199024 ], [ 6.251220703125, 11.501556900932485 ], [ 6.43798828125, 11.802834233547685 ], [ 6.6357421875, 11.867350911459312 ], [ 6.85546875, 11.738302371436859 ], [ 7.22900390625, 11.167623774602276 ], [ 9.788818359375, 11.393879232967407 ], [ 8.756103515625, 14.700508321287572 ], [ 9.38232421875, 14.912938374530881 ] ]4d:[] 29:{"id":"78a209c811f465cf","slug":null,"title":"Interactive plane ✈️","thumbnail":"e7bce6c3a9ffcba22a1fa7af3ebc2cb9d13f3b65c593460c9697bdd0743f63b4","access_level":"public","create_time":"$D2022-06-29T19:52:14.499Z","update_time":"$D2023-01-17T17:48:47.960Z","view_time":null,"first_public_time":"$D2023-01-11T15:22:58.606Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"1f65c0c34e067cf5","login":"melanieimfeld","name":"melanie","avatar_url":"https://avatars-next.observableusercontent.com/5e4def76cc2b89e5b95e43bb74fce7d27bf36e1ec532f985dfd658281b4da323","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1853,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"72b52bde50c932ea","login":"melanieimfeld","name":"melanie","avatar_url":"https://avatars-next.observableusercontent.com/5e4def76cc2b89e5b95e43bb74fce7d27bf36e1ec532f985dfd658281b4da323","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"72b52bde50c932ea","login":"melanieimfeld","name":"melanie","avatar_url":"https://avatars-next.observableusercontent.com/5e4def76cc2b89e5b95e43bb74fce7d27bf36e1ec532f985dfd658281b4da323","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive plane ✈️","cells":[{"id":0,"value":"

Interactive plane ✈️

Add your own token & Style URL to see what your map looks like with a fancy plane.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"viewof accessToken = Inputs.text({\n label: \"Access token\",\n value: \"pk.eyJ1IjoicmVkZXNpZ25pbmciLCJhIjoiY2t2NmdmbGZzMTd2ODJubHVqcmQ1bXcxMiJ9.3_k3e6aGsBFN_fKBIoLQ9g\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof style = Inputs.select(\n [\n \"mapbox://styles/redesigning/clcyugnlu003q15n05aoo0g1b\"\n ], {label: \"Style\"}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"viewof followBtn = Inputs.toggle({label: \"Follow plane?\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"config = ({\n tenerifaHelsinki: {\n mapCenter: [7.94, 47.76],\n zoom: 2.5,\n baseHeight: 400000,\n animationDuration: 40000,\n origin: [-16.573646, 28.045815],\n destination: [24.950846, 60.319445]\n },\n milanFrankfurt: {\n mapCenter: [9.188540, 45.464664],\n zoom: 5,\n baseHeight: 10000,\n animationDuration: 150000,\n origin: [9.188540, 45.464664],\n destination: [4.351721, 50.850346] \n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1338,"value":"features = ({\n route: {\n 'type': 'FeatureCollection',\n 'features': [\n {\n 'type': 'Feature',\n 'geometry': {\n 'type': 'LineString',\n 'coordinates': [config.tenerifaHelsinki.origin, config.tenerifaHelsinki.destination]\n }\n }\n ]\n },\n route2: {\n 'type': 'FeatureCollection',\n 'features': [\n {\n 'type': 'Feature',\n 'geometry': {\n 'type': 'LineString',\n 'coordinates': [0,0]\n }\n }\n ]\n },\n point: {\n 'type': 'FeatureCollection',\n 'features': [\n {\n 'type': 'Feature',\n 'properties': {},\n 'geometry': {\n 'type': 'Point',\n 'coordinates': [config.tenerifaHelsinki.origin]\n }\n }\n ]\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1847,"value":"In this prototype, I used two plane svg icons (one for the plane and one for the shadow) to create a fake 3D effect. Note: you will need to add an image for the plane if you decided to use your own Studio style.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1636,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"function updateCamera(map, bearing, alongCamera, configs) {\n const camera = map.getFreeCameraOptions();\n\n camera.position = mapboxgl.MercatorCoordinate.fromLngLat(\n {\n lng: alongCamera[0],\n lat: alongCamera[1]\n },\n configs.baseHeight\n );\n \n camera.lookAtPoint({\n lng: alongCamera[0],\n lat: alongCamera[1]\n });\n camera.setPitchBearing(71, bearing);\n map.setFreeCameraOptions(camera);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"function rotatePoly(features, angle) { return turf.transformRotate(features, angle)}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"function translatePoly(poly, to) {\n const center = turf.centroid(poly);\n const from = turf.point([center.geometry.coordinates[0], center.geometry.coordinates[1]]);\n // const to = turf.point([4, 35]);\n const bearing = turf.rhumbBearing(from, to);\n const distance = turf.rhumbDistance(from, to);\n console.log(distance);\n const translatedPoly = turf.transformTranslate(poly, distance, bearing);\n map.getSource('planeSource').setData(translatedPoly);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"function add3Dlayers(map, poly, configs) {\n map.addLayer({\n id: 'animatedPoly',\n type: 'fill-extrusion',\n source: 'planeSource',\n paint: {\n 'fill-extrusion-height': configs.baseHeight + 5,\n 'fill-extrusion-base': configs.baseHeight,\n 'fill-extrusion-color': 'hsl(0, 0%, 0%)',\n 'fill-extrusion-vertical-gradient': false\n }\n });\n\n map.addSource('planeSource', {\n type: 'geojson',\n data: poly\n });\n\n map.addLayer({\n id: 'animatedShadow',\n type: 'fill',\n source: \"planeSource\",\n paint: {\n 'fill-color': 'hsl(0, 2%, 55%)',\n 'fill-opacity': 0.3\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"In this prototype, the plane is moving without flight path and using an elevated fill-extrusion for realistic 3D. The problems with this approach are distortion of the shape around the poles and difficulties to control colors of the fill-extrusion.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"mapboxgl = {\n const gl = await require(\"https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js\");\n if (!gl.accessToken) {\n gl.accessToken = accessToken;\n const href = await require.resolve(\"mapbox-gl@2.12.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"trailFeature = ({\n \"type\": \"Feature\",\n \"properties\": {},\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n 0,\n -0.2\n ],\n [\n 180,\n -0.2\n ],\n [\n 180,\n 0.2\n ],\n [\n 0,\n 0.2\n ],\n [\n 0,\n -0.2\n ]\n ]\n ]\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"turf = require(\"@turf/turf@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null