-
Notifications
You must be signed in to change notification settings - Fork 22
/
simpleMap.html
107 lines (104 loc) · 4.15 KB
/
simpleMap.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<title>Full Canvas</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/leaflet.css" />
<link rel="stylesheet" href="css/marker-cluster-default.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.ie.css" />
<![endif]-->
<style>
html, body, #map { height: 100%; padding: 0; margin: 0;}
</style>
<script src="lib/leaflet.js"></script>
<script src="lib/elasticsearch.js"></script>
<script src="lib/ngeohash.js"></script>
<script src="lib/leaflet-marker-cluster.js"></script>
<script src="lib/parse-1.2.13.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
map = L.map('map',{minZoom:3});
var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/{mapid}/{z}/{x}/{y}.png', {
mapid: 'cyrilcherian.cc320505'
}).addTo(map);
map.on('load', function(e){search()});
map.setView([22.295006, 78.945313], 3);
map.on('zoomend dragend',function(e){search();});
markers = L.markerClusterGroup({
chunkedLoading: true,
spiderfyOnMaxZoom: true,
showCoverageOnHover: true,
iconCreateFunction: function(cluster) {
//Grouping the cluster returned by the server, if
var markers = cluster.getAllChildMarkers();
var markerCount = 0;
markers.forEach(function(m){markerCount = markerCount + m.count;});
return new L.DivIcon({ html: '<div class=" clustergroup0 leaflet-marker-icon marker-cluster marker-cluster-medium leaflet-zoom-animated leaflet-clickable" tabindex="0" style="margin-left: -20px; margin-top: -20px; width: 40px; height: 40px; z-index: 233;"><div><span>'+markerCount+'</span></div></div>' });
}
});
map.addLayer(markers);
/* This will add all the clusters as returned by the elastic server.*/
function makePoints(aggs){
points = {};
var markerList = [];
aggs.forEach(function(agg, index){
var center = geohash.decode (agg.key);//elastic return a geohas so need to change it into lat/lon
var myIcon = L.divIcon({ html: '<div class="clustergroup0 leaflet-marker-icon marker-cluster marker-cluster-medium leaflet-zoom-animated leaflet-clickable" tabindex="0" style="margin-left: -20px; margin-top: -20px; width: 40px; height: 40px; z-index: 233;"><div><span>'+agg.doc_count+'</span></div></div>' });
var marker = L.marker(new L.LatLng(center.latitude, center.longitude),{icon:myIcon});
marker.count = agg.doc_count;
marker.sentiment = agg.sentiment_avg.value;
marker.bindPopup(''+agg.doc_count);
markerList.push(marker);
});
markers.addLayers(markerList);
}
function search(){
var b = map.getBounds();
var b1 = {
"trlat": b.getNorthWest().lat,
"trlon": b.getNorthWest().lng,
"bllat": b.getSouthEast().lat,
"bllon": b.getSouthEast().lng
}
//Get the zoom level
var zoom = 3;
if(map.getZoom() >= 5 && map.getZoom() <= 8){
zoom =4;
}
else if(map.getZoom() >= 9 && map.getZoom() <= 11){
zoom =5;
}
else if(map.getZoom() >= 12 && map.getZoom() <= 14){
zoom =6;
}
else if(map.getZoom() >= 15 && map.getZoom() <= 17){
zoom =7;
}
else if(map.getZoom() >= 18){
zoom =8;
}
//making elastic api call via parse visit https://parse.com/
var d = {
"bounds": b1,
"zoom": zoom
};
Parse.initialize("OjImjwifOD5EladE5585UAS3CJGy7ednZjucd5SE", "6CE4fybH3Cg4fiqbvxsAE8osmX6MsEIWou0Kudr9");
Parse.Cloud.run('search', d, {
success: function(resp) {
markers.clearLayers();
var r = JSON.parse(resp)
//makes the points as returned by the server.
makePoints(r.aggregations.zoom.buckets);
},
error: function(error) {
console.log(error)
}
});
}
</script>
</body>
</html>