# Flere kartlag i Mapbox
---
## WMS-lag
*hydro_power_stations.js:*
```javascript
/**
* 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:*
```javascript
/**
* 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:*
```javascript
/**
* 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:*
```javascript
/**
* 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:*
```javascript
/**
* 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:*
```html
```
## Flere eksempler
Se kartet disse eksemplene er hentet fra her:
- [Kart over Hinnøya](https://folk.ntnu.no/sverrsti/GEO2311-H2019/docs/giftmap/)
Bruk *Ctrl + U* for å se koden.
Kode for å slå av og på kartlag er hentet fra Mapbox-eksemplet [Show and hide layers](https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/), men det er en del utvidet. Koden for dette ligger i *index.html*.
---
*NTNU 26.09.2019 Sverre Stikbakke*
¯\_(ツ)_/¯