OpenLayers

OpenLayers is a full-featured open-source mapping library. The community service is vector only, so you render the Maptoolkit vector style in OpenLayers through the ol-mapbox-style plugin, which reads the style JSON and translates it into OpenLayers layers. No API key is required.

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/olms.js"></script>

npm

npm install ol ol-mapbox-style

Basic setup

Pass the container id and the community style URL to apply(). It creates the map, adds the styled layers, and returns a promise that resolves with the map.

import { apply } from 'ol-mapbox-style';

apply('map', 'https://styles.maptoolkit.org/summer.json');

To configure the view yourself, create the Map first and pass it to apply():

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import { fromLonLat } from 'ol/proj.js';
import { apply } from 'ol-mapbox-style';

const map = new Map({
  target: 'map',
  view: new View({
    center: fromLonLat([16.37, 48.21]),
    zoom: 12,
  }),
});

apply(map, 'https://styles.maptoolkit.org/summer.json');

Examples

See the Examples gallery for markers, popups, and more on the vector basemap.

Attribution

The Maptoolkit style includes the OpenStreetMap data attribution, which OpenLayers shows in its attribution control. You also need the © Maptoolkit © OSM copyright line and the Maptoolkit logo. See Quick Start - Add attribution.