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.