Integrating Boundless Offline Tile Server (BOTS)

You saw the built in demo clients on the front page, but there are many different way to integrate Boundless Offline Tile Server into your geospatial work.

Vector Tiles

BOTS serves out vector tiles encoded in protocol buffer format, commonly known as Mapbox vector tiles. Unlike raster tiles, vector tiles contain the vector data itself. This means, using attributes, the client controls how a vector tile is displayed.

Quickstart: Make a Map

Use the following code snippets to quickly get started.

OpenLayers

This HTML/JS is all you need to create a simple map from BOTS using OpenLayers. Note: This example assumes that your BOTS instance is running on https://localhost:8000/bots/. You will need to point this to the real hostname and port when you begin regular operations.

<!DOCTYPE html>
   <html>
   <head>
     <title>Boundless Basemap Demo</title>
     <link rel="stylesheet" href="https://localhost:8000/bots/style/ol.css">
     <style>
       html, body {
         height: 100%;
         margin: 0;
       }
       #map {
         width: 100%;
         height: 100%;
       }
     </style>
   </head>
   <body>
     <div id="map"></div>
     <script src="https://localhost:8000/bots/js/ol.js"></script>
     <script src="https://localhost:8000/bots/js/olms.js"></script>
     <script>
     var map = olms.apply('map', 'https://localhost:8000/bots/style/osm-liberty/osm-liberty.json');
     </script>
   </body>
   ```

Mapbox-GL

Just as with the OpenLayers example you’ll need to adjust https://localhost:8000/bots/ to the hostname and port of your BOTS instance.

<meta charset=utf-8 />
<title>Boundless Basemap Demo</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script src='https://localhost:8000/bots/js/mapbox-gl.js'></script>
<link href='https://localhost:8000/bots/style/mapbox-gl.css' rel='stylesheet' />
<div id='map'></div>
<script>
var map = new mapboxgl.Map({
    container: 'map',
    style: 'https://localhost:8000/bots/style/osm-liberty/osm-liberty.json',
    center: [8.538961,47.372476],
    zoom: 5,
    hash: true
});
</script>

Advanced

Accessing Tiles Directly

If you are already using an application that can consume and style tiles, you would use the BOTS templated URL: https://localhost:8000/bots/tiles/{z}/{x}/{y}.pbf. Your client will automatically substitute z,x,y with the correct tile numbers. Note: localhost will be replaced with the actual BOTS hostname, and should be advertised on the BOTS landing page.

../_images/bots-landing.png

Styling

The Boundless Offline Tile Service comes with an open source style called OSM Liberty, which is listed on the BOTS landing page. Feel free to use it directly, use it as a base for creating your own style, or design one completely from scratch. We recommend Maputnik as a great open source editor.