Show polygon information on click | UNL Map JS Docs

When a user clicks a polygon, show a Popup containing more information.

Note

If you want to test this example, edit it in JSFiddle or CodePen and replace the "YOUR-OWN-API-KEY" and "YOUR-OWN-VPM-ID" placeholders with your actual api key and vpm id.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Show polygon information on click</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.js"></script>
<link href="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.css" rel="stylesheet" />
<link
href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css"
rel="stylesheet"
/>
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
</style>
<div id="map"></div>
<script>
var map = new UnlSdk.Map({
container: "map",
apiKey: "YOUR-OWN-API-KEY",
vpmId: "YOUR-OWN-VPM-ID",
center: [-100.04, 38.907],
zoom: 3,
});
 
map.on("load", function () {
// Add a source for the state polygons.
map.addSource("states", {
type: "geojson",
data: "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces_shp.geojson",
});
 
// Add a layer showing the state polygons.
map.addLayer({
id: "states-layer",
type: "fill",
source: "states",
paint: {
"fill-color": "rgba(200, 100, 240, 0.4)",
"fill-outline-color": "rgba(200, 100, 240, 1)",
},
});
 
// When a click event occurs on a feature in the states layer, open a popup at the
// location of the click, with description HTML from its properties.
map.on("click", "states-layer", function (e) {
new UnlSdk.Popup()
.setLngLat(e.lngLat)
.setHTML(e.features[0].properties.name)
.addTo(map);
});
 
// Change the cursor to a pointer when the mouse is over the states layer.
map.on("mouseenter", "states-layer", function () {
map.getCanvas().style.cursor = "pointer";
});
 
// Change it back to a pointer when it leaves.
map.on("mouseleave", "states-layer", function () {
map.getCanvas().style.cursor = "";
});
});
</script>
 
</body>
</html>