kba_2022_10_POL_view = (mapRef, kba_2022_10_POL) => { mapRef.addSource("kba_2022_10_POL", { type: "geojson", data: kba_2022_10_POL }); mapRef.addLayer({ id: "kba_2022_10_POL_fill", type: "fill", source: "kba_2022_10_POL", layout: { visibility: "visible" }, paint: { "fill-color": "yellow", "fill-opacity": 0.05 } }); mapRef.addLayer({ id: "kba_2022_10_POL_line", type: "line", source: "kba_2022_10_POL", layout: { visibility: "visible" }, paint: { "line-color": "yellow", "line-width": 0.01, "line-opacity": 0.3 } }); // Add popup functionality mapRef.on('click', 'kba_2022_10_POL_fill', function (e) { const feature = e.features[0]; const properties = feature.properties; // Create the popup content const popupContent = `

${properties['IntName']}
Site ID: ${properties['SitRecID']}
Triggers: ${properties['triggers']}
Country: ${properties['Country']}
Region: ${properties['Region']}

`; // Create a new popup and set its coordinates and content new maplibregl.Popup() .setLngLat(e.lngLat) .setHTML(popupContent) .addTo(mapRef); }); // Change the cursor to a pointer when the mouse is over the polygon layer mapRef.on('mouseenter', 'kba_2022_10_POL_fill', function () { mapRef.getCanvas().style.cursor = 'pointer'; }); // Change the cursor back to default when the mouse leaves the polygon layer mapRef.on('mouseleave', 'kba_2022_10_POL_fill', function () { mapRef.getCanvas().style.cursor = ''; }); };