31:T17b1,{ let container = html`

`; // Give the container dimensions. yield container; // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, center: [13.7964765, 25.7144583], zoom: 2, maxZoom: 20, style: "mapbox://styles/mapbox/" + style, // This is all one needs to set the projection. Values are derived from the input cell defined above. projection: { name: projection }, scrollZoom: true, cooperativeGestures: true }); map.on("load", () => { // Set the default atmosphere style map.setFog({}); map.loadImage( "https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png", (error, image) => { if (error) throw error; map.addImage("custom-marker", image); map.addSource("points", { type: "geojson", data: foss4g_twitter_user_locs2 }); // Add a symbol layer map.addLayer({ id: "points", type: "symbol", source: "points", layout: { "icon-image": "custom-marker", "icon-size": [ "interpolate", ["linear"], ["zoom"], 0, 0.1, 3, 0.3, 5, 0.4, 7, 0.6, 10, 0.7 ], "icon-allow-overlap": true // get the title name from the source's "title" property // "text-field": ["get", "username"], // "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], // "text-offset": [0, 1.25], // "text-anchor": "top" } }); const popups = []; map.on("mouseenter", "points", (e) => { //clear existing popups popups.forEach((p) => p.remove()); popups.length = 0; //TODO if there are multiple features at the point, generate multiple profile entries // Copy coordinates array. const coordinates = e.features[0].geometry.coordinates.slice(); const props = e.features[0].properties; const description = `

${props.name} @${props.username} ·
${props.location}

`; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } const popup = new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(description) .addTo(map); popups.push(popup); }); // Change the cursor to a pointer when the mouse is over the places layer. map.on("mouseenter", "points", () => { map.getCanvas().style.cursor = "pointer"; }); // Change it back to a pointer when it leaves. map.on("mouseleave", "points", () => { map.getCanvas().style.cursor = ""; }); } ); }); map.addControl(new mapboxgl.NavigationControl(), "top-right"); //Make it spin // At low zooms, complete a revolution every two minutes. const secondsPerRevolution = 90; // Above zoom level 5, do not rotate. const maxSpinZoom = 5; // Rotate at intermediate speeds between zoom levels 3 and 5. const slowSpinZoom = 3; let userInteracting = false; let spinEnabled = true; let spinTimeout = 0; function spinGlobe() { const zoom = map.getZoom(); // console.log(autoSpin); if (spinEnabled && !userInteracting && zoom < maxSpinZoom && autoSpin) { let distancePerSecond = 360 / secondsPerRevolution; if (zoom > slowSpinZoom) { // Slow spinning at higher zooms const zoomDif = (maxSpinZoom - zoom) / (maxSpinZoom - slowSpinZoom); distancePerSecond *= zoomDif; } const center = map.getCenter(); center.lng += distancePerSecond; // Smoothly animate the map over one second. // When this animation is complete, it calls a 'moveend' event. map.easeTo({ center, duration: 1000, easing: (n) => n }); setTimeout(() => { spinGlobe(); }, 1000); } } function delayedSpinGlobe() { clearTimeout(spinTimeout); spinTimeout = setTimeout(() => { spinGlobe(); }, 3000); } // Pause spinning on interaction map.on("mousedown", () => { userInteracting = true; }); map.on("zoomstart", () => { userInteracting = true; }); // Restart spinning the globe when interaction is complete map.on("mouseup", () => { userInteracting = false; delayedSpinGlobe(); }); // These events account for cases where the mouse has moved // off the map, so 'mouseup' will not be fired. map.on("dragend", () => { userInteracting = false; delayedSpinGlobe(); }); map.on("pitchend", () => { userInteracting = false; delayedSpinGlobe(); }); map.on("rotateend", () => { userInteracting = false; delayedSpinGlobe(); }); map.on("zoomend", () => { userInteracting = false; delayedSpinGlobe(); }); // // When animation is complete, start spinning if there is no ongoing interaction // map.on("moveend", () => { // delayedSpinGlobe(); // }); //make it spin on startup spinGlobe(); // Be careful to clean up the map's resources using \`map.remove()\` whenever? // this cell is re-evaluated. invalidation.then(() => map.remove()); }32:[{"id":"7dfea30cf4e83fce6a6a6632a51a110fc5d0d20c8123b939686222a427f0f8e426aed35730caa11f5cd0761604adc30e7e8eac50cb6187fea125e7d515c71def","href":"https://static.observableusercontent.com/files/7dfea30cf4e83fce6a6a6632a51a110fc5d0d20c8123b939686222a427f0f8e426aed35730caa11f5cd0761604adc30e7e8eac50cb6187fea125e7d515c71def","name":"foss4g_twitter_user_locs2.geojson","type":"application/geo+json","lastModified":1662320384942.778,"size":303180}] 2f:{"title":"#FOSS4G2022 Twitter Users with MapBoxGL - Globe Projection","cells":[{"id":0,"value":"# #FOSS4G2022 Twitter Users with MapBoxGL - Globe Projection","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"md`\n[\\`v2.10.0\\`](https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.10.0)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`\nZoom in to halt spinning, or toggle the \"auto spin\" to off. Most code is right out of the official mapbox demos: [official example](https://docs.mapbox.com/mapbox-gl-js/example/globe/).\n\nShows Twitter users (~1000) that tweeted with the hashtag #foss4g2022 during the week of the conference. Geocoding used the \"location\" field that is returned by the twitter api, and so the location results are only as accurate as the bios-\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof projection = Inputs.select([\"albers\", \"equalEarth\", \"equirectangular\", \"globe\", \"lambertConformalConic\", \"naturalEarth\", \"winkelTripel\"], {label: \"projection\", value: \"globe\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"viewof style = Inputs.select([\"streets-v11\", \"outdoors-v11\", \"light-v10\", \"dark-v10\", \"satellite-v9\", \"satellite-streets-v11\", \"navigation-day-v1\", \"navigation-night-v1\"], {label: \"basemap style\", value:\"satellite-v9\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"viewof autoSpin = Inputs.toggle({ label: \"auto spin\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.10.0\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1Ijoic3BhdGlhbCIsImEiOiJINEMxWmw4In0.MXOfvjXYb65iOfIAKcRLbA\";\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":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":118,"value":"foss4g_twitter_user_locs2 = FileAttachment(\"foss4g_twitter_user_locs2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}