christian/bloomhunt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

initial

Browse Source
This commit is contained in:
christian
2019-10-27 02:18:42 +01:00
commit 134a3fa598
32 changed files with 1056 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
map/templates/map/index.html
+177
View File
@@ -0,0 +1,177 @@
{% load static %}
<html>
<head>
<title>Bloommap</title>
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
<link rel="stylesheet" href="{% static 'map/index.css' %}">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<script src="{% static 'map/mapsync.js' %}"></script>
</head>
<body>
<div id="map1"></div>
<div id="map2"></div>
<div style="pointer-events: none; position: absolute; top: 30px; right: 40px; z-index: 1000">2019</div>
<div style="pointer-events: none; position: absolute; top: 310px; right: 40px; z-index: 1001">2029</div>
<div class="slidecontainer">
<input type="range" min="1" max="365" value="180" class="slider" id="myRange"
oninput="updateMap(this.value)">
</div>
<p id="p_date"></p>
<script>
var p_date = document.getElementById("p_date");
var map1 = L.map('map1').setView([49.4093524, 8.6931736], 15);
var map2 = L.map('map2').setView([49.4093524, 8.6931736], 15);
map1.sync(map2);
map2.sync(map1);
var tile = "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png "
//var layer1 = L.tileLayer(tile, {
// attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
//}).addTo(map1);
//
//var layer2 = L.tileLayer(tile, {
// attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
//}).addTo(map2);
var layer1 = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoicG9zdGZsYXYiLCJhIjoiY2syN29xZHVpMnlzcDNtbXZkN2tlYWdhaSJ9.Th5tmsyOlPKoogGrOQrMNA'
});
var layer2 = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoicG9zdGZsYXYiLCJhIjoiY2syN29xZHVpMnlzcDNtbXZkN2tlYWdhaSJ9.Th5tmsyOlPKoogGrOQrMNA'
});
layer1.addTo(map1);
layer2.addTo(map2);
function mk_not_bloom_icon(label) {
return new L.DivIcon({
className: 'no-bloom-icon',
html: '<img class="no-bloom-icon" src="{% static 'map/tree_not_blooming.png' %}"/>' +
'<span>' + label + '</span>',
iconAnchor: [15, 30]
});
}
function mk_bloom_icon(label) {
return new L.DivIcon({
className: 'bloom-icon',
html: '<img class="no-bloom-icon" src="{% static 'map/tree_blooming.png' %}"/>' +
'<span>' + label + '</span>',
iconAnchor: [15, 30]
});
}
//var not_bloom_icon = L.icon({
// iconUrl: 'tree_not_blooming.png',
//
// iconSize: [40, 40], // size of the icon
// shadowSize: [0, 0], // size of the shadow
// iconAnchor: [20, 40], // point of the icon which will correspond to marker's location
// shadowAnchor: [4, 62], // the same for the shadow
// popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
//});
//var bloom_icon = L.icon({
// iconUrl: 'tree_blooming.png',
//
// iconSize: [40, 40], // size of the icon
// shadowSize: [0, 0], // size of the shadow
// iconAnchor: [20, 40], // point of the icon which will correspond to marker's location
// shadowAnchor: [4, 62], // the same for the shadow
// popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
//});
class Tree {
constructor(name, bloom_start, xcoord, ycoord) {
this.name = name;
this.bloom_start = bloom_start;
this.marker = L.marker([xcoord, ycoord],
{icon: mk_not_bloom_icon(this.name)});
this.blooming = false;
}
update(dayno) {
if ((dayno < this.bloom_start || dayno >= this.bloom_start + 14)
&& this.blooming) {
this.marker.setIcon(mk_not_bloom_icon(this.name));
this.blooming = false;
} else if (dayno >= this.bloom_start
&& dayno < this.bloom_start + 14
&& !this.blooming) {
this.marker.setIcon(mk_bloom_icon(this.name));
this.blooming = true;
}
}
}
var treesFromJSON = {{ trees|safe }}["trees"];
var trees_1 = [];
for (var i = 0; i < treesFromJSON.length; i++) {
let raw = treesFromJSON[i];
let tree = new Tree(raw["name"], raw["bloom_start"],
raw["latitude"], raw["longitude"]);
trees_1.push(tree);
}
var trees_2 = [];
for (var i = 0; i < treesFromJSON.length; i++) {
let raw = treesFromJSON[i];
let tree = new Tree(raw["name"], raw["bloom_start"] + 20,
raw["latitude"], raw["longitude"]);
trees_2.push(tree);
}
function updateMap(value) {
for (var i = 0; i < trees_1.length; i++) {
trees_1[i].update(value);
}
for (var i = 0; i < trees_2.length; i++) {
trees_2[i].update(value);
}
p_date.innerHTML = "Date: " + dateFromDay(value);
}
function dateFromDay(dayno) {
var date = new Date(2019, 0); // initialize a date in `year-01-01`
var date2 = new Date(date.setDate(dayno));
return date2.getMonth() + 1 + "-" + date2.getDate();
}
var cities1 = L.layerGroup(trees_1.map(t => t.marker));
var cities2 = L.layerGroup(trees_2.map(t => t.marker));
cities1.addTo(map1);
cities2.addTo(map2);
</script>
</body>
</html>