31:T187f,{ 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: gischat_twitter_user_locs }); // 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.7, 10, 0.8, 12, 1 ], "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 = []; const mouseEnter = (e) => { //clear existing popups popups.forEach((p) => p.remove()); popups.length = 0; const coordinates = e.features[0].geometry.coordinates.slice(); let description = ""; e.features.forEach((f) => { const props = f.properties; 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); }; map.on("mouseenter", "points", mouseEnter); // 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 = ""; }); if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices map.on("click", "points", mouseEnter); } } ); }); 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":"fc9d5ae43172035a5e99d9ba7ca8f03ee4a2e9d6b947c4eb619748cf60848c6b48da1b6eb81f647f120c9aa694ebfb6a23a82eb9f455a760a1ea3e10fa03cf75","href":"https://static.observableusercontent.com/files/fc9d5ae43172035a5e99d9ba7ca8f03ee4a2e9d6b947c4eb619748cf60848c6b48da1b6eb81f647f120c9aa694ebfb6a23a82eb9f455a760a1ea3e10fa03cf75","name":"gischat_twitter_user_locs.geojson","type":"application/geo+json","lastModified":1663184556405.984,"size":108271},{"id":"4c4a51e0bd8021b4f2dabc9726e2f18dee6ebfe8d800b4672f6f924b056f17e6d15970bfe1b8665011675b0d9da2f100739e749095599358814f8e6b84ed85c5","href":"https://static.observableusercontent.com/files/4c4a51e0bd8021b4f2dabc9726e2f18dee6ebfe8d800b4672f6f924b056f17e6d15970bfe1b8665011675b0d9da2f100739e749095599358814f8e6b84ed85c5","name":"gischat_twitter_user_locs@1.geojson","type":"application/geo+json","lastModified":1665071427758.245,"size":108271},{"id":"6e11dcf049c5025bfc90457a3e76993298b662ebf799b1c3e06f69986566cceef46559d4e4c59a53e4ea661dc3cba819a1911e89acf838fb0b85f4552a6f0cda","href":"https://static.observableusercontent.com/files/6e11dcf049c5025bfc90457a3e76993298b662ebf799b1c3e06f69986566cceef46559d4e4c59a53e4ea661dc3cba819a1911e89acf838fb0b85f4552a6f0cda","name":"gischat_twitter_user_locs@2.geojson","type":"application/geo+json","lastModified":1665076258678.079,"size":108271}] 2f:{"title":"#GISCHAT Twitter Users with MapBoxGL - Globe Projection","cells":[{"id":0,"value":"# #GISCHAT 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 (~500) that tweeted with the hashtag #gischat during the week of September 4th. 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":210,"value":"gischat_twitter_user_locs = FileAttachment(\n \"gischat_twitter_user_locs@2.geojson\"\n).json()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}