Add an icon to the map | NMaps GL JS Docs

This example uses an image from an external URL to visualize a point feature on the map.

Upon loading, the map uses loadImage to load the image from an external domain, addImage to add the image to the style as an icon, addSource to add a data source containing one point feature, and addLayer to create a new symbol layer that uses the icon to represent the point data and instructs the client to draw the image for each point in the data sourc

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add an icon to the map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdn.ndrive.com/nmapsgl/v.1.6.8/nmaps-gl.js"></script>
<link href="https://cdn.ndrive.com/nmapsgl/v.1.6.8/nmaps-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
 
<script>
	// TO MAKE THE MAP APPEAR YOU MUST ADD YOUR ACCESS TOKEN
	nmapsgl.accessToken = '<your access token here>';
	
const map = new nmapsgl.Map({
container: 'map',
style: 'Streets'
});
 
map.on('load', () => {
map.loadImage(
'https://nmaps-gl.ndrive.com/nmaps-gl-js/assets/cat.png',
(error, image) => {
if (error) throw error;
map.addImage('cat', image);
map.addSource('point', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
}
]
}
});
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'point',
'layout': {
'icon-image': 'cat',
'icon-size': 0.25
}
});
}
);
});
</script>
 
</body>
</html>