OpenLayers sample

Display a map with OpenLayers

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. Use ol-mapbox-style to create an OpenLayers map from a Mapxbox Style Specification.

Create an OpenLayers map with ol-mapbox-style plugin and 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+OpenLayers</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css">
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/olms.js"></script>
    
    <style id="compiled-css" 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">
        // Get your own API Key on https://myprojects.geoapify.com
        var myAPIKey = "YOUR_API_KEY_HERE";

        olms('my-map', `https://maps.geoapify.com/v1/styles/positron/style.json?apiKey=${myAPIKey}`).then((map) => {
            // you will get ol.Map instance here
        });
    </script>
</body></html>

Save the file and open it in a browser.