Add custom icons with Markers | UNL Map JS Docs

Use Marker to add custom icons to your map.

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>Add custom icons with Markers</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>
.marker {
display: block;
border: none;
border-radius: 50%;
cursor: pointer;
padding: 0;
}
</style>
 
<div id="map"></div>
 
<script>
var geojson = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {
message: "Foo",
iconSize: [60, 60],
},
geometry: {
type: "Point",
coordinates: [-66.324462890625, -16.024695711685304],
},
},
{
type: "Feature",
properties: {
message: "Bar",
iconSize: [50, 50],
},
geometry: {
type: "Point",
coordinates: [-61.2158203125, -15.97189158092897],
},
},
{
type: "Feature",
properties: {
message: "Baz",
iconSize: [40, 40],
},
geometry: {
type: "Point",
coordinates: [-63.29223632812499, -18.28151823530889],
},
},
],
};
 
var map = new UnlSdk.Map({
container: "map",
apiKey: "YOUR-OWN-API-KEY",
vpmId: "YOUR-OWN-VPM-ID",
center: [-65.017, -16.457],
zoom: 5,
});
 
// add markers to map
geojson.features.forEach(function (marker) {
// create a DOM element for the marker
var el = document.createElement("div");
el.className = "marker";
el.style.backgroundImage =
"url(https://placekitten.com/g/" +
marker.properties.iconSize.join("/") +
"/)";
el.style.width = marker.properties.iconSize[0] + "px";
el.style.height = marker.properties.iconSize[1] + "px";
 
el.addEventListener("click", function () {
window.alert(marker.properties.message);
});
 
// add marker to map
new UnlSdk.Marker(el).setLngLat(marker.geometry.coordinates).addTo(map);
});
</script>
 
</body>
</html>