Public
Edited
Nov 3, 2022
1 fork
viewof map = {
let container = html`<div style='height:800px;' />`;
// 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: [24.35271144900878, -0.2881516070711143],
zoom: 2.9,
style: "mapbox://styles/highestroad/cla06v2ro000215q9hz8o9mns",
// projection: "naturalEarth",
hash: true,
projection: "mercator"
});
// Wait until the map loads.
map.on("load", () => {
container.value = map;
container.dispatchEvent(new CustomEvent("yearVar"));
// Add a circle layer with a vector source
map.addLayer(
{
id: "fewsnet-full",
type: "fill",
source: {
type: "vector",
url: "mapbox://highestroad.6bg98zhz",
tolerance: 0.0
},
"source-layer": "all_full_simple",
layout: {},
filter: [
"all",
["match", ["get", "year"], [selectedDate.slice(0, 4)], true, false],
["match", ["get", "month"], [selectedDate.slice(5, 7)], true, false]
],
paint: {
"fill-color": [
"match",
["get", "CS"],
[1],
"#c6f9c6",
[2],
"#f9e21c",
[3],
"#e26d00",
[4],
"#c10000",
[5],
"#551010",
"hsla(0, 0%, 100%, 0)"
],
"fill-opacity": 0.6
}
},
"mapbox-mapbox-terrain-dem-v1"
);
// const popup = new mapboxgl.Popup({
// closeButton: false,
// closeOnClick: false
// });
// map.on("mouseenter", "fewsnet-full", (e) => {
// // Change the cursor style as a UI indicator.
// map.getCanvas().style.cursor = "pointer";
// // Copy coordinates array.
// const coordinates = e.features[0].geometry.coordinates.slice();
// const description = e.features[0].properties.description;
// // 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("mouseleave", "fewsnet-full", () => {
// map.getCanvas().style.cursor = "";
// popup.remove();
// });
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
