Flere kartlag i Mapbox

WMS-lag

hydro_power_stations.js:

/**
 * Mapbox image tile layer
 * 
 * sverre.stikbakke 25.06.2019
 */


map.on('load', function () {

  var minZoomThreshold = 10;

  map.addLayer({
    'id': 'hydro_power_stations',
    'type': 'raster',
    'source': {
      'type': 'raster',
      'minzoom': minZoomThreshold,
      'tiles': [
        'https://gis3.nve.no/map/services/Vannkraft1/MapServer/WmsServer'
        + '?bbox={bbox-epsg-3857}'
        + '&format=image/png'
        + '&service=WMS'
        + '&version=1.3.0'
        + '&request=GetMap'
        + '&crs=EPSG:3857'
        + '&width=256'
        + '&height=256'
        + '&layers=Vannkraftverk'
        + '&styles='
        + '&transparent=true'
      ],
      'tileSize': 256
    },
    'layout': {},
    'paint': {}
  });
});

Dette er kode som legger til et WMS-lag over basis-kartet i Mapbox. Legg merke til:

hele koden er "pakket inn" i funksjonen on på som ligger som en member på Map-objektet gjennom variabelen map.
addLayer-funksjonen som også ligger på Map-objektet
parametrene i objektet som sendes inn til addLayer-funksjonen:
- 'id' - et navn på laget som settes av deg
- 'type' - her raster, se andre typer i andre eksempler
- 'source' - beskriver hvor kartlaget hentes fra
- 'layout' - denne er tom her, ettersom dette er et bildeformat
- 'paint' - også tom for WMS-bilder
source-objektet har igjen sine parametre:
- 'type' - her raster
- 'minzoom' - vises bare over et visst zoom-nivå
- 'tiles' - beskriver hvor bildefilene finnes, her fra WMS-kall
WMS-kallet ligger som et javascript array
- bbox={bbox-epsg-3857}' - dette er ikke standard WMS-verdi for BBOX, men det er Mapbox sin mekanisme for å angi at BBOX skal regnes ut av Mapbox selv.

WMTS-lag

papermap_bg.js:

/**
 * Mapbox image tile layer
 * 
 * sverre.stikbakke 25.06.2019
 */


map.on('load', function () {

  var minZoomThreshold = 5;

  map.addLayer({
    'id': 'papermap_bg',
    'type': 'raster',
    'minzoom': minZoomThreshold,
    'source': {
      'type': 'raster',
      'tiles': [
        'https://opencache.statkart.no/gatekeeper/gk/gk.open_wmts' + '?' +
        'Service=WMTS' + '&' +
        'Version=1.0.0' + '&' +
        'Request=GetTile' + '&' +
        'Format=image/png' + '&' +
        'Style=default' + '&' +
        'Layer=toporaster3' + '&' +
        'TileMatrixSet=EPSG:3857' + '&' +
        'TileMatrix=EPSG:3857:{z}' + '&' +
        'TileCol={x}' + '&' +
        'TileRow={y}'
      ],
      'tileSize': 256
    },
    'layout': {},
    'paint': {}
  });
});

Legg merke til hvordan x, y og z er angitt. z angir zoom-nivået. x- og y angir henholdsvis kolonne- og radnummer i den aktuelle tilematrix. Bortsett fra at WMTS-parametrene er anderledes, så er denne WMTS-koden bygd opp på samme måte som WMS-koden.

GeoJSON-fil - linje

fishfarm_trip.js:

/**
 * Mapbox image tile layer
 * 
 * sverre.stikbakke 25.06.2019
 */


map.on('load', function () {

  var minZoomThreshold = 5;

  map.addLayer({
    'id': 'fishfarm_trip',
    'type': 'line',
    'source': {
      'type': 'geojson',
      'data': 'fishfarm_trip.geojson'
    },
    'layout': {
      "line-join": "round",
      "line-cap": "round"
    },
    'paint': {
      "line-color": "rgba(204,0,153,0.8)",
      "line-width": 3
    }
  });

});

Legg merke til hvordan type, source, layout og paint er angitt her.
GeoJSON-filen må ligge i samme mappe som javascript-filen. visibility er satt til none for at laget skal være avslått når kartet lastes. Det kan gjøres synlig med en trykknapp.

GeoJSON-fil - flate

smart_aggregate.js:

/**
 * Mapbox image tile layer
 * 
 * sverre.stikbakke 25.06.2019
 */


map.on('load', function () {

  var minZoomThreshold = 8;

  map.addLayer({
    'id': 'smart_aggregate',
    'type': 'fill',
    'source': {
      'type': 'geojson',
      'data': 'smart_aggregate.geojson'
    },
    'layout': {},
    'paint': {
      'fill-color': '#088',
      'fill-opacity': 0.6
    }
  });

});

Legg merke til forskjellen under paint mellom dette og foregående eksempel.

GeoJSON - punkt

thon_hotel.js:

/**
 * Mapbox image tile layer
 * 
 * sverre.stikbakke 25.06.2019
 */


map.on('load', function () {

  var minZoomThreshold = 5;

  map.addLayer({
    "id": "thon_hotel",
    "type": "circle",
    "source": {
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [16.543338, 68.801768]
          }
        }]
      }
    },
    'layout': {},
    "paint": {
      "circle-radius": 14,
      "circle-color": "rgba(0,51,255,0.8)"
    }
  });

});

Legg merke til data-parameteren under source. Her er det ikke henvist til en ekstern fil, men det ligger GeoJSON-kode som beskriver kartobjektet, her et punkt, direkte i javascript-koden.

Kobling mellom HTML-fil og javascript-fil

index.html:

<script src="hydro_power_stations.js"></script>
<script src="papermap_bg.js"></script>
<script src="fishfarm_trip.js"></script>
<script src="smart_aggregate.js"></script>
<script src="thon_hotel.js"></script>

Flere eksempler

Se kartet disse eksemplene er hentet fra her:

Kart over Hinnøya

Bruk Ctrl + U for å se koden.

Kode for å slå av og på kartlag er hentet fra Mapbox-eksemplet Show and hide layers, men det er en del utvidet. Koden for dette ligger i index.html.

NTNU 26.09.2019 Sverre Stikbakke