Mapbox
kode-eksempel:

"Show and hide layers"

<head>
  <meta charset='utf-8' />
  <title>Show and hide layers</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>

Mapbox-eksempel:

https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/

<body>

  <style>
    ....
  </style>

  <nav id="menu"></nav>
  <div id="map"></div>

  <script>
    ...
  </script>
  
</body>

W3Schools:

https://www.w3schools.com/tags/tag_nav.asp

<style>
    #menu {
        background: #fff;
        position: absolute;
        z-index: 1;
        top: 10px;
        right: 10px;
        border-radius: 3px;
        width: 120px;
        border: 1px solid rgba(0,0,0,0.4);
        font-family: 'Open Sans', sans-serif;
    }

    #menu a {
        font-size: 13px;
        color: #404040;
        display: block;
        margin: 0;
        padding: 0;
        padding: 10px;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,0.25);
        text-align: center;
    }
  
    ...
  
</style>

map.on('load', function () {
  
    map.addSource('museums', {
        type: 'vector',
        url: 'mapbox://mapbox.2opop9hr'
    });
  
    map.addLayer({
        'id': 'museums',
        'type': 'circle',
        'source': 'museums',
        'layout': {
            'visibility': 'visible'
        },
        'paint': {
            'circle-radius': 8,
            'circle-color': 'rgba(55,148,179,1)'
        },
        'source-layer': 'museum-cusco'
    });
  
    ...
  
});

var toggleableLayerIds = [ 'contours', 'museums' ];

Hva er DOM?

Eloquent JavaScript
3rd edition:

Chapter 14
The Document Object Model

(til og med Trees)

var toggleableLayerIds = [ 'contours', 'museums' ];

for (var i = 0; i < toggleableLayerIds.length; i++) {

    var id = toggleableLayerIds[i];

    var link = document.createElement('a');
    link.href = '#';
    link.className = 'active';
    link.textContent = id;

    ....
  
    var layers = document.getElementById('menu');
    layers.appendChild(link);
}

HTML DOM createElement() Method

https://www.w3schools.com/jsref/met_document_createelement.asp

Kode som legger til lag-menyen i kartet:

link.onclick = function (e) {
  var clickedLayer = this.textContent;
  e.preventDefault();
  e.stopPropagation();

  var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

  if (visibility === 'visible') {
    map.setLayoutProperty(clickedLayer, 'visibility', 'none');
    this.className = '';
  } else {
    this.className = 'active';
    map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
  }
};

Her defineres hva som skal skje når man klikker:
egenskapen visibility endrer verdi fra visible til none - eller motsatt

Mapbox kode-eksempel:

"Show and hide layers"

Mapbox
kode-eksempel: