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/[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>

Save the file and open it in a browser.

Learn more