<html>
<head>
  <link href='https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css' rel='stylesheet'/>

  <style>

    body {
      line-height: 1.6;
      font-weight: 300;
      font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #222;
    }

    header {
      position: fixed;
      background-color: white;
      margin: 9px;
      padding: 20px;
      z-index: 1;
      border: solid 2px lightgray;
      border-radius: 5px;
      width: 300px;
    }

    header h2 {
      margin: 0;
    }

    header p {
      margin: 0 0 10px 0;
    }

    #map {
      width: 100%;
      height: 100%;
      z-index: 0;
    }

  </style>
  <title>Demonstration - Baremaps</title>
</head>
<body style="margin: 0">
<header>
  <h2><i class="far fa-map"></i> Baremaps</h2>
  <p>These <a target="_blank" href="https://docs.mapbox.com/vector-tiles/reference/">vector tiles</a> have been crafted with <a href="https://www.baremaps.com">Baremaps</a> and <a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> data.</p>
  <a class="github-button" href="https://github.com/baremaps/baremaps" data-size="large" data-show-count="true"
     aria-label="Star baremaps/baremaps on GitHub">Star</a>
  <a class="github-button" href="https://github.com/baremaps/baremaps/releases/latest"
     data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large"
     aria-label="Download baremaps/baremaps on GitHub">Download</a>
</header>
<div id="map"></div>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js'></script>
<script src="https://kit.fontawesome.com/14dcd5fdfb.js" crossorigin="anonymous"></script>
<script src="https://buttons.github.io/buttons.js" crossorigin="anonymous"></script>
<script>

  // Initialize the map
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'https://tiles.baremaps.com/style.json',
    center: [6.5743, 46.5189],
    zoom: 14,
    minZoom: 6,
    maxZoom: 18
  });

  map.addControl(new mapboxgl.NavigationControl());

</script>
</body>
</html>