{
let container = html`<div style='height:600px;' />`;
let check = html`<div id='menu'>
<label class='switch-container'>
Monsters
<input id='monsters' type = 'checkbox' name='viz-toggle'>
</label>
<label class = 'switch-container'>
UFOs
<input id='ufos' type = 'checkbox' name='viz-toggle'>
</label><label class = 'switch-container'>
Ghosts
<input id='ghosts' type = 'checkbox' name='viz-toggle'>
</label>
</div>`
let content = html `<div class='map-wrapper'>
${container}
${check}
</div>`
yield content;
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
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");
}