API de Mapbox

Per a utilitzar l'API de Mapbox GL JS són necessaris uns mínims coneixements d'HTML i javascript.

A continuació, es mostra el codi d'un visor d'exemple que utilitza els servidors ICGC en caché per a Mapbox GL JS v1.12.0 en el sistema de referència 3857 (pseudo-mercator) ETRS89 i projecció UTM fus 31 (codi EPSG 25831). Las capa disponible és topo (mapa topogràfic).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Visor bàsic. Mapbox</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
html, body, #map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
</style>
<body>
<div id="map" ></div> <script>
    var map = new mapboxgl.Map({
    container: 'map',
    style:{
        'version': 8,
        'sources': {
          'raster-tiles': {
            'type': 'raster',
            'tiles': [
              "https://geoserveis.icgc.cat/icc_mapesmultibase/noutm/wmts/topo/GRID3857/{z}/{x}/{y}.png",
            ],
            'tileSize': 256,
          }
        },
        'layers': [{
          'id': 'simple-tiles',
          'type': 'raster',
          'source': 'raster-tiles',
          'minzoom': 0,
          'maxzoom': 22
        }]
      },
    center: [1.5, 41.7],
    zoom: 13
    });
    map.addControl(new mapboxgl.NavigationControl());
    </script>
</body>

</html>

Exemple Mapbox GL JS(1.21 KB)