---
title: "Show polygon data from GeoJSON on the map | JavaScript maps SDK"
description: "Add GeoJSON polygon overlay to your web map application."
---
> 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.
# Show polygon data from GeoJSON on the map
In this tutorial, we will demonstrate the process of incorporating a GeoJSON polygon overlay onto the map. Through the following steps, you will learn how to seamlessly integrate this feature into your web mapping applications.
## NPM module setup
1. Install the npm package.
```bash
npm install --save @maptiler/sdk
```
2. Include the CSS file.
If you have a bundler that can handle CSS, you can `import` the CSS
```js
import "@maptiler/sdk/dist/maptiler-sdk.css";
```
or include it with a `` in the head of the document via the CDN
```html
```
3. Include the following code in your JavaScript file (Example: app.js).
```js
import * as maptilersdk from '@maptiler/sdk';
maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new maptilersdk.Map({
container: 'map', // container's id or the HTML element to render the map
style: maptilersdk.MapStyle.STREETS,
center: [-43.206091, -22.920387], // starting position [lng, lat]
zoom: 11, // starting zoom
});
```
4. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
5. The next is up to you. You can center your map wherever you desire (modifying the `starting position`) and set an appropriate zoom level (modifying the `starting zoom`) to match your users’ needs. Additionally, you can change the map’s look (by updating the `source URL`); choose from a range of visually appealing map styles from our extensive [MapTiler standard maps](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
6. Add event handler for map load event. You will add code to create a GeoJSON source and a vector layer in this handler.
```js
map.on('load', async function() {
});
```
7. Create GeoJSON source. The following snippet creates GeoJSON source hosted on MapTiler (check out the [How to Upload GeoJSON to MapTiler](https://docs.maptiler.com/guides/maps-apis/maps-platform/prepare-geojson-with-attributes-for-choropleth-map-and-upload-geojson-to-maptiler-cloud#PrepareGeoJSONwithattributesforchoroplethmapanduploadGeoJSONtoMapTilerCloud-UploadGeoJSONtoMapTilerCloud) tutorial). Publish the dataset and copy the link to the GeoJSON. Download the [Rio de Janeiro sample data](https://docs.maptiler.com/sdk-js/assets/rio_cats.geojson).
```js
map.on('load', async function() {
const geojson = await maptilersdk.data.get('YOUR_MAPTILER_DATASET_ID_HERE');
map.addSource('rio_cats', {
type: 'geojson',
data: geojson
});
});
```
8. Add the vector layer
```js
map.addLayer({
'id': 'rio_cats',
'type': 'fill',
'source': 'rio_cats',
'layout': {},
'paint': {
'fill-color': '#98b',
'fill-opacity': 0.8
}
});
```
## Basic JavaScript setup
1. Copy the following code, paste it into your favorite text editor, and save it as a `.html` file.
```html
Display a GeoJSON polygon layer
```
2. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
3. The next is up to you. You can center your map wherever you desire (modifying the `starting position`) and set an appropriate zoom level (modifying the `starting zoom`) to match your users’ needs. Additionally, you can change the map’s look (by updating the `source URL`); choose from a range of visually appealing map styles from our extensive [MapTiler standard maps](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
4. Add event handler for map load event. You will add code to create a GeoJSON source and a vector layer in this handler.
```js
map.on('load', async function() {
});
```
5. Create GeoJSON source. The following snippet creates GeoJSON source hosted on MapTiler (check out the [How to Upload GeoJSON to MapTiler](https://docs.maptiler.com/guides/maps-apis/maps-platform/prepare-geojson-with-attributes-for-choropleth-map-and-upload-geojson-to-maptiler-cloud#PrepareGeoJSONwithattributesforchoroplethmapanduploadGeoJSONtoMapTilerCloud-UploadGeoJSONtoMapTilerCloud) tutorial). Publish the dataset and copy the link to the GeoJSON. Download the [Rio de Janeiro sample data](https://docs.maptiler.com/sdk-js/assets/rio_cats.geojson).
```js
map.on('load', async function() {
const geojson = await maptilersdk.data.get('YOUR_MAPTILER_DATASET_ID_HERE');
map.addSource('rio_cats', {
type: 'geojson',
data: geojson
});
});
```
6. Add the vector layer
```js
map.addLayer({
'id': 'rio_cats',
'type': 'fill',
'source': 'rio_cats',
'layout': {},
'paint': {
'fill-color': '#98b',
'fill-opacity': 0.8
}
});
```
### Complete source code
```html
Display a GeoJSON Layer
```
## Related examples
### [Polygon layer (polygon helper)](https://docs.maptiler.com/sdk-js/examples/helper-polygon-minimal/)
Examples
Add minimal polygon layer using MapTiler polygon helper.
### [Choropleth GeoJSON](https://docs.maptiler.com/sdk-js/examples/choropleth-geojson/)
Tutorials
Create a styled choropleth map using a GeoJSON overlay.
### [Create a 3D choropleth map of Europe with countries extruded](https://docs.maptiler.com/sdk-js/examples/fill-extrusion/)
Examples
Create 3D choropleth map with extruded country polygons.
### [GeoJSON multiGeometry layer](https://docs.maptiler.com/sdk-js/examples/geojson-multigeometry/)
Tutorials
Add a GeoJSON MultiGeometry overlay to your map application.