---
title: "Polygon data from GeoJSON on the Map with OpenLayers | Openlayers"
description: "Display Polygon GeoJSON data on map using OpenLayers."
---
> 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.
# Polygon data from GeoJSON on the Map with OpenLayers
This tutorial shows how to add a Polygon GeoJSON overlay to the map using OpenLayers.
1. Copy the following code, paste it into your favorite text editor, and save it as a `.html` file.
```html
Display a GeoJSON Layer
```
Check out the step-by-step tutorial [How to use OpenLayers](https://docs.maptiler.com/openlayers/examples/how-to-use-openlayers/)
1. Install the npm package.
```bash
npm install --save ol
```
2. Include the CSS file.
If you have a bundler that can handle CSS, you can [`import`](#) the CSS or include it with a [``](#) in the head of the document via the CDN
```js
import "ol/ol.css";
```
```html
```
3. Include the following code in your JavaScript file (Example: main.js).
```js
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import TileJSON from 'ol/source/TileJSON.js';
import Attribution from 'ol/control/Attribution.js';
import { defaults as defaultControls } from 'ol/control/defaults.js';
import { fromLonLat } from 'ol/proj.js';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const attribution = new Attribution({
collapsible: false,
});
const source = new TileJSON({
url: `https://api.maptiler.com/maps/streets-v4/tiles.json?key=${key}`, // source URL
tileSize: 512,
crossOrigin: 'anonymous'
});
const map = new Map({
layers: [
new TileLayer({
source: source
})
],
controls: defaultControls({attribution: false}).extend([attribution]),
target: 'map',
view: new View({
constrainResolution: true,
center: fromLonLat([-43.206091, -22.920387,]), // starting position [lng, lat]
zoom: 12 // starting zoom
})
});
```
1. 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/credentials/api-key/#secure-key) before you publish it.
2. 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.
1. 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 link to the geojson. Download the [Rio de Janeiro sample data](https://docs.maptiler.com/sdk-js/assets/rio_cats.geojson).
```js
});
const layer = new ol.layer.Vector({
source: new ol.source.Vector({
url: `https://api.maptiler.com/data/YOUR_MAPTILER_DATASET_ID_HERE/features.json?key=${key}`,
format: new ol.format.GeoJSON(),
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 136, 136, 0.8)',
}),
fill: new ol.style.Fill({
color: 'rgba(0, 136, 136, 0.8)',
}),
})
});
map.addLayer(layer);
```
### Complete source code
```html
Display a map
```
1. Import the new modules needed to add the new functionality.
```js
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import Style from 'ol/style/Style.js';
import Stroke from 'ol/style/Stroke.js';
import Fill from 'ol/style/Fill.js';
import GeoJSON from 'ol/format/GeoJSON.js';
```
2. Create GeoJSON layer. The following snippet creates GeoJSON layer from an external file with polygon geometry. 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 link to the geojson. Download the [Rio de Janeiro sample data](https://docs.maptiler.com/sdk-js/assets/rio_cats.geojson).
```js
const layer = new VectorLayer({
source: new VectorSource({
url: `https://api.maptiler.com/data/YOUR_MAPTILER_DATASET_ID_HERE/features.json?key=${key}`,
format: GeoJSON(),
}),
style: new Style({
stroke: new Stroke({
color: 'rgba(0, 136, 136, 0.8)',
}),
fill: new Fill({
color: 'rgba(0, 136, 136, 0.8)',
}),
})
});
map.addLayer(layer);
```
### Complete source code
```bash
npm install --save ol
```
#### main.js
```js
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import TileJSON from 'ol/source/TileJSON.js';
import Style from 'ol/style/Style.js';
import Fill from 'ol/style/Fill.js';
import Stroke from 'ol/style/Stroke.js';
import Attribution from 'ol/control/Attribution.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import { defaults as defaultControls } from 'ol/control/defaults.js';
import { fromLonLat } from 'ol/proj.js';
import 'ol/ol.css';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const attribution = new Attribution({
collapsible: false,
});
const source = new TileJSON({
url: `https://api.maptiler.com/maps/streets-v4/tiles.json?key=${key}`,
tileSize: 512,
crossOrigin: 'anonymous'
});
const map = new Map({
layers: [
new TileLayer({
source: source
})
],
controls: defaultControls({attribution: false}).extend([attribution]),
target: 'map',
view: new View({
constrainResolution: true,
center: fromLonLat([16.62662018, 49.2125578]),
zoom: 14
})
});
const layer = new VectorLayer({
source: new VectorSource({
url: `https://api.maptiler.com/data/YOUR_MAPTILER_DATASET_ID_HERE/features.json?key=${key}`,
format: new GeoJSON(),
}),
style: new Style({
stroke: new Stroke({
color: 'rgba(0, 136, 136, 0.8)',
}),
fill: new Fill({
color: 'rgba(0, 136, 136, 0.8)',
}),
})
});
map.addLayer(layer);
```
#### index.html
```html
Polygon data from GeoJSON on the Map | NPM example
```
#### style.css
```css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
```
## Related examples
### [Point GeoJSON Layer](https://docs.maptiler.com/openlayers/examples/geojson-points/)
Tutorials
Add Point GeoJSON data to OpenLayers maps easily.
### [MultiGeom GeoJSON Layer](https://docs.maptiler.com/openlayers/examples/geojson-multigeometry/)
Tutorials
Display MultiGeometry GeoJSON data on map using OpenLayers.
### [Vector tiles with GeoJSON](https://docs.maptiler.com/openlayers/examples/vector-tiles-with-polygon-from-geojson/)
Tutorials
Display GeoJSON polygons over vector tiles using OpenLayers.
### [Choropleth GeoJSON](https://docs.maptiler.com/openlayers/examples/choropleth-geojson/)
Tutorials
Create a choropleth map from GeoJSON using OpenLayers.
