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

improve map

Browse Source
This commit is contained in:
christian
2019-10-27 07:59:25 +01:00
parent 10ec5fbbf5
commit 9bf75feaf1
3 changed files with 98 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
map/static/map/index.css
+52 -4
View File
@@ -1,21 +1,69 @@
#map1 { #map1 {
height: 43% height: 46%
} }
#map2 { #map2 {
margin-top: 10px; margin-top: 10px;
height: 43%; height: 46%;
margin-bottom: 7px; margin-bottom: 10px;
}
#p_date {
position: absolute;
bottom: 20px;
}
#logo_side {
width: 60%;
margin-left: 20%;
margin-top: 10%;
}
#central {
margin:0 auto;
}
#left {
width: 75%;
float: left;
}
#right {
width: 24%;
float: right;
}
div.yearno {
pointer-events: none;
position: absolute;
z-index: 1000;
font-size: 19pt;
background-color: white;
border-radius: 5px;
padding: 5px;
color: 333333;
border: 2px solid rgba(0, 0, 0, 0.3);
}
#div19 {
top: 30px;
left: 30px;
}
#div29 {
top: 330px;
left: 30px;
} }
.slider { .slider {
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
float: right;
height: 15px; height: 15px;
border-radius: 5px; border-radius: 5px;
background: #d3d3d3; background: #d3d3d3;
outline: none; outline: none;
opacity: 0.7; opacity: 0.9;
-webkit-transition: .2s; -webkit-transition: .2s;
transition: opacity .2s; transition: opacity .2s;
} }
map/static/map/tree_blooming_pink.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

map/templates/map/index.html
+45 -12
View File
@@ -18,25 +18,54 @@
<body> <body>
<div id="map1"></div> <div id="central">
<div id="map2"></div>
<div style="pointer-events: none; position: absolute; top: 30px; right: 40px; z-index: 1000">2019</div> <div id="left">
<div style="pointer-events: none; position: absolute; top: 310px; right: 40px; z-index: 1001">2029</div>
<div id="map1"></div>
<div id="map2"></div>
<div class="slidecontainer"> <div id="div19" class="yearno">2019</div>
<input type="range" min="1" max="365" value="180" class="slider" id="myRange" <div id="div29" class="yearno">2029</div>
<div class="slidecontainer">
<input type="range" min="1" max="365" value="180" class="slider" id="myRange"
oninput="updateMap(this.value)"> oninput="updateMap(this.value)">
</div>
</div>
<div id="right">
<img id="logo_side" src="{% static 'favicon.ico' %}"/>
<center>
<p><b>Watch how the bloom periods change over time.</b></p>
<p>You want to win awesome awards?</p>
<p>Take part in a global movement
monitoring effects of climate change.</p>
</center>
<center>
<p id="p_date" ></p>
</center>
</div>
</div> </div>
<p id="p_date"></p>
<script> <script>
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
var p_date = document.getElementById("p_date"); var p_date = document.getElementById("p_date");
var map1 = L.map('map1').setView([49.4093524, 8.6931736], 15); var map1 = L.map('map1', {zoomControl: false}).setView([49.4093524, 8.6931736], 15);
var map2 = L.map('map2').setView([49.4093524, 8.6931736], 15); L.control.zoom({
position:'topright'
}).addTo(map1);
var map2 = L.map('map2', {zoomControl: false}).setView([49.4093524, 8.6931736], 15);
L.control.zoom({
position:'topright'
}).addTo(map2);
map1.sync(map2); map1.sync(map2);
map2.sync(map1); map2.sync(map1);
@@ -80,7 +109,7 @@ function mk_not_bloom_icon(label) {
function mk_bloom_icon(label) { function mk_bloom_icon(label) {
return new L.DivIcon({ return new L.DivIcon({
className: 'bloom-icon', className: 'bloom-icon',
html: '<img class="no-bloom-icon" src="{% static 'map/tree_blooming.png' %}"/>' + html: '<img class="no-bloom-icon" src="{% static 'map/tree_blooming_pink.png' %}"/>' +
'<span>' + label + '</span>', '<span>' + label + '</span>',
iconAnchor: [15, 30] iconAnchor: [15, 30]
}); });
@@ -109,11 +138,13 @@ function mk_bloom_icon(label) {
class Tree { class Tree {
constructor(name, bloom_start, xcoord, ycoord) { constructor(name, bloom_start, species, xcoord, ycoord) {
this.name = name; this.name = name;
this.bloom_start = bloom_start; this.bloom_start = bloom_start;
this.species = species;
this.marker = L.marker([xcoord, ycoord], this.marker = L.marker([xcoord, ycoord],
{icon: mk_not_bloom_icon(this.name)}); {icon: mk_not_bloom_icon(this.name)});
this.marker.bindPopup("<b>" + this.name + "</b><br>" + this.species);
this.blooming = false; this.blooming = false;
} }
update(dayno) { update(dayno) {
@@ -136,6 +167,7 @@ var trees_1 = [];
for (var i = 0; i < treesFromJSON.length; i++) { for (var i = 0; i < treesFromJSON.length; i++) {
let raw = treesFromJSON[i]; let raw = treesFromJSON[i];
let tree = new Tree(raw["name"], raw["bloom_start"], let tree = new Tree(raw["name"], raw["bloom_start"],
raw["species"],
raw["latitude"], raw["longitude"]); raw["latitude"], raw["longitude"]);
trees_1.push(tree); trees_1.push(tree);
} }
@@ -145,6 +177,7 @@ var trees_2 = [];
for (var i = 0; i < treesFromJSON.length; i++) { for (var i = 0; i < treesFromJSON.length; i++) {
let raw = treesFromJSON[i]; let raw = treesFromJSON[i];
let tree = new Tree(raw["name"], raw["bloom_start"] - 20, let tree = new Tree(raw["name"], raw["bloom_start"] - 20,
raw["species"],
raw["latitude"], raw["longitude"]); raw["latitude"], raw["longitude"]);
trees_2.push(tree); trees_2.push(tree);
} }
@@ -162,7 +195,7 @@ function updateMap(value) {
function dateFromDay(dayno) { function dateFromDay(dayno) {
var date = new Date(2019, 0); // initialize a date in `year-01-01` var date = new Date(2019, 0); // initialize a date in `year-01-01`
var date2 = new Date(date.setDate(dayno)); var date2 = new Date(date.setDate(dayno));
return date2.getMonth() + 1 + "-" + date2.getDate(); return monthNames[date2.getMonth()] + ", " + date2.getDate();
} }
var cities1 = L.layerGroup(trees_1.map(t => t.marker)); var cities1 = L.layerGroup(trees_1.map(t => t.marker));