-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgeojs.html
executable file
·82 lines (66 loc) · 2.85 KB
/
geojs.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html>
<head>
<title>Protei_Rpi</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<link rel="stylesheet" href="MarkerCluster.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="leaflet.markercluster.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([22.28814,114.12705], 11);
// load a tile layer
/* L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
maxZoom: 17,
minZoom: 9
}).addTo(map);*/
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
minZoom: 9,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
$.getJSON("neighborhoods.geojson",function(hoodData){
L.geoJson( hoodData, {
style: function(feature){
var fillColor,
density = feature.properties.Temperature;
if ( density > 30 ) fillColor = "#e41a1c";
else if ( density > 20 ) fillColor = "#fdae61";
else if ( density > 10 ) fillColor = "#ffffbf";
else if ( density > 5 ) fillColor = "#2b83ba";
else if ( density > 0 ) fillColor = "#ffffcc";
else fillColor = "#f7f7f7"; // no data
return { color: "#999", weight: 1, fillColor: fillColor, fillOpacity: .6 };
},
onEachFeature: function( feature, layer ){
layer.bindPopup( "<strong>" + feature.geometry.coordinates[0][0] + "<br/>" + feature.geometry.coordinates[0][1] + "<br/>"+ feature.geometry.coordinates[0][2] + "</strong><br/>" + "Average Temperature: " + feature.properties.Temperature + "<br/>" + "Average Humidity: " + feature.properties.Humidity + "<br/>"+ "Average Pressure: " + feature.properties.Pressure)
}
}).addTo(map);
});
/*map.on('click', function(e) {
alert(e.latlng);});*/
// load GeoJSON from an external file
$.getJSON("protei.geojson",function(data){
// add GeoJSON layer to the map once the file is loaded
var boats = L.geoJson(data,{
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng);
marker.bindPopup('ID: '+ feature.properties.Device + '<br/>' +'Time: '+feature.properties.Time+'<br/>'+'Temperature: '+feature.properties.Temperature + '<br/>' + 'Pressure: '+ feature.properties.Pressure + '<br/>' + 'Humidity: '+ feature.properties.Humidity + '<br/>' +'Location: '+feature.geometry.coordinates + '<br/>' + 'Magnetometer: '+ feature.properties.Magnetometer);
return marker;
}
});
var clusters = L.markerClusterGroup();
clusters.addLayer(boats);
map.addLayer(clusters);
});
</script>
</body>
</html>