103 lines
4.3 KiB
JavaScript
103 lines
4.3 KiB
JavaScript
//$.getJSON("data/ff8f1e8f-6cf5-4a7b-835b-5e2226c1e771_03b9b6b4-c8ab-4182-8902-1620eebe8889.json", function (data) { //urach
|
|
//$.getJSON("data/ff8f1e8f-6cf5-4a7b-835b-5e2226c1e771_de7df5b5-edd5-4070-840f-68854ffab9aa.json", function (data) { //urach
|
|
//$.getJSON("data/90278021-4c57-464e-90b1-d603799d07eb_07da99c9-398a-424f-99fc-2701763a63e9.json", function (data) { //eichstätt
|
|
//$.getJSON("data/13241906-cdae-441a-aed0-d57ebeb37cac_d33976a6-8a56-4a63-b492-fe5427dbf377.json", function (data) { //stadtökologie
|
|
$.getJSON("data/5e64ce07-1c16-4d50-ac4e-b3117847ea43_2f664d7b-f0d8-42f5-8731-c034ef86703e.json", function (data) { //filderstadt
|
|
//$.getJSON("data/17d401a9-de21-49a2-95bc-7dafa53dda64_98edcb70-03db-4465-b185-a9c9574995ce.json", function (data) { //oeb2016
|
|
var images = {};
|
|
var tiles = {
|
|
"openstreetmap": L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxNativeZoom: 19,
|
|
maxZoom: 24,
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}),
|
|
"esri sat": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
maxNativeZoom: 19,
|
|
maxZoom: 24,
|
|
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
|
|
}),
|
|
"google sat": L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
|
|
maxNativeZoom: 20,
|
|
maxZoom: 24,
|
|
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
|
|
})
|
|
};
|
|
var map = L.map("mainMap", {layers: [tiles.openstreetmap]});
|
|
|
|
function styleTrack(feature) {
|
|
var styles = {};
|
|
styles.color = data.colors[feature.properties.activity_type];
|
|
return styles;
|
|
}
|
|
|
|
var highlighted = null;
|
|
|
|
function onClick(e) {
|
|
var start = e.target.feature.geometry.properties.start_timestamp;
|
|
var end = e.target.feature.geometry.properties.end_timestamp;
|
|
var changed = highlighted !== e.target.feature;
|
|
$.each(images, function (timestamp, board) {
|
|
if ((timestamp >= start && timestamp < end) && changed) {
|
|
board.image.first().addClass("highlight");
|
|
} else {
|
|
board.image.removeClass("highlight");
|
|
highlighted = null;
|
|
}
|
|
}
|
|
);
|
|
if (changed) {
|
|
highlighted = e.target.feature;
|
|
}
|
|
}
|
|
|
|
var coords = [];
|
|
|
|
function onEachFeature(feature, layer) {
|
|
layer.setStyle(styleTrack(feature));
|
|
layer.on('click', onClick);
|
|
if (feature.coordinates.length > 1) {
|
|
coords = coords.concat(feature.coordinates.map(function (p) {
|
|
return [p[1], p[0], 0.1];
|
|
}));
|
|
}
|
|
}
|
|
|
|
var track = L.geoJSON(data['track'], {
|
|
//style: styleTrack,
|
|
onEachFeature: onEachFeature
|
|
}).addTo(map);
|
|
|
|
map.fitBounds(track.getBounds());
|
|
|
|
var heat = L.heatLayer(coords);
|
|
L.control.layers(tiles, {"heatmap": heat}).addTo(map);
|
|
|
|
var list = $("<ul />");
|
|
var current = {
|
|
"pos":data["boards"][1].coordinate.coordinates
|
|
};
|
|
console.log(current);
|
|
var marker = L.marker([current.pos[1], current.pos[0]]).addTo(map);
|
|
$.each(data["boards"], function (index, entry) {
|
|
//console.log(index, entry);
|
|
var item = $("<li>", {class: entry.extra_data.activity_type});
|
|
var container = $("<div>", {class: "board"});
|
|
var image = $("<img>", {src: entry.image.replace("static/progress/", "")});
|
|
image.attr("data-time", entry.timestamp);
|
|
image.hover(function () {
|
|
marker.setLatLng([entry.coordinate.coordinates[1], entry.coordinate.coordinates[0]]);
|
|
}, function () {
|
|
marker.setLatLng(current.pos.coordinates[1], current.pos.coordinates[0]);
|
|
});
|
|
image.click(function (e) {
|
|
current.board = image;
|
|
current.pos = entry.coordinate;
|
|
});
|
|
images[entry.timestamp] = {image: image, coordinate: entry.coordinate};
|
|
image.appendTo(container);
|
|
container.appendTo(item);
|
|
item.appendTo(list);
|
|
});
|
|
current.board=images[data["boards"][1].timestamp];
|
|
list.appendTo(".sequence");
|
|
}); |