Vector Tiles Background Map

231 views
Skip to first unread message

Michael Thalmann

unread,
Jun 10, 2021, 3:49:03 AM6/10/21
to GeoAdminCh API

Hello everybody

I'd like to use the "light basemap" as a background map, especially because the vector tiles allow styling.

I would like to use Leaflet to design the map. Since Leaflet does not support VectorTiles directly, I wanted to use the VectorGrid extension. For this, I found the following example code:

L.vectorGrid.protobuf("https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token={token}", {
    vectorTileLayerStyles: { ... },
    subdomains: "fjghjhfg",
    token: "pk.abcd3456789abcde"
}).addTo(map);

Do I need to have a Mapbox account for the token? Or is there a way to use the VectorTiles for free?

Thank you very much for your help!
Kind regards, Michael


Sebastian Denier

unread,
Jun 10, 2021, 8:00:29 AM6/10/21
to GeoAdminCh API
Hello Michael

I setup an html-example for you:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="https://cdn.maptiler.com/mapbox-gl-js/v1.5.1/mapbox-gl.css" />
    <style>
      #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <p><a href="https://www.swisstopo.ch/" target="_blank">&copy; swisstopo</a></p>
    <script>
      var map = L.map('map').setView([46.78260, 8.74497], 12);
      var gl = L.mapboxGL({
        attribution: "\u003ca href=\"https://www.swisstopo.ch/\" target=\"_blank\"\u003e\u0026copy; swisstopo\u003c/a\u003e",
      }).addTo(map);
    </script>
  </body>
</html>

You can load the light base map in leaflet directly by using the style.
Please note that in this example some libraries (mapbox-gl.js, leaflet-mapbox-gl.js) and css are loaded from another provider: maptiler.com. please check with them, if you can load the libraries from them or otherwise find them somewhere else (I'm sure there are plenty of CDN where you can access them from)

Sebastian Denier

unread,
Jun 10, 2021, 8:00:29 AM6/10/21
to GeoAdminCh API
Hello Michael

I've never tried using vectortiles in leaflet but you can access lightbase map pbfs directly (see: https://api3.geo.admin.ch/services/sdiservices.html#id45).
to use the lightbase map pbfs you don't need a token.

To use mapbox pbfs and styles I'm pretty sure you need an access token. you can generate your own for testing and i think it's free.

Hope this helps,
Sebastian





Michael Thalmann schrieb am Donnerstag, 10. Juni 2021 um 09:49:03 UTC+2:

Michael Thalmann

unread,
Jun 14, 2021, 3:52:03 AM6/14/21
to GeoAdminCh API
Hello Sebastian

Thank you very much! I think that helps me a lot.

Kind regards,
Michael
Reply all
Reply to author
Forward
0 new messages