// viewof map = { // 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: [15.9, -4.3], // zoom: 8, // style: "mapbox://styles/mapbox/light-v10" // }); // map.addControl(new mapboxgl.NavigationControl(), "top-right"); // map.addControl(new mapboxgl.FullscreenControl()); // const mosaic = PERIODS[basemapDate]; // function addHoverTooltipForLayer(layer) { // const popup = new mapboxgl.Popup({ // closeButton: false, // closeOnClick: true, // className: "sn-mapbox-tooltip" // }); // map.on("click", layer.id, (e) => { // // Change cursor style // map.getCanvas().style.cursor = "pointer"; // // Get feature coordinates // const coordinates = // e.features[0].geometry.type === "Point" // ? e.features[0].geometry.coordinates.slice() // : turf.centroid(e.features[0]).geometry.coordinates; // // Construct the HTML content from the properties // const description = layer.properties // .map((prop) => { // if (typeof e.features[0].properties[prop] === "number") { // const formattedValue = e.features[0].properties[prop]; // return `${prop}: ${formattedValue}`; // } else { // return `${prop}: ${e.features[0].properties[prop]}`; // } // }) // .join("
"); // // Handle international dateline wrapping // 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.getCanvas().style.cursor = ""; // }); // } // // Wait until the map loads. // map.on("load", () => { // container.value = map; // map.addSource("planet-tiles", { // type: "raster", // tiles: [ // // https://developers.planet.com/docs/basemaps/tile-services/xyz/ // `https://tiles0.planet.com/basemaps/v1/planet-tiles/planet_medres_visual_${mosaic}_mosaic/gmap/{z}/{x}/{y}.png?api_key=${ifcin_yek}`, // `https://tiles1.planet.com/basemaps/v1/planet-tiles/planet_medres_visual_${mosaic}_mosaic/gmap/{z}/{x}/{y}.png?api_key=${ifcin_yek}`, // `https://tiles2.planet.com/basemaps/v1/planet-tiles/planet_medres_visual_${mosaic}_mosaic/gmap/{z}/{x}/{y}.png?api_key=${ifcin_yek}`, // `https://tiles3.planet.com/basemaps/v1/planet-tiles/planet_medres_visual_${mosaic}_mosaic/gmap/{z}/{x}/{y}.png?api_key=${ifcin_yek}` // ], // tileSize: 256, // attribution: // 'Imagery ©2023 Planet Labs Inc. All use subject to the Participant License Agreement' // }); // map.addLayer({ // id: "planet-layer", // type: "raster", // source: "planet-tiles", // maxzoom: 20 // }); // map.addLayer({ // id: "pif_plantations", // type: "fill", // source: { // type: "geojson", // data: pif_plantations // }, // paint: { // "fill-color": "#d95f02", // "fill-opacity": polygonOpacity / 100 // } // }); // map.addLayer({ // id: "pif_plantations_outline", // type: "line", // source: { // type: "geojson", // data: pif_plantations // }, // layout: { // "line-join": "round", // This ensures the corners of the outline are rounded // "line-cap": "round" // This ensures the ends of the line are rounded // }, // paint: { // "line-color": "#d95f02", // "line-width": 3 // You can adjust this value to set the thickness of the line // } // }); // const fip_properties = pif_plantations.features.at(0).properties; // addHoverTooltipForLayer({ // id: "pif_plantations", // name: "FIP Plantations", // properties: Object.keys(fip_properties), // color: "#d95f02" // }); // container.dispatchEvent(new CustomEvent("input")); // }); // }