Skip to content

Instantly share code, notes, and snippets.

@calvinmetcalf

calvinmetcalf/index.html

Created May 9, 2018 12:00
Show Gist options
  • Save calvinmetcalf/4cae7feb30947ca1e3f74bbbbe51ddd0 to your computer and use it in GitHub Desktop.
Save calvinmetcalf/4cae7feb30947ca1e3f74bbbbe51ddd0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment