---
title: "Add a pattern to a polygon | JavaScript maps SDK"
description: "Draw polygons using repeating image patterns with fill-pattern."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Add a pattern to a polygon
Use the [`fill-pattern`](https://docs.maptiler.com/gl-style-specification/layers/#paint-fill-fill-pattern) feature to draw a polygon by employing a repeating image pattern. This technique allows for the creation of visually appealing shapes by using a repeated image as a fill. To implement this, refer to the layer ⇾ fill ⇾ [fill-pattern](https://docs.maptiler.com/gl-style-specification/layers/#fill-pattern) section in the GL Style Specification.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map',
style: MapStyle.STREETS,
center: [0, 0],
zoom: 1
});
map.on('load', async function () {
// 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
const image = await map.loadImage(
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/64px-Cat_silhouette.svg.png');
// Declare the image
map.addImage('pattern', image.data);
// Use it
map.addLayer({
'id': 'pattern-layer',
'type': 'fill',
'source': 'source',
'paint': {
'fill-pattern': 'pattern'
}
});
});
```
#### index.html
```html
Add a pattern to a polygon | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Add a pattern to a polygon
```
## Related examples
### [GeoJSON polygon layer](https://docs.maptiler.com/sdk-js/examples/geojson-polygon/)
Tutorials
Add GeoJSON polygon overlay to your web map application.
### [Polygon fill pattern (polygon helper)](https://docs.maptiler.com/sdk-js/examples/helper-polygon-pattern/)
Examples
Add fill pattern to polygon layer using helper.
### [Polygon color ramp symbol (polygon helper)](https://docs.maptiler.com/sdk-js/examples/helper-polygon-ramped-style/)
Examples
Style polygon fill color based on zoom level.
### [Show polygon information on click](https://docs.maptiler.com/sdk-js/examples/polygon-popup-on-click/)
Examples
Display a popup when a user clicks a polygon.