Add a pattern to a polygon | NMaps GL JS Docs

This example uses an image from an external URL as a repeating pattern that fills a polygon feature on the map.

It uses loadImage() to load the image from an external URL, then adds the loaded image to the style with addImage(). Then it uses addLayer() to create a new symbol layer that uses fill-pattern to fill a polygon with a pattern created by the repeating image.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a pattern to a polygon</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdn.ndrive.com/nmapsgl/v1.6.6/nmaps-gl.js"></script>
<link href="https://cdn.ndrive.com/nmapsgl/v1.6.6/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',
zoom: 1
});
 
map.on('load', () => {
// Add GeoJSON data
map.addSource('source', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'Polygon',
'coordinates': [
[
[-30, -25],
[-30, 35],
[30, 35],
[30, -25],
[-30, -25]
]
]
}
}
});
 
// Load an image to use as the pattern
map.loadImage(
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/64px-Cat_silhouette.svg.png',
(err, image) => {
// Throw an error if something went wrong
if (err) throw err;
 
// Declare the image
map.addImage('pattern', image);
 
// Use it
map.addLayer({
'id': 'pattern-layer',
'type': 'fill',
'source': 'source',
'paint': {
'fill-pattern': 'pattern'
}
});
}
);
});
</script>
 
</body>
</html>