Basic Map
Pass the container id and the Maptoolkit style URL to olms.apply(). The plugin builds the map and translates the style into OpenLayers layers.
olms.apply('map', 'https://styles.maptoolkit.org/summer.json').then(function (map) {
map.getView().setCenter(ol.proj.fromLonLat([2.3522, 48.8566]));
map.getControls().forEach(function (c) { if (c instanceof ol.control.Attribution) map.removeControl(c); });
map.getView().setZoom(12);
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100%; }
.mtk-logo { position: absolute; left: 8px; bottom: 8px; z-index: 2; line-height: 0; }
.mtk-logo img { height: 24px; display: block; }
.mtk-attrib { position: absolute; right: 0; bottom: 0; z-index: 2; background: transparent; font: 11px/1.4 system-ui, sans-serif; padding: 2px 6px; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.mtk-attrib a { color: #1a73e8; text-decoration: none; }
</style>
</head>
<body>
<div id="map"></div>
<a class="mtk-logo" href="https://www.maptoolkit.com/" target="_blank" rel="noopener"><img src="./maptoolkit-logo.png" alt="Maptoolkit" /></a>
<div class="mtk-attrib">© <a href="https://www.maptoolkit.com/copyright/" target="_blank" rel="noopener">Maptoolkit</a> © <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OSM</a></div>
<script>
olms.apply('map', 'https://styles.maptoolkit.org/summer.json').then(function (map) {
map.getView().setCenter(ol.proj.fromLonLat([2.3522, 48.8566]));
map.getControls().forEach(function (c) { if (c instanceof ol.control.Attribution) map.removeControl(c); });
map.getView().setZoom(12);
});
</script>
</body>
</html>