calvinmetcalf/index.html

## index.html
<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="utf-8">
            <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
            <title>FazMaraneyRGB_transparent_mosaic_group1</title>

            <!-- Leaflet -->
            <link rel="stylesheet" href=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/leaflet.css />
            <script src=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/leaflet.js ></script>

            <!-- Leaflet.draw -->
            <link rel="stylesheet" href=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/draw/leaflet.draw.css />
			<script src=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/draw/leaflet.draw.js ></script>

			<!-- Leaflet Ajax -->
			<script src=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/ajax/dist/leaflet.ajax.js ></script>

			<!-- Leaflet Measument -->
			<link rel="stylesheet" href=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/measurement/leaflet-measure.css />
			<script src=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/measurement/leaflet-measure.js ></script>


            <style>
                body { margin:0; padding:0; }
                body, table, tr, td, th, div, h1, h2, input { font-family: "Calibri", "Trebuchet MS", "Ubuntu", Serif; font-size: 11pt; }
                #map { position:absolute; top:0; bottom:0; width:100%; } /* full size */
                .ctl {
                    padding: 2px 10px 2px 10px;
                    background: white;
                    background: rgba(255,255,255,0.9);
                    box-shadow: 0 0 15px rgba(0,0,0,0.2);
                    border-radius: 5px;
                    text-align: right;
                }
                .title {
                    font-size: 18pt;
                    font-weight: bold;
                }
                .src {
                    font-size: 10pt;
                }
				#delete, #export {
					position: absolute;
					top:100px;
					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:130px;
				}
            </style>

        </head>
        <body>

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

        <script>
        /* **** Leaflet **** */

        // Base layers
        //  .. OpenStreetMap
        var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});

        //  .. White background
        var white = L.tileLayer("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAAA1BMVEX///+nxBvIAAAAH0lEQVQYGe3BAQ0AAADCIPunfg43YAAAAAAAAAAA5wIhAAAB9aK9BAAAAABJRU5ErkJggg==");

        // Overlay layers (TMS)
        var lyr1 = L.tileLayer('./tiles/{z}/{x}/{y}.png', {tms: true, maxZoom: 22, opacity: 0.9, attribution: ""});

        // Map
        var map = L.map('map', {
			measureControl: true,
            center: [-18.3604868606589, -52.694255477616245],
            zoom: 22,
            minZoom: 0,
            maxZoom: 22,
            layers: [osm]
        });

        lyr1.addTo(map);


        function getColor(d) {
            return d > 0.65 ? '#196619' :
                d > 0.60  ? '#248f24' :
                d > 0.55  ? '#2eb82e' :
                d > 0.50  ? '#47d147' :
                d > 0.45   ? '#85e085' :
                d > 0.40   ? '#adebad' :
                d > 0.35   ? '#d6f5d6' :
                            '#cc8033';
        }
        function style(feature) {
            return {
                fillColor: getColor(feature.properties.area),
                weight: 2,
                opacity: 0.6,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7
            };
        }

        //Geojson Layers

		var VECTOR_LAYERS_COUNT = 2500;

		for (var i = 0; i < VECTOR_LAYERS_COUNT; i++) {
			var geojsonLayer = new L.GeoJSON.AJAX("fields/data_divisions/vector"+ i.toString() +".geojson", {style: style});
			geojsonLayer.addTo(map);}


        var basemaps = {"OpenStreetMap": osm, "Without background": white}
        var overlaymaps = {"Layer 1": lyr1}

        // Title
        var title = L.control();
        title.onAdd = function(map) {
	        this._div = L.DomUtil.create('div', 'ctl title');
	        this.update();
	        return this._div;
        };
        title.update = function(props) {
	        this._div.innerHTML = "FazMaraneyRGB_transparent_mosaic_group1";
        };
        title.addTo(map);

        // Note
        var src = 'Generated by Hawkit';
        var title = L.control({position: 'bottomleft'});
        title.onAdd = function(map) {
	        this._div = L.DomUtil.create('div', 'ctl src');
	        this.update();
	        return this._div;
        };
        title.update = function(props) {
	        this._div.innerHTML = src;
        };
        title.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');
        }


        // Add base layers
        L.control.layers(basemaps, overlaymaps, {collapsed: true}).addTo(map);

        // Fit to overlay bounds (SW and NE points with (lat, lon))
        map.fitBounds([[-18.36827062251916, -52.6871074784942], [-18.35270287637126, -52.7014028427423]]);

        </script>

        </body>
        </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<title>FazMaraneyRGB_transparent_mosaic_group1</title>

	<!-- Leaflet -->
	<link rel="stylesheet" href=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/leaflet.css />
	<script src=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/leaflet.js ></script>

	<!-- Leaflet.draw -->
	<link rel="stylesheet" href=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/draw/leaflet.draw.css />
	<script src=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/draw/leaflet.draw.js ></script>

	<!-- Leaflet Ajax -->
	<script src=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/ajax/dist/leaflet.ajax.js ></script>

	<!-- Leaflet Measument -->
	<link rel="stylesheet" href=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/measurement/leaflet-measure.css />
	<script src=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/measurement/leaflet-measure.js ></script>


	<style>
	body { margin:0; padding:0; }
	body, table, tr, td, th, div, h1, h2, input { font-family: "Calibri", "Trebuchet MS", "Ubuntu", Serif; font-size: 11pt; }
	#map { position:absolute; top:0; bottom:0; width:100%; } /* full size */
	.ctl {
	padding: 2px 10px 2px 10px;
	background: white;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	border-radius: 5px;
	text-align: right;
	}
	.title {
	font-size: 18pt;
	font-weight: bold;
	}
	.src {
	font-size: 10pt;
	}
	#delete, #export {
	position: absolute;
	top:100px;
	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:130px;
	}
	</style>

	</head>
	<body>

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

	<script>
	/* ** Leaflet ** */

	// Base layers
	// .. OpenStreetMap
	var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});

	// .. White background
	var white = L.tileLayer("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAAA1BMVEX///+nxBvIAAAAH0lEQVQYGe3BAQ0AAADCIPunfg43YAAAAAAAAAAA5wIhAAAB9aK9BAAAAABJRU5ErkJggg==");

	// Overlay layers (TMS)
	var lyr1 = L.tileLayer('./tiles/{z}/{x}/{y}.png', {tms: true, maxZoom: 22, opacity: 0.9, attribution: ""});

	// Map
	var map = L.map('map', {
	measureControl: true,
	center: [-18.3604868606589, -52.694255477616245],
	zoom: 22,
	minZoom: 0,
	maxZoom: 22,
	layers: [osm]
	});

	lyr1.addTo(map);


	function getColor(d) {
	return d > 0.65 ? '#196619' :
	d > 0.60 ? '#248f24' :
	d > 0.55 ? '#2eb82e' :
	d > 0.50 ? '#47d147' :
	d > 0.45 ? '#85e085' :
	d > 0.40 ? '#adebad' :
	d > 0.35 ? '#d6f5d6' :
	'#cc8033';
	}
	function style(feature) {
	return {
	fillColor: getColor(feature.properties.area),
	weight: 2,
	opacity: 0.6,
	color: 'white',
	dashArray: '3',
	fillOpacity: 0.7
	};
	}

	//Geojson Layers

	var VECTOR_LAYERS_COUNT = 2500;

	for (var i = 0; i < VECTOR_LAYERS_COUNT; i++) {
	var geojsonLayer = new L.GeoJSON.AJAX("fields/data_divisions/vector"+ i.toString() +".geojson", {style: style});
	geojsonLayer.addTo(map);}


	var basemaps = {"OpenStreetMap": osm, "Without background": white}
	var overlaymaps = {"Layer 1": lyr1}

	// Title
	var title = L.control();
	title.onAdd = function(map) {
	this._div = L.DomUtil.create('div', 'ctl title');
	this.update();
	return this._div;
	};
	title.update = function(props) {
	this._div.innerHTML = "FazMaraneyRGB_transparent_mosaic_group1";
	};
	title.addTo(map);

	// Note
	var src = 'Generated by Hawkit';
	var title = L.control({position: 'bottomleft'});
	title.onAdd = function(map) {
	this._div = L.DomUtil.create('div', 'ctl src');
	this.update();
	return this._div;
	};
	title.update = function(props) {
	this._div.innerHTML = src;
	};
	title.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');
	}


	// Add base layers
	L.control.layers(basemaps, overlaymaps, {collapsed: true}).addTo(map);

	// Fit to overlay bounds (SW and NE points with (lat, lon))
	map.fitBounds([[-18.36827062251916, -52.6871074784942], [-18.35270287637126, -52.7014028427423]]);

	</script>

	</body>
	</html>