Add a pattern to a polygon
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.
Supported File Types
Only .png, .jpg and .webp formats are supported when loading images into a style at runtime using map.loadImage(). Other file types like .svg are not supported.
<!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">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js"></script>
<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 FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [-105.819711, 39.147614], // starting position
zoom: 5 // starting zoom
});
map.on('load', () => {
// Add the GeoJSON data.
map.addSource('source', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'Polygon',
'coordinates': [
[
[-108.977199, 40.975108],
[-102.105019, 40.995138],
[-102.078486, 37.017605],
[-109.083333, 37.017605],
[-108.977199, 40.975108]
]
]
}
}
});
// Load an image to use as the pattern from an external URL.
map.loadImage(
'https://docs.mapbox.com/mapbox-gl-js/assets/colorado_flag.png',
(err, image) => {
// Throw an error if something goes wrong.
if (err) throw err;
// Add the image to the map style.
map.addImage('pattern', image);
// Create a new layer and style it using `fill-pattern`.
map.addLayer({
'id': 'pattern-layer',
'type': 'fill',
'source': 'source',
'paint': {
'fill-pattern': 'pattern'
}
});
}
);
});
</script>
</body>
</html>
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
mapRef.current = new mapboxgl.Map({
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/streets-v12',
center: [-105.819711, 39.147614],
zoom: 5
});
mapRef.current.on('load', () => {
mapRef.current.addSource('source', {
type: 'geojson',
data: {
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
coordinates: [
[
[-108.977199, 40.975108],
[-102.105019, 40.995138],
[-102.078486, 37.017605],
[-109.083333, 37.017605],
[-108.977199, 40.975108]
]
]
}
}
});
mapRef.current.loadImage(
'https://docs.mapbox.com/mapbox-gl-js/assets/colorado_flag.png',
(err, image) => {
if (err) throw err;
mapRef.current.addImage('pattern', image);
mapRef.current.addLayer({
id: 'pattern-layer',
type: 'fill',
source: 'source',
paint: {
'fill-pattern': 'pattern'
}
});
}
);
});
}, []);
return <div ref={mapContainerRef} id="map" style={{ height: '100%' }}></div>;
};
export default MapboxExample;
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.Was this example helpful?