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.

  1. You will require Geoapify API Key to display a map. Register and get an API key for free on Geoapify MyProjects.

  2. Visit our documentation page for Map Tiles to get a link to style.json.

  3. 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/[email protected]/en/v6.2.1/build/ol.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/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>
    
  4. Save the file and open it in a browser.