add missing result visualizing script
Clemens Klug
parent
9533554cac
commit
2170a4a3fd
|
|
@ -0,0 +1,25 @@
|
||||||
|
<script
|
||||||
|
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||||
|
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
|
||||||
|
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
|
||||||
|
crossorigin=""/>
|
||||||
|
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
|
||||||
|
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
|
||||||
|
crossorigin=""></script>
|
||||||
|
|
||||||
|
<script src="https://rawgit.com/Leaflet/Leaflet.heat/gh-pages/dist/leaflet-heat.js"></script>
|
||||||
|
|
||||||
|
<script src="my.js"></script>
|
||||||
|
<link href="style.css" rel="stylesheet"/>
|
||||||
|
<main>
|
||||||
|
<div class="mapDiv" id="mainMap"></div>
|
||||||
|
<div class="sequenceContainer">
|
||||||
|
<div class="sequence"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!--div style="font-size:0.1px;position:absolute;bottom:0;">OSM Logo: CC-BY-SA
|
||||||
|
http://wiki.openstreetmap.org/wiki/File:Mag_map-120x120.png
|
||||||
|
</div-->
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
|
|
@ -0,0 +1,105 @@
|
||||||
|
function loadData() {
|
||||||
|
console.log($(location).attr('hash').substr(1));
|
||||||
|
$.getJSON($(location).attr('hash').substr(1), function (data) {
|
||||||
|
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");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
loadData();
|
||||||
|
});
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
|
|
@ -0,0 +1,105 @@
|
||||||
|
/*.mapDiv {
|
||||||
|
width: 1024px;
|
||||||
|
height: 768px;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
/*what a nice way to highlight*/
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simu {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question {
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video {
|
||||||
|
background-color: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.other {
|
||||||
|
background-color: brown;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
background-color: violet;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
background-color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.board {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board img {
|
||||||
|
max-width: 32px;
|
||||||
|
max-height: 32px;
|
||||||
|
position: absolute;
|
||||||
|
/*bottom: 0px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.board:hover img{
|
||||||
|
max-width: 205px;
|
||||||
|
max-height: 295px;
|
||||||
|
z-index: 99;
|
||||||
|
top: 5px;
|
||||||
|
right:0px;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
overflow: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
display: inline-block;
|
||||||
|
/*max-width:100%;
|
||||||
|
margin: 0 0 1em;
|
||||||
|
white-space: nowrap;
|
||||||
|
height:200px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
padding: 2px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
height: 100%;
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapDiv {
|
||||||
|
flex-grow:1;
|
||||||
|
}
|
||||||
|
.sequenceContainer{
|
||||||
|
flex-grow: 0;
|
||||||
|
min-height:300px;
|
||||||
|
padding-right: 210px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue