---
title: "Add a WMS source | JavaScript maps SDK"
description: "Add an external Web Map Service raster layer."
---
> 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 WMS source
Add an external [Web Map Service raster layer](https://www.ogc.org/standards/wms) to the map using the [`addSource`](https://docs.maptiler.com/sdk-js/api/map/#map#addsource) function’s [`tiles`](https://docs.maptiler.com/gl-style-specification/sources/#raster-tiles) option. This will allow you to seamlessly integrate external content from the specified WMS URL into your map.
### 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,
zoom: 8,
center: [-74.5447, 40.6892]
});
map.on('load', function () {
map.addSource('wms-test-source', {
'type': 'raster',
// use the tiles option to specify a WMS tile source URL
// https://docs.maptiler.com/gl-style-specification/sources/
'tiles': [
'https://img.nj.gov/imagerywms/Natural2020?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2020'
],
'tileSize': 256
});
map.addLayer(
{
'id': 'wms-test-layer',
'type': 'raster',
'source': 'wms-test-source',
'paint': {}
},
'Aeroway'
);
});
```
#### index.html
```html
Add a WMS source | 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 WMS source
```
## Related examples
### [Raster layer](https://docs.maptiler.com/sdk-js/examples/raster-layer/)
Tutorials
Add a raster image overlay to the map.
### [Add a raster tile source](https://docs.maptiler.com/sdk-js/examples/map-tiles/)
Examples
Add a third-party raster source to the map.
### [Custom map](https://docs.maptiler.com/sdk-js/examples/custom-map/)
Tutorials
Display your customized MapTiler map on any web page.