Mapilion Openlayers Example

Shows how to use Openstreetmap vector tiles from Mapilion with Openlayers

by boldtrn

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8' />
    <title>Mapilion Example</title>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,Promise"></script>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <script src="https://cdn.rawgit.com/boundlessgeo/ol-mapbox-style/v3.5.0/dist/olms.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
  </head>

  <body>
    <!-- This example shows how to use vector tiles from Mapilion.com in combination with Openlayers-->
    <div id="map"></div>
  </body>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

JavaScript

// Get a valid key at Mapilion.com
var style = 'https://tiles.mapilion.com/assets/osm-bright/style.json?key=3b3d8353-0fb8-4513-bfe0-d620b2d77c45';
var map = new ol.Map({
  target: 'map'
});
olms.apply(map, style);