Mapilion Mapbox GL Example

This example shows how to use Mapbox GL with Openstreetmap vector tile from Mapilion

by boldtrn

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8' />
    <title>Mapilion Mapbox GL Example</title>
    <script src="https://tiles.mapilion.com/assets/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
    <link href="https://tiles.mapilion.com/assets/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
  </head>

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

</html>

CSS

body {
  margin: 0;
  padding: 0;
}

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

JavaScript

// Get a valid key at Mapilion.com
var map = new mapboxgl.Map({
  container: 'map',
  style: 'https://tiles.mapilion.com/assets/osm-bright-hs-v2/style.json?key=3b3d8353-0fb8-4513-bfe0-d620b2d77c45',
  center: [2.460938, 50.513427],
  zoom: 3
});