D3 Examples - Basic example of using Mapbox GL JS map classes for style changes

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Mapbox GL JS class demo</title>
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
        <style>
            body { margin:0; padding:0; }
​
            #map { position:absolute; top:0; bottom:0; width:100%; }
​
            #infoWindow {
                position: absolute;
                right: 10px;
                top: 10px;
            }
​
        </style>
    </head>
    <body>
​
    <!-- The magic map div -->
    <div id='map'></div>
​
    <!-- The magic info div -->
    <div id='infoWindow'>
    </div>
​
    <script>
​
    // ajzeigert key
    mapboxgl.accessToken = 'pk.eyJ1IjoiYWp6ZWlnZXJ0IiwiYSI6IldLdVhKN1UifQ.43CCALwNLBzVybtPFvcaJQ';
​
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/light-v9', //stylesheet location
        center: [-121.3, 44.05], // starting position
        zoom: 10, // starting zoom
        hash: true
    });
​
    map.on('load', function(){
        map.addSource('fails', {
            'type': 'geojson',
            'data': 'fails.geojson'
        });
        map.addLayer({
            'id': 'fails',
            'source': 'fails',
            'type': 'circle',
            'paint': {
                'circle-radius': 10,
                'circle-color': '#7aa0b4',
            },
            'paint.foo': {
                'circle-radius': 20,
                'circle-color': '#d9b410'
            }
        });
        var button = document.createElement('button');
        button.classList.add('btn', 'btn-info', 'pull-right');
        button.setAttribute('type', 'button');
        button.innerHTML = 'Add foo class';
        button.addEventListener('click', function(e){
            if (map.hasClass('foo') === false ) {
                map.addClass('foo');
                this.innerHTML = 'Remove foo class';
            } else {
                map.removeClass('foo');
                this.innerHTML = 'Add foo class';
            }
        });
        var overlay = document.getElementById('infoWindow');
        overlay.appendChild(button);
    })
​
    </script>
​
    </body>
</html>
​
    