• Imprimeix

API de Mapbox

Para utilizar la API de Mapbox GL JS son necesarios unos conocimientos mínimos de HTML y javascript.

A continuación, se muestra el código de un visor de ejemplo que utiliza los servidores ICGC en caché para Mapbox GL JS v1.12.0 en el sistema de referencia 3857 (pseudo-mercator) ETRS89 y projección UTM huso 31 (código EPSG 25831). Las capa disponible es topo (mapa topográfico).

 

<!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}.jpeg",
            ],
            '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>