-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmap2bulks.html
105 lines (98 loc) · 4.38 KB
/
map2bulks.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Map 2</title>
<link rel="stylesheet" href="css/leaflet.css" />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
<script src="js/leaflet.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="map"></div>
<style>
#map { height: 98vh; }
</style>
<script>
var start;
var mymap = L.map('map').setView([50, 10], 7);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'marvimoto.0hcm1gi7',
accessToken: 'pk.eyJ1IjoibWFydmltb3RvIiwiYSI6ImNpcHM1bnpnZTAwMTNodW0ycDc1cm5idDMifQ.AY9BP_AH0jplhx94YQ1ePA'
}).addTo(mymap);
var cluster = L.markerClusterGroup();
cluster.animate = true;
cluster.animateAddingMarkers = true;
mymap.addLayer(cluster);
var firstElementReady = false;
var bulksrendered = 0;
var loadstart = Date.now();
console.time('Visualisierung');
console.timeStamp('Beginn der Visualisierung');
for (var i=1; i<25;i++) {
visualize("/api/public/json/bulk/" + i);
}
function visualize(path) {
console.log(Date.now() - loadstart + "ms: Json wird geladen " + path);
var json = $.getJSON(path, function (json) {
var count = Object.keys(json).length;
start = Date.now();
var markers = [];
for (var i=0; i<count; i++) {
//Koordinaten auslesen
var data = json[i];
if (typeof data.allLocations != 'undefined'){
var coord = data.allLocations[0].split(",");
var x = coord[0];
var y = coord[1];
var eventIcon = L.Icon.extend({
options: {
iconSize: [32, 32]
}
});
switch(data.eventType[0]) {
case "Behinderungen": var thisIcon = new eventIcon({iconUrl: 'images/traffic-events/icon_traffic-event_roadblock.svg'});
break;
case "Stau": var thisIcon = new eventIcon({iconUrl: 'images/traffic-events/icon_traffic-event_trafficjam.svg'});
break;
case "Schienenersatzverkehr": var thisIcon = new eventIcon({iconUrl: 'images/traffic-events/icon_traffic-event_replacement.svg'});
break;
case "Verzoegerung": var thisIcon = new eventIcon({iconUrl: 'images/traffic-events/icon_traffic-event_delay.svg'});
break;
case "Unfall": var thisIcon = new eventIcon({iconUrl: 'images/traffic-events/icon_traffic-event_accident.svg'});
break;
default: var thisIcon = new eventIcon({iconUrl: 'images/traffic-events/icon_traffic-event_weather.svg'});
}
var marker = L.marker([x,y], {icon: thisIcon});
marker.bindPopup("<b>" + data.title + "</b><br>" + data.text + "<br>");
//Marker clustern
cluster.addLayer(marker);
}
}
//Cluster zur Map hinzufügen
if (!firstElementReady) {
console.log(Date.now() - loadstart + 'ms: Erster Satz gerendert')
firstElementReady = true;
}
console.log(Date.now() - loadstart + "ms: Json geladen " + path);
var stop = Date.now();
// alert((stop-start)/1000 + " Sekunden");
bulksrendered++;
if (bulksrendered == 24) {
console.timeEnd('Visualisierung');
}
console.timeStamp('Visualisierung abgeschlossen');
})
.fail(function(){
console.warn("Failed. Neuer Versuch");
visualize(path);
});
}
</script>
</body>
</html>