MapTiles+OpenLayers

Display a map with OpenLayers

by Geoapify

HTML

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css">
<script src="https://unpkg.com/[email protected]/dist/olms.js"></script>
<div id="my-map"></div>

CSS

html,
body,
#my-map {
  width: 100%;
  height: 100%;
  margin: 0;
}

JavaScript

// OpenLayers doesn't have native support of Vector maps
// Use the "ol-mapbox-style" plugin to display maps (https://github.com/openlayers/ol-mapbox-stylet)
// npm install ol-mapbox-style

// The API Key provided is restricted to JSFiddle website
// Get your own API Key on https://myprojects.geoapify.com
var myAPIKey = "6dc7fb95a3b246cfa0f3bcef5ce9ed9a";

olms('my-map', `https://maps.geoapify.com/v1/styles/positron/style.json?apiKey=${myAPIKey}`).then((map) => {
  // you will get ol.Map instance here
});