improve map

6 anni fa · 9bf75feaf1
--- a/map/static/map/index.css
+++ b/map/static/map/index.css
@@ -1,21 +1,69 @@
 #map1 { 
    height: 43%
    height: 46%
 }

 #map2 {
    margin-top: 10px;
    height: 43%;
    margin-bottom: 7px;
    height: 46%;
    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 {
  -webkit-appearance: none;
  width: 100%;
  float: right;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  opacity: 0.9;
  -webkit-transition: .2s;
  transition: opacity .2s;
 }
--- a/map/static/map/tree_blooming_pink.png
+++ b/map/static/map/tree_blooming_pink.png
--- a/map/templates/map/index.html
+++ b/map/templates/map/index.html
@@ -18,25 +18,54 @@

 <body>

 <div id="map1"></div>
 <div id="map2"></div>
 <div id="central">

 <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 id="left">

    <div id="map1"></div>
    <div id="map2"></div>

    <div id="div19" class="yearno">2019</div>
    <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)">
    </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 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>

 const monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
 ];

 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);
 var map1 = L.map('map1', {zoomControl: false}).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);
 map2.sync(map1);
@@ -80,7 +109,7 @@ function mk_not_bloom_icon(label) {
 function mk_bloom_icon(label) {
    return new L.DivIcon({
        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>',
        iconAnchor: [15, 30]
    });
@@ -109,11 +138,13 @@ function mk_bloom_icon(label) {


 class Tree {
    constructor(name, bloom_start, xcoord, ycoord) {
    constructor(name, bloom_start, species, xcoord, ycoord) {
        this.name = name;
        this.bloom_start = bloom_start;
        this.species = species;
        this.marker = L.marker([xcoord, ycoord],
            {icon: mk_not_bloom_icon(this.name)});
        this.marker.bindPopup("<b>" + this.name + "</b><br>" + this.species);
        this.blooming = false;
    }
    update(dayno) {
@@ -136,6 +167,7 @@ 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["species"],
                        raw["latitude"], raw["longitude"]);
    trees_1.push(tree);
 }
@@ -145,6 +177,7 @@ 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["species"],
                        raw["latitude"], raw["longitude"]);
    trees_2.push(tree);
 }
@@ -162,7 +195,7 @@ function updateMap(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();
    return monthNames[date2.getMonth()] + ", " + date2.getDate();
 }

 var cities1 = L.layerGroup(trees_1.map(t => t.marker));