Rub21
1/15/2017 - 3:05 PM

save from leaflet draw

save from leaflet draw

index.html
content_copyfile_download
<!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>