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://mapilion-vector-and-raster-map-tiles.p.rapidapi.com/rapid-api/stylejson/osm-bright?rapidapi-key=58f9eb44e1msh73c9bc196e9ba9dp106ef0jsn85dbd798489d',
  center: [2.460938, 50.513427],
  zoom: 3
});