### developers

## MapBox.js v1.0.0

### Toggling UI

Enabling and disabling UI elements

- Interactivity
- Legend
- Zoomer
- Fullscreen
- Attribution
- Hash

Select all

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>Toggling UI</title>

      <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
      <script src='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js'></script>
      <link href='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css' rel='stylesheet' />

      <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
      </style>
    </head>
    <body>

    <!--
      Include Leaflet.fullscreen and Leaflet-hash's CSS and JavaScript assets.
      Unlike mapbox.js, these are not hosted by MapBox; you will
      need to download and host them yourself.
    -->
    <link rel="stylesheet" href="/mapbox.js/assets/leaflet.fullscreen.css" />
    <script src="/mapbox.js/assets/Leaflet.fullscreen.js"></script>
    <script src="/mapbox.js/assets/leaflet-hash.js"></script>

    <style>
    #map-ui {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 100;
    }

    #map-ui ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #map-ui a {
        font-size: 13px;
        background: #FFF;
        color: #3C4E5A;
        display: block;
        margin: 0;
        padding: 0;
        border: 1px solid #BBB;
        border-bottom-width: 0;
        min-width: 138px;
        padding: 10px;
        text-decoration: none;
    }

    #map-ui a:hover {
        background: #ECF5FA;
    }

    #map-ui li:last-child a {
        border-bottom-width: 1px;
        -webkit-border-radius: 0 0 3px 3px;
        border-radius: 0 0 3px 3px;
    }

    #map-ui li:first-child a {
        -webkit-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;
    }

    #map-ui a.active {
        background: #3887BE;
        border-color: #3887BE;
        border-top-color: #FFF;
        color: #FFF;
    }

    #map-ui li:first-child a.active {
        border-top-color: #3887BE;
    }

    #map .map-fullscreen {
        background-color: #28353D;
    }
    </style>
    <div id='map'>
        <div id='map-ui'>
            <ul>
                <li><a href='#' id='grid' class='active'>Interactivity</a></li>
                <li><a href='#' id='legend'>Legend</a></li>
                <li><a href='#' id='zoomer' class='active'>Zoomer</a></li>
                <li><a href='#' id='fullscreen'>Fullscreen</a></li>
                <li><a href='#' id='attribution' class='active'>Attribution</a></li>
                <li><a href='#' id='hash'>Hash</a></li>
            </ul>
        </div>
    </div>
    <script>
    var map = L.mapbox.map('map', 'examples.map-9ijuk24y', {attributionControl: true})
        .setView([38.82, -94.96], 4);

    var tileLayer = L.mapbox.tileLayer('examples.npr-stations')
        .addTo(map);
    var gridLayer = L.mapbox.gridLayer('examples.npr-stations')
        .addTo(map);
    var gridControl = L.mapbox.gridControl(gridLayer, {follow: true})
        .addTo(map);

    document.getElementById('grid').onclick = function() {
        if (this.className === 'active') {
            map.removeLayer(tileLayer);
            map.removeLayer(gridLayer);
            map.removeControl(gridControl);
            this.className = '';
        } else {
            map.addLayer(tileLayer);
            map.addLayer(gridLayer);
            map.addControl(gridControl);
            this.className = 'active';
        }
    };

    var legend = 'Data from Robert Kieffer.';

    document.getElementById('legend').onclick = function() {
        if (this.className === 'active') {
            map.legendControl.removeLegend(legend);
            this.className = '';
        } else {
            map.legendControl.addLegend(legend);
            this.className = 'active';
        }
    };

    var fullscreenControl = new L.Control.Fullscreen();
    var hash = L.hash();

    // Connect check boxes to ui functions
    function toggle(control, element) {
        if (element.className === 'active') {
            control.removeFrom(map);
            element.className = '';
        } else {
            control.addTo(map);
            element.className = 'active';
        }
    }

    document.getElementById('zoomer').onclick = function() {
        toggle(map.zoomControl, this);
    };

    document.getElementById('fullscreen').onclick = function() {
        toggle(fullscreenControl, this);
    };

    document.getElementById('attribution').onclick = function() {
        toggle(map.attributionControl, this);
    };

    document.getElementById('hash').onclick = function() {
        if (this.className === 'active') {
            hash.remove();
            this.className = '';
        } else {
            hash.init(map);
            this.className = 'active';
        }
    };
    </script>

The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.