31:T1504,{ let container = html`

`; let check = html`` let content = html `

${container} ${check}

` // Give the container dimensions. yield content; var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, center: [-96, 62], zoom: 2, style: "mapbox://styles/mapbox/dark-v10", scrollZoom: true }); map.on("mouseenter", "monsters", function(e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = "pointer"; var coordinates = e.features[0].geometry.coordinates.slice(); var description = e.features[0].properties.Location + " - " + e.features[0].properties.Monster; // 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; } // Populate the popup and set its coordinates // based on the feature found. popup .setLngLat(coordinates) .setHTML(description) .addTo(map); }); map.on("mouseenter", "ghosts", function(e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = "pointer"; var coordinates = e.features[0].geometry.coordinates.slice(); var description = e.features[0].properties.Location + " - " + e.features[0].properties.City; // 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; } // Populate the popup and set its coordinates // based on the feature found. popup .setLngLat(coordinates) .setHTML(description) .addTo(map); }); map.on("mouseenter", "ufos", function(e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = "pointer"; var coordinates = e.features[0].geometry.coordinates.slice(); var description = e.features[0].properties.Location + " - " + e.features[0].properties.Year; // 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; } popup .setLngLat(coordinates) .setHTML(description) .addTo(map); }); map.on("mouseleave", "monsters", function() { map.getCanvas().style.cursor = ""; popup.remove(); }); map.on("mouseleave", "ufos", function() { map.getCanvas().style.cursor = ""; popup.remove(); }); map.on("mouseleave", "ghosts", function() { map.getCanvas().style.cursor = ""; popup.remove(); }); map.on('load',function(){ map.addLayer({ id: 'ufos', type: 'circle', source: { type: 'geojson', data: ufos }, layout:{ visibility: "none" }, paint:{ 'circle-radius':5, 'circle-color':'#AA0000' } }); map.addLayer({ id: 'monsters', type: 'circle', source: { type: 'geojson', data: monsters }, layout:{ visibility: "none" }, paint:{ 'circle-radius':5, 'circle-color':'#00AA00' } }); map.addLayer({ id: 'ghosts', type: 'circle', source: { type: 'geojson', data: ghosts }, layout:{ visibility: "none" }, paint:{ 'circle-radius':5, 'circle-color':'#FFFFFF' } }); function switchLayer(layer) { var clickedLayer = layer.target.id; // get the label of the layer var visibility = map.getLayoutProperty(clickedLayer, "visibility"); // check whether the layer is visible if (visibility === "visible") { hideLayer(clickedLayer); } else { showLayer(clickedLayer); } } function hideLayer(clickedLayer) { map.setLayoutProperty(clickedLayer, "visibility", "none"); } function showLayer(clickedLayer) { map.setLayoutProperty(clickedLayer, "visibility", "visible"); } // attach listener to all checkboxes var layerList = document.getElementById("menu"); var checkboxes = layerList.getElementsByTagName("input"); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].onclick = switchLayer; } // Be careful to clean up the map's resources using map.remove() whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); }) map.addControl(new mapboxgl.NavigationControl(), "top-right"); }32:T475,html``33:[{"id":"e088dbef5ed2d5edae97c4a4ef05806013bf02700e13bccbdb0d4120ac0e819815694309076f95631535cf3f2094191771fa4fddfd9bffd9fd88e5f406d4f896","href":"https://static.observableusercontent.com/files/e088dbef5ed2d5edae97c4a4ef05806013bf02700e13bccbdb0d4120ac0e819815694309076f95631535cf3f2094191771fa4fddfd9bffd9fd88e5f406d4f896","name":"monsters@1.json","type":"application/json","lastModified":1619812689773.694,"size":3931},{"id":"5a3bfc9dc5c0039066820864f17bdd9a53815be2dde5f14ed9e6f4ae8a67f90126cb60bfbbfe1d46ee00c62f074391a5b95f8b1c2aa3b6b98f448e0292f91d84","href":"https://static.observableusercontent.com/files/5a3bfc9dc5c0039066820864f17bdd9a53815be2dde5f14ed9e6f4ae8a67f90126cb60bfbbfe1d46ee00c62f074391a5b95f8b1c2aa3b6b98f448e0292f91d84","name":"monsters.json","type":"application/json","lastModified":1619568647209.734,"size":3941},{"id":"d66188b2ae3dcfda7e9803ab0fadde0fb7829ddc96f9ea3d47fbf1bb2c51a7ca7d5e376be00a37b6fa66f0674466da4b605ed27726b92bcdaff61823180c6e35","href":"https://static.observableusercontent.com/files/d66188b2ae3dcfda7e9803ab0fadde0fb7829ddc96f9ea3d47fbf1bb2c51a7ca7d5e376be00a37b6fa66f0674466da4b605ed27726b92bcdaff61823180c6e35","name":"ufos.json","type":"application/json","lastModified":1619569321155.341,"size":1878},{"id":"d2b062a6e3c612423008c3463fd9d6dc06d0db8b28ce896f7cb6c8415d89f9c4a81c4e0d5d7ac95540fe677b0af1a0c61915ce558c6df3b37066a13744f7ff08","href":"https://static.observableusercontent.com/files/d2b062a6e3c612423008c3463fd9d6dc06d0db8b28ce896f7cb6c8415d89f9c4a81c4e0d5d7ac95540fe677b0af1a0c61915ce558c6df3b37066a13744f7ff08","name":"ghosts.geo@1.json","type":"application/json","lastModified":1619965128265.187,"size":39678}] 2f:{"title":"Monsters, Ghosts and Aliens in Canada","cells":[{"id":0,"value":"md`# Monsters, Ghosts and Aliens in Canada`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.1.0\");\n if (!gl.accessToken) {\n gl.accessToken = \"pk.eyJ1IjoicDQyc3lzdGVtcyIsImEiOiJja28wb3RueWcwMmhhMnFvaWluaG42YmUwIn0.WhzHen_b1czWG-uC5d88cQ\";\n const href = await require.resolve(\"mapbox-gl@1.0.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"monsters = FileAttachment(\"monsters@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"ufos = FileAttachment(\"ufos.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"ghosts = FileAttachment(\"ghosts.geo@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}