Skip to content

Instantly share code, notes, and snippets.

@danswick

danswick/index.html

Created October 30, 2015 22:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save danswick/d30c44b081be31aea483 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save danswick/d30c44b081be31aea483 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. danswick revised this gist Oct 30, 2015. No changes.
  2. Bobby Sudekum created this gist Apr 25, 2014.
    104 changes: 104 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,104 @@
    <!DOCTYPE html>
    <html>

    <head>
    <meta charset=utf-8 />
    <title>Demo</title>

    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />

    <!--Add mapbox.js -->
    <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />

    <!--Add draw plugin -->
    <link rel='stylesheet' href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css' />
    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js'></script>

    <style>
    body {
    margin: 0;
    padding: 0;
    }
    #map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    }
    #delete, #export {
    position: absolute;
    top:50px;
    right:10px;
    z-index:100;
    background:white;
    color:black;
    padding:6px;
    border-radius:4px;
    font-family: 'Helvetica Neue';
    cursor: pointer;
    font-size:12px;
    text-decoration:none;
    }
    #export {
    top:90px;
    }
    </style>
    </head>

    <body>

    <div id='map'></div>
    <div id='delete'>Delete Features</div>
    <a href='#' id='export'>Export Features</a>

    <script>
    var map = L.mapbox.map('map')
    .setView([37.7711,-482.4424], 14);

    // Add layers to the map
    L.control.layers({
    'Satellite Map': L.mapbox.tileLayer('bobbysud.map-l4i2m7nd', {
    detectRetina: true
    }).addTo(map),
    'Terrain Map': L.mapbox.tileLayer('bobbysud.i2pfp2lb', {
    detectRetina: true
    })
    }).addTo(map);

    var featureGroup = L.featureGroup().addTo(map);

    var drawControl = new L.Control.Draw({
    edit: {
    featureGroup: featureGroup
    }
    }).addTo(map);

    map.on('draw:created', function(e) {

    // Each time a feaute is created, it's added to the over arching feature group
    featureGroup.addLayer(e.layer);
    });


    // on click, clear all layers
    document.getElementById('delete').onclick = function(e) {
    featureGroup.clearLayers();
    }

    document.getElementById('export').onclick = function(e) {
    // Extract GeoJson from featureGroup
    var data = featureGroup.toGeoJSON();

    // Stringify the GeoJson
    var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));

    // Create export
    document.getElementById('export').setAttribute('href', 'data:' + convertedData);
    document.getElementById('export').setAttribute('download','data.geojson');
    }
    </script>

    </body>

    </html>