MapTiles+Leaflet

Display a map with Leaflet

by Geoapify

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css">
<script src="https://unpkg.com/mapbox-gl-leaflet@0.0.16/leaflet-mapbox-gl.js"></script>
<div id="my-map"></div>

CSS

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

JavaScript

// Leaflet doesn't have native support of Vector maps
// Use a MapboxGL JS plugin to display maps (https://www.npmjs.com/package/mapbox-gl-leaflet)
// npm i mapbox-gl-leaflet

// The Leaflet map Object
var map = L.map('my-map').setView([48.1500327, 11.5753989], 10);

// the attribution is required for the Geoapify Free tariff plan
map.attributionControl.setPrefix('').addAttribution('Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | © OpenStreetMap <a href="https://www.openstreetmap.org/copyright" target="_blank">contributors</a>');
    
// The API Key provided is restricted to JSFiddle website
// Get your own API Key on https://myprojects.geoapify.com
var myAPIKey = "6dc7fb95a3b246cfa0f3bcef5ce9ed9a"; 
    
var gl = L.mapboxGL({
    style: `https://maps.geoapify.com/v1/styles/osm-bright/style.json?apiKey=${myAPIKey}`,
    accessToken: 'no-token'
}).addTo(map);