How to use VersaTiles?

There are different ways to use VersaTiles.

Use our map server

Just copy & paste the following code into your website.

<!-- add MapLibre JavaScript and CSS -->
<script src="https://tiles.versatiles.org/assets/maplibre/maplibre-gl.js"></script>
<link href="https://tiles.versatiles.org/assets/maplibre/maplibre-gl.css" rel="stylesheet" />

<!-- add container for the map -->
<div id="map" style="width:100%;aspect-ratio:16/9"></div>

<!-- start map -->
<script>
   new maplibregl.Map({
      container: 'map',
      style: 'https://tiles.versatiles.org/styles/colorful.json'
   });
</script>

Try it at JSFiddle

Pros: simple and free
Cons: we can't garantee 24/7 availability and maximum performance, yet

If you want to learn more about the MapLibre framework, take a look at their documentation and their examples of how to add markers, popups or GeoJSON.

Use a CDN in front of our map server

Commercial providers prohibit the caching of map tiles to ensure that you always have to pay for the full traffic. However, our map tiles are free and not subject to any additional conditions (except attribution to OSM contributors).
We even encourage you to cache tiles with your own CDN. This takes the load off our servers and improves the performance and stability of your map applications.

Use a CDN like:

• bunny.net
• …

Pros: relative simple, greatly improves availability and performance
Cons: Costs around 10€ per month

Please help us to improve the documention.

Run your own server

You can download the latest planet and serve it using your own server. We are still testing this approach and working on a documention. But you can already use our Rust server, a Node.js implementation or one of the Docker containers

Run your own cloud service

You can download the latest planet and serve it using your own cloud service on Google Cloud, AWS, Microsoft Azure, DigitalOcean, …

We are still testing this approach and working on a documention.