icons

app/static/css/style.css

@@ -255,10 +255,14 @@ margin: 4em 0;
 }
 
 #button_group button, #button_group select{
-  background-color: black;
+  background-color: grey;
   color: white;
   font-size: 1em;
   border: 1px solid white;
   border-radius: 2em;
   padding: 0.8em;
 }
+
+#button_group img{
+  width: 1em;
+}

app/templates/home.html

@@ -5,14 +5,15 @@
 <p id="position"></p>
 <!-- <h1 class="header" id="title">GEO</h1> -->
   <div id="button_group">
-    <button id="store_location" onclick="store_location()">store my position</button>
+    <button id="store_location" onclick="store_location()"><img src="/static/img/hangout.png" alt="">add hangout</button>
-    <button id="add_text" onclick="add_text()">add message</button>
+    <button id="store_location" onclick="store_location()"><img src="/static/img/mosquito.png" alt="">add mosquito</button>
-    <button id="add_audio" onclick="add_audio()">add audio</button>
+    <button id="add_text" onclick="add_text()"><img src="/static/img/text.png" alt="">add message</button>
+    <button id="add_audio" onclick="add_audio()"><img src="/static/img/audio.png" alt=""> add audio</button>
 
     <select id="viewSelector" onchange="changeViewSelect()" >  
       <option>Choose view</option>  
-      <option value="all">all nodes</option>  
+      <option value="all">show all entries</option>  
-      <option value="closest">closest</option>  
+      <option value="closest">show closest mosquito</option>  
     </select> 
   </div>
 </div>
@@ -75,54 +76,63 @@
     locations.forEach(function (item, index) {
 
         try {
+            var icon;
             if(item.loc_type=="message"){
-              var circle = L.circle([item.latitude, item.longitude], {
+              icon = L.icon({
-              color: 'blue',
+              iconUrl: '/static/img/text.png',
-              stroke:false,
+              iconSize: [50, 50],
-              fillColor: 'blue',
+              iconAnchor: [25, 25],
-              fillOpacity: 1,
+              popupAnchor: [-3, -76],
-              radius: 10
+              });
-              }).addTo(map).on("click", e => circleClick(e));
+
-              circle.id = item.id;
-              circleArray.push(circle);
             }
             else if(item.loc_type=="audio"){
-              var circle = L.circle([item.latitude, item.longitude], {
+              icon = L.icon({
-              color: 'green',
+              iconUrl: '/static/img/audio.png',
-              stroke:false,
+              iconSize: [50, 50],
-              fillColor: 'green',
+              iconAnchor: [25, 25],
-              fillOpacity: 0.5,
+              popupAnchor: [-3, -76],
-              radius: 10
+              });
-              }).addTo(map).on("click", e => circleClick(e));
-              circle.id = item.id;
-              circleArray.push(circle);
             }
             else{
-              var circle = L.circle([item.latitude, item.longitude], {
+              icon = L.icon({
-              color: 'black',
+              iconUrl: '/static/img/mosquito.png',
-              stroke:false,
+              iconSize: [50, 50],
-              fillColor: 'black',
+              iconAnchor: [25, 25],
-              fillOpacity: 0.5,
+              popupAnchor: [-3, -76],
-              radius: 10
+              });
-              }).addTo(map).on("click", e => circleClick(e));
+              
-              circle.id = item.id;
-              circleArray.push(circle);
             }
+            var circle = L.marker([item.latitude, item.longitude], {icon: icon}).addTo(map).on("click", e => circleClick(e));
+            circle.id = item.id;
+            circleArray.push(circle);
+
             markerArray.push(L.marker([item.latitude, item.longitude]));
         } catch (error) {
-        console.error(error);
+          console.error(error);
         }
     });
     
-    var myPositionCircle = L.circle([48.172934, 9.01236], {
+    // var myPositionCircle = L.circle([48.172934, 9.01236], {
-        color: 'red',
+    //     color: 'red',
-        stroke:false,
+    //     stroke:false,
-        fillColor: 'red',
+    //     fillColor: 'red',
-        fillOpacity: 0.5,
+    //     fillOpacity: 0.5,
-        radius: 10
+    //     radius: 10
-    }).addTo(map);
+    // }).addTo(map);
+
+    var myIcon = L.icon({
+    iconUrl: '/static/img/me.png',
+    iconSize: [50, 50],
+    iconAnchor: [50, 50],
+    popupAnchor: [-3, -76],
+    });
+
+    var myPositionCircle = L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);
+
     circleArray.push(myPositionCircle);
 
+    
     var x = document.getElementById("position");
     
     let id;
@@ -151,7 +161,7 @@
     
       x.innerHTML = "Latitude: " + crd.latitude +
       "<br>Longitude: " + crd.longitude +
-      "<br>Distance to tent: " + distance(target.longitude, target.latitude, crd.longitude, crd.latitude);
+      "<br>Distance to TENT: " + distance(target.longitude, target.latitude, crd.longitude, crd.latitude);
     
       // if we want to clear the watch
       // if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
@@ -227,12 +237,12 @@
       myPositionCircle.setLatLng([my_location.latitude, my_location.longitude]);
       if(view == "all"){
         var group = new L.featureGroup(circleArray);
-        map.fitBounds(group.getBounds().pad(0.1));
+        map.fitBounds(group.getBounds().pad(0.4));
       }
       else if(view = "closest"){
         var closest = L.GeometryUtil.closestLayer(map, markerArray, myPositionCircle.getLatLng());
         var group = new L.featureGroup([closest.layer, myPositionCircle]);
-        map.fitBounds(group.getBounds().pad(0.1));
+        map.fitBounds(group.getBounds().pad(0.4));
       }
     }