kgjenkins/index.html

## index.html
<!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' />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
     integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
     crossorigin="" />

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
     integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
     crossorigin=""></script>

    <script src='https://rawgit.com/Wildhoney/Leaflet.FreeDraw/master/dist/leaflet-freedraw.iife.js'></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        #map.mode-create {
            cursor: crosshair;
        }
        #delete, #export {
            position: absolute;
            top:50px;
            right:10px;
            z-index:900;
            background:#060;
            color:#fff;
            padding:6px;
            border-radius:4px;
            font-family: 'Arial', sans-serif;
            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>
        const map = L.map('map')
            .setView([35,-120], 6);

        L.tileLayer('https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png')
            .addTo(map);

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

        const freeDraw = new FreeDraw({ mode: FreeDraw.ALL });
        map.addLayer(freeDraw);

        freeDraw.on('markers', event => {
            console.log(event);
            const polygon = freeDraw.create(event.latLngs);
            console.log(polygon);
            //featureGroup.addLayer(event.layer);
        });


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

        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>
	<!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' />

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
	integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
	crossorigin="" />

	<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
	integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
	crossorigin=""></script>

	<script src='https://rawgit.com/Wildhoney/Leaflet.FreeDraw/master/dist/leaflet-freedraw.iife.js'></script>

	<style>
	body {
	margin: 0;
	padding: 0;
	}
	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}
	#map.mode-create {
	cursor: crosshair;
	}
	#delete, #export {
	position: absolute;
	top:50px;
	right:10px;
	z-index:900;
	background:#060;
	color:#fff;
	padding:6px;
	border-radius:4px;
	font-family: 'Arial', sans-serif;
	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>
	const map = L.map('map')
	.setView([35,-120], 6);

	L.tileLayer('https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png')
	.addTo(map);

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

	const freeDraw = new FreeDraw({ mode: FreeDraw.ALL });
	map.addLayer(freeDraw);

	freeDraw.on('markers', event => {
	console.log(event);
	const polygon = freeDraw.create(event.latLngs);
	console.log(polygon);
	//featureGroup.addLayer(event.layer);
	});


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

	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>