geo
Alexander Roidl 2 years ago
parent e139768dc3
commit d00b9d86e5

BIN
.DS_Store vendored

Binary file not shown.

BIN
app/.DS_Store vendored

Binary file not shown.

BIN
app/static/.DS_Store vendored

Binary file not shown.

@ -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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

@ -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="add_text" onclick="add_text()">add message</button>
<button id="add_audio" onclick="add_audio()">add audio</button>
<button id="store_location" onclick="store_location()"><img src="/static/img/hangout.png" alt="">add hangout</button>
<button id="store_location" onclick="store_location()"><img src="/static/img/mosquito.png" alt="">add mosquito</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="closest">closest</option>
<option value="all">show all entries</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], {
color: 'blue',
stroke:false,
fillColor: 'blue',
fillOpacity: 1,
radius: 10
}).addTo(map).on("click", e => circleClick(e));
circle.id = item.id;
circleArray.push(circle);
icon = L.icon({
iconUrl: '/static/img/text.png',
iconSize: [50, 50],
iconAnchor: [25, 25],
popupAnchor: [-3, -76],
});
}
else if(item.loc_type=="audio"){
var circle = L.circle([item.latitude, item.longitude], {
color: 'green',
stroke:false,
fillColor: 'green',
fillOpacity: 0.5,
radius: 10
}).addTo(map).on("click", e => circleClick(e));
circle.id = item.id;
circleArray.push(circle);
icon = L.icon({
iconUrl: '/static/img/audio.png',
iconSize: [50, 50],
iconAnchor: [25, 25],
popupAnchor: [-3, -76],
});
}
else{
var circle = L.circle([item.latitude, item.longitude], {
color: 'black',
stroke:false,
fillColor: 'black',
fillOpacity: 0.5,
radius: 10
}).addTo(map).on("click", e => circleClick(e));
circle.id = item.id;
circleArray.push(circle);
icon = L.icon({
iconUrl: '/static/img/mosquito.png',
iconSize: [50, 50],
iconAnchor: [25, 25],
popupAnchor: [-3, -76],
});
}
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], {
color: 'red',
stroke:false,
fillColor: 'red',
fillOpacity: 0.5,
radius: 10
}).addTo(map);
// var myPositionCircle = L.circle([48.172934, 9.01236], {
// color: 'red',
// stroke:false,
// fillColor: 'red',
// fillOpacity: 0.5,
// radius: 10
// }).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));
}
}

Loading…
Cancel
Save