Load GeoJSON in OpenLayers

OpenLayers

Fetch and display GeoJSON features on an OpenLayers map using ol.format.GeoJSON and a styled vector layer.

progress_activityLoading map...

var geojsonData = {
  type: 'FeatureCollection',
  features: [
    { type: 'Feature', properties: { name: 'Louvre Museum' }, geometry: { type: 'Point', coordinates: [2.3376, 48.8606] } },
    { type: 'Feature', properties: { name: 'Walking Path' }, geometry: { type: 'LineString', coordinates: [[2.3376, 48.8606], [2.3272, 48.8600], [2.3200, 48.8580]] } },
    { type: 'Feature', properties: { name: 'Park Area' }, geometry: { type: 'Polygon', coordinates: [[[2.3272, 48.8620], [2.3340, 48.8620], [2.3340, 48.8590], [2.3272, 48.8590], [2.3272, 48.8620]]] } }
  ]
};
var vectorSource = new ol.source.Vector({
  features: new ol.format.GeoJSON().readFeatures(geojsonData, { featureProjection: 'EPSG:3857' })
});
var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: function(feature) {
    var type = feature.getGeometry().getType();
    if (type === 'Point') return new ol.style.Style({ image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#e63946' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) }) });
    if (type === 'LineString') return new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#457b9d', width: 3 }) });
    return new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(42, 157, 143, 0.3)' }), stroke: new ol.style.Stroke({ color: '#2a9d8f', width: 2 }) });
  }
});
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
    vectorLayer
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.328, 48.860]), zoom: 15 })
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/ol@10.10.0/ol.css" />
<script src="https://unpkg.com/ol@10.10.0/dist/ol.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var geojsonData = {
  type: 'FeatureCollection',
  features: [
    { type: 'Feature', properties: { name: 'Louvre Museum' }, geometry: { type: 'Point', coordinates: [2.3376, 48.8606] } },
    { type: 'Feature', properties: { name: 'Walking Path' }, geometry: { type: 'LineString', coordinates: [[2.3376, 48.8606], [2.3272, 48.8600], [2.3200, 48.8580]] } },
    { type: 'Feature', properties: { name: 'Park Area' }, geometry: { type: 'Polygon', coordinates: [[[2.3272, 48.8620], [2.3340, 48.8620], [2.3340, 48.8590], [2.3272, 48.8590], [2.3272, 48.8620]]] } }
  ]
};
var vectorSource = new ol.source.Vector({
  features: new ol.format.GeoJSON().readFeatures(geojsonData, { featureProjection: 'EPSG:3857' })
});
var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: function(feature) {
    var type = feature.getGeometry().getType();
    if (type === 'Point') return new ol.style.Style({ image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#e63946' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) }) });
    if (type === 'LineString') return new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#457b9d', width: 3 }) });
    return new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(42, 157, 143, 0.3)' }), stroke: new ol.style.Stroke({ color: '#2a9d8f', width: 2 }) });
  }
});
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
    vectorLayer
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.328, 48.860]), zoom: 15 })
});

</script>
</body>
</html>

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';

var geojsonData = {
  type: 'FeatureCollection',
  features: [
    { type: 'Feature', properties: { name: 'Louvre Museum' }, geometry: { type: 'Point', coordinates: [2.3376, 48.8606] } },
    { type: 'Feature', properties: { name: 'Walking Path' }, geometry: { type: 'LineString', coordinates: [[2.3376, 48.8606], [2.3272, 48.8600], [2.3200, 48.8580]] } },
    { type: 'Feature', properties: { name: 'Park Area' }, geometry: { type: 'Polygon', coordinates: [[[2.3272, 48.8620], [2.3340, 48.8620], [2.3340, 48.8590], [2.3272, 48.8590], [2.3272, 48.8620]]] } }
  ]
};
var vectorSource = new ol.source.Vector({
  features: new ol.format.GeoJSON().readFeatures(geojsonData, { featureProjection: 'EPSG:3857' })
});
var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: function(feature) {
    var type = feature.getGeometry().getType();
    if (type === 'Point') return new ol.style.Style({ image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#e63946' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) }) });
    if (type === 'LineString') return new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#457b9d', width: 3 }) });
    return new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(42, 157, 143, 0.3)' }), stroke: new ol.style.Stroke({ color: '#2a9d8f', width: 2 }) });
  }
});
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
    vectorLayer
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.328, 48.860]), zoom: 15 })
});

How it works

ol.format.GeoJSON parses GeoJSON data into OpenLayers features. The readFeatures() method accepts a GeoJSON object or string, and featureProjection: 'EPSG:3857' ensures coordinates are converted from WGS84 to the map’s projection.

The style function checks each feature’s geometry type and applies appropriate styling: circle markers for points, stroked lines for LineStrings, and filled polygons for Polygon features. This handles mixed-geometry GeoJSON collections.

Key APIs

API	Description	Docs
`ol.format.GeoJSON`	Parse and write GeoJSON data	openlayers.org
`readFeatures()`	Convert GeoJSON to OL features	openlayers.org
`feature.getGeometry().getType()`	Get geometry type string	openlayers.org

FAQ

How do I load GeoJSON from a URL?

Use new ol.source.Vector({ url: 'https://example.com/data.geojson', format: new ol.format.GeoJSON() }). The source handles fetching and parsing automatically.

Can I export drawn features back to GeoJSON?

Yes. Use new ol.format.GeoJSON().writeFeatures(source.getFeatures(), { featureProjection: 'EPSG:3857' }) to get a GeoJSON string.

Common mistakes

Missing featureProjection: 'EPSG:3857': features appear near null island (0, 0) instead of their actual locations
Using readFeature() (singular) for a FeatureCollection: use readFeatures() (plural) for collections
Not handling mixed geometry types in the style function, resulting in invisible features

auto_awesome

Build maps using OpenLayers with AI

Generate code like this load geojson in openlayers example using the OpenLayers skill in your IDE.

auto_awesomeGet skills keyGet a free API key

Related Examples

Choropleth Map with OpenLayers
Polygon Features in OpenLayers
LineString Features in OpenLayers
See how to do this in Leaflet, MapLibre GL JS or MapTiler SDK