Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/index.html

Created December 17, 2012 15:58
Download ZIP

Revisions

  1. Bill Morris revised this gist Dec 17, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -36,7 +36,7 @@
    var container = document.createElement('div');
    var input = document.createElement('input');
    var label = document.createElement('label');
    input.type = 'radio';
    input.type = 'button';
    input.id = input.value = n;
    input.checked = 'checked';
    input.onchange = function() {
  2. Bill Morris created this gist Dec 17, 2012.
    55 changes: 55 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    <!DOCTYPE html>
    <html>
    <head>
    <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.js'></script>
    <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.css' rel='stylesheet' />
    <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    </head>
    <body>
    <style>
    #layers {
    background: #fff;
    position:absolute;
    top:20px;
    left:20px;
    z-index: 1000;
    padding: 10px;
    }
    </style>
    <div id='layers'></div>
    <div id='map'></div>
    <script>
    var map = mapbox.map('map');
    var layers = document.getElementById('layers');

    map.addLayer(mapbox.layer().id('tmcw.map-rep59d6x').named('MapBox Streets').composite(false));
    map.addLayer(mapbox.layer().id('tmcw.newruns').named('My Runs').composite(false));
    map.zoom(12).center({ lat: 38.9, lon: -77 });

    // Create a simple layer switcher that toggles layers on
    // and off.
    for (var i = 0; i < map.getLayers().length; i++) {
    var n = map.getLayerAt(i).name;
    var container = document.createElement('div');
    var input = document.createElement('input');
    var label = document.createElement('label');
    input.type = 'radio';
    input.id = input.value = n;
    input.checked = 'checked';
    input.onchange = function() {
    map.getLayer(this.value).enabled ?
    map.getLayer(this.value).disable() :
    map.getLayer(this.value).enable();
    };
    label.innerHTML = n;
    label.setAttribute('for', n);
    container.appendChild(input);
    container.appendChild(label);
    layers.appendChild(container);
    }
    </script>
    </body>
    </html>