Vector tiles with polygon from GeoJSON in OpenLayers

--- title: "Vector tiles with polygon from GeoJSON in OpenLayers | Openlayers" description: "Display GeoJSON polygons over vector tiles 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. # Vector tiles with polygon from GeoJSON in OpenLayers This tutorial shows how to add a polygon feature from external GeoJSON to your vector tiles map. If you don’t know how to display vector tiles map follow this tutorial [Vector tiles in OpenLayers](../vector-tiles-in-openlayers/). ## Add GeoJSON layer to vector map Insert the following GeoJSON vector layer definition snippet below the line of `olms.apply(map, styleJson)`; and don’t forget to set z-index because otherwise your geojson layer might be hidden below some layers of basemap. ```js const geojsonLayers = new ol.layer.Vector({ source: new ol.source.Vector({ url: `https://api.maptiler.com/data/YOUR_DATA_ID/features.json?key=${key}`, format: new ol.format.GeoJSON(), }), style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'grey', width: 1 // not connected with scale in screen resolution }), fill: new ol.style.Fill({ color: 'rgba(165,80,51,0.8)', }), }) }); geojsonLayers.setZIndex(1); //don't forget to set this! map.addLayer(geojsonLayers); ``` ### Complete source code ```html

``` 1. Import the new modules needed to add the new functionality. ```js import Map from 'ol/Map.js'; import View from 'ol/View.js'; import VectorLayer from 'ol/layer/Vector.js'; import VectorSource from 'ol/source/Vector.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'; import { apply } from 'ol-mapbox-style'; ``` 2. Insert the following GeoJSON vector layer definition snippet below the line of `apply(map, styleJson)`; and don’t forget to set z-index because otherwise your geojson layer might be hidden below some layers of basemap. ```js const geojsonLayers = new VectorLayer({ source: new VectorSource({ url: `https://api.maptiler.com/data/YOUR_DATA_ID/features.json?key=${key}`, format: new GeoJSON(), }), style: new Style({ stroke: new Stroke({ color: 'grey', width: 1 // not connected with scale in screen resolution }), fill: new Fill({ color: 'rgba(165,80,51,0.8)', }), }) }); geojsonLayers.setZIndex(1); map.addLayer(geojsonLayers); ``` ### Complete source code ```bash npm install --save ol ol-mapbox-style ``` #### main.js ```js import Map from 'ol/Map.js'; import View from 'ol/View.js'; import VectorLayer from 'ol/layer/Vector.js'; import VectorSource from 'ol/source/Vector.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'; import { apply } from 'ol-mapbox-style'; const key = 'YOUR_MAPTILER_API_KEY_HERE'; const styleJson = `https://api.maptiler.com/maps/streets-v4/style.json?key=${key}`; const attribution = new Attribution({ collapsible: false, }); const map = new Map({ target: 'map', controls: defaultControls({attribution: false}).extend([attribution]), view: new View({ constrainResolution: true, center: fromLonLat([0, 0]), zoom: 2 }) }); apply(map, styleJson); const geojsonLayers = new VectorLayer({ source: new VectorSource({ url: `https://api.maptiler.com/data/YOUR_DATA_ID/features.json?key=${key}`, format: new GeoJSON(), }), style: new Style({ stroke: new Stroke({ color: 'grey', width: 1 // not connected with scale in screen resolution }), fill: new Fill({ color: 'rgba(165,80,51,0.8)', }), }) }); geojsonLayers.setZIndex(1); map.addLayer(geojsonLayers); ``` #### index.html ```html Vector tiles with polygon from GeoJSON in OpenLayers | NPM example

``` #### style.css ```css #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;} ``` ### Summary To properly add GeoJSON to OpenLayers map you need to create a new vector layer and give z-index to this layer. ## Related examples ### [Polygon GeoJSON Layer](https://docs.maptiler.com/openlayers/examples/geojson-polygon/) Tutorials Display Polygon GeoJSON data on map using OpenLayers. ### [Vector tiles](https://docs.maptiler.com/openlayers/examples/vector-tiles-in-openlayers/) Tutorials Display vector tiles in OpenLayers with ol-mapbox-style plugin.