OpenLayers

OpenLayers is a powerful, fully modular mapping library. This page shows the same drawing app running on OpenLayers — press Run ▶ below and compare the code with the MapLibre version: the Terra Draw part is identical.

To use it locally:

pnpm install -D ol terra-draw-openlayers-adapter

What changes vs MapLibre

1. Imports

OpenLayers is modular, so you import each class you need:

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import { fromLonLat, toLonLat, getUserProjection } from 'ol/proj.js';
// ...plus the style/vector classes the adapter needs (see below)
import { TerraDrawOpenLayersAdapter } from 'terra-draw-openlayers-adapter';

2. Map creation

const map = new Map({
	target: 'map',
	layers: [new TileLayer({ source: new OSM() })],
	view: new View({ center: fromLonLat([132.4553, 34.3966]), zoom: 12 })
});

Projections

OpenLayers works in Web Mercator (EPSG:3857) internally, so [lng, lat] coordinates are converted with fromLonLat(). Terra Draw itself always speaks GeoJSON [lng, lat] — the adapter converts for you.

3. The adapter

Because OpenLayers is modular, the adapter receives the classes it needs via lib instead of importing them itself:

adapter: new TerraDrawOpenLayersAdapter({
	lib: {
		Circle, Feature, GeoJSON, Style, VectorLayer, VectorSource,
		Stroke, Fill, Icon, getUserProjection, Projection, fromLonLat, toLonLat
	},
	map
})

Start drawing once the first frame is rendered:

map.once('rendercomplete', () => {
	draw.start();
});

Live example

Live editor — open this page in the browser to run the code.

What's Next?

Mapbox GL JS — the closest relative of MapLibre.