Leaflet vector maps sample

Display a vector map with Leaflet

Attention! This tutorial uses the Mapbox GL Leaflet plugin that requires the Mapbox GL library as a peer dependency. From December 2020 the Mapbox GL is not under the OSS license. You can use MapLibre GL - the open-source fork as an alternative or stay with Mapbox GL 1.x version.

We use Mapxbox Style Specification that defines the visual appearance of a map: what data to draw, the order to draw it in, and how to style the data when drawing it. As Leaflet doesn't support Mapbox style specification and vector maps by default, a Mapbox GL Leaflet plugin is required to display a map.

Create a Leaflet map and provide a link to a style.json with the valid API key to the Mapbox GL Leaflet plugin.

You will require Geoapify API Key to display a map. Register and get an API key for free on Geoapify MyProjects.
Visit our documentation page for Map Tiles to get a link to style.json.
Create an HTML file and add the following code:

<html><head>
    <title>Map Tiles+Leaflet</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
    <script type="text/javascript" src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js"></script>
    <link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css">
    <script type="text/javascript" src="https://rawgit.com/mapbox/mapbox-gl-leaflet/master/leaflet-mapbox-gl.js"></script>

    <style type="text/css">
        html, body, #my-map {
            width: 100%;
            height: 100%;
            margin: 0;
        }
  </style>
</head>
<body>
    <div id="my-map"></div>
    <script type="text/javascript">
        // 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>');
    
        // Get your own API Key on https://myprojects.geoapify.com
        var myAPIKey = "YOUR_API_KEY_HERE"; 
    
        var gl = L.mapboxGL({
            style: `https://maps.geoapify.com/v1/styles/osm-bright/style.json?apiKey=${myAPIKey}`,
            accessToken: 'no-token'
        }).addTo(map);
</script>
</body></html>

Save the file and open it in a browser.