MapLibre GL sample

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

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. All you need to display a map with MapLibre GL is to provide a link to a style.json with the valid API key.

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>MapTiles+Map Libre GL</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/maplibre-gl/dist/maplibre-gl.css">


    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        #my-map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="my-map"></div>
    <script type="text/javascript">
        import { Map, NavigationControl } from 'https://cdn.skypack.dev/maplibre-gl';

        // Get your own API Key on https://myprojects.geoapify.com
        var myAPIKey = "YOUR_API_KEY_HERE";

        var map = new Map({
            container: 'my-map',
            style: `https://maps.geoapify.com/v1/styles/klokantech-basic/style.json?apiKey=${myAPIKey}`,
        });
        map.addControl(new NavigationControl());
    </script>
</body></html>

Save the file and open it in a browser.