Playground: Simple Map

How to add a simple OSM map.

MapLibre GL JS loads and renders map tiles in the browser. To use MapLibre, you need to load the necessary JavaScript and CSS files. Based on our frontend specification, the necessary assets should always be available under:

In our example, we load these assets from our demo server at https://tiles.versatiles.org, but you can modify all URLs as needed.

Warning

You might want to include libraries such as MapLibre GL JS directly in your project and serve them yourself instead of loading them from tiles.versatiles.org. We regularly update frontend libraries on our demo server. However, this could introduce breaking changes to your project at some point in the future.

Loading the MapLibre library adds the global maplibregl variable to the JavaScript environment. Use new maplibregl.Map() to initialise your map.

To learn more about all the options provided by MapLibre, take a look at the documentation for the Map class documentation and in general the MapLibre API documentation. We can also highly recommend all the MapLibre examples.