-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathoutputviewer.html
59 lines (51 loc) · 2.24 KB
/
outputviewer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<title>Bendy roads</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
</head>
<body>
<label>min: <input type=number value=0 id=min></label>
<label>max: <input type=number value="1.0" id=max></label>
<label>property: <input type=text value="average" id=property></label>
<button onclick="javascript:recreate()">go</button>
<div id="map" style="width: 800px; height: 600px"></div>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="./world.geojson.js" type="text/javascript"></script>
<script src="./jquery.min.js"></script>
<script>
function recreate() {
if (typeof geoJsonLayer != "undefined") {
map.removeLayer(geoJsonLayer);
}
var min = parseFloat($("input#min")[0].value, 10);
var max = parseFloat($("input#max")[0].value, 10);
var property = $("input#property")[0].value;
geoJsonLayer = L.geoJson(boxes, {
style: function (feature) {
var value = feature.properties[property];
if ( value > max ) {
return { color: '#f00', weight: 0.5, fillOpacity: 0.5 };
} else if ( value < min ) {
return { color: '#000', weight: 0.5, fillOpacity: 0.5 };
} else {
var hexcode = (Math.floor(((value - min)/(max-min))*256)).toString(16);
return { color: '#'+hexcode+'0000', weight: 0.5, fillOpacity: 0.5 };
}
}
});
map.addLayer(geoJsonLayer);
}
$(document).ready(function() {
map = L.map('map').setView([49.4, 13.6], 4)
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
recreate();
});
</script>
</body>
</html>