MapTiles+MapLibre GL

Display a map with MapLibre GL (an open-source fork of Mapbox GL)

by Geoapify

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css">
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<div id="my-map"></div>

CSS

body {
      margin: 0;
      padding: 0;
    }

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

JavaScript

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

var map = new maplibregl.Map({
  container: 'my-map',
  style: `https://maps.geoapify.com/v1/styles/osm-bright/style.json?apiKey=${myAPIKey}`,
});
map.addControl(new maplibregl.NavigationControl());

map.on('load', () => {
    map.setPaintProperty('highway-motorway', 'line-width', {"base":1.2,"stops":[[6.5,0],[7,1.25],[20,45]]});
});