Leaflet.TileLayer.Swiss

Leaflet.TileLayer.Swiss is a Leaflet plugin for displaying national maps of Switzerland using map tiles from Swisstopo. This plugin is not affiliated with or endorsed by Swisstopo.

Quick start

The following code explains all steps required to get started with Leaflet.TileLayer.Swiss. It corresponds to the example at the top of the page. In order to run it locally, copy the 2 files below into a folder on your computer, then open quick-start.html in your browser.

quick-start.html

Download

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Quick start</title>

  <!-- Include Leaflet CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"
        crossorigin integrity="sha384-o/2yZuJZWGJ4s/adjxVW71R+EO/LyCwdQfP5UWSgX/w87iiTXuvDZaejd3TsN7mf">

  <style>
    /* Set full width and height for the map */
    html, body, #mapid { height: 100%; margin: 0; }
  </style>
</head>

<body>
  <!-- Element where the map will be attached -->
  <div id="mapid"></div>

  <!-- Include Leaflet and Leaflet.TileLayer.Swiss JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"
          crossorigin integrity="sha384-okbbMvvx/qfQkmiQKfd5VifbKZ/W8p1qIsWvE1ROPUfHWsDcC8/BnHohF7vPg2T6">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/leaflet-tilelayer-swiss@2.3.0/dist/Leaflet.TileLayer.Swiss.umd.js"
          crossorigin integrity="sha384-M4p8VfZ8RG6qNiPYA3vOCApQXAlLtnJXVPdydMYPAsvvIDsWp2dqqzF2OEeWWNhy">
  </script>

  <!-- Include quick start JavaScript -->
  <script src="quick-start.js"></script>
</body>

</html>

quick-start.js

Download

// Create map and attach id to element with id "mapid"
var map = L.map('mapid', {
  // Use LV95 (EPSG:2056) projection
  crs: L.CRS.EPSG2056,
});

// Add Swiss layer with default options
L.tileLayer.swiss().addTo(map);

// Center the map on Switzerland
map.fitSwitzerland();

// Add a marker with a popup in Bern
L.marker(L.CRS.EPSG2056.unproject(L.point(2600000, 1200000))).addTo(map)
  .bindPopup('Bern')
  .openPopup();