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{ #button_group button, #button_group select{
background-color: black; background-color: grey;
color: white; color: white;
font-size: 1em; font-size: 1em;
border: 1px solid white; border: 1px solid white;
border-radius: 2em; border-radius: 2em;
padding: 0.8em; 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> <p id="position"></p>
<!-- <h1 class="header" id="title">GEO</h1> --> <!-- <h1 class="header" id="title">GEO</h1> -->
<div id="button_group"> <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()" > <select id="viewSelector" onchange="changeViewSelect()" >
<option>Choose view</option> <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> </select>
</div> </div>
</div> </div>
@ -75,54 +76,63 @@
locations.forEach(function (item, index) { locations.forEach(function (item, index) {
try { try {
var icon;
if(item.loc_type=="message"){ 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"){ 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{ 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));
}
var circle = L.marker([item.latitude, item.longitude], {icon: icon}).addTo(map).on("click", e => circleClick(e));
circle.id = item.id; circle.id = item.id;
circleArray.push(circle); circleArray.push(circle);
}
markerArray.push(L.marker([item.latitude, item.longitude])); markerArray.push(L.marker([item.latitude, item.longitude]));
} catch (error) { } 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); circleArray.push(myPositionCircle);
var x = document.getElementById("position"); var x = document.getElementById("position");
let id; let id;
@ -151,7 +161,7 @@
x.innerHTML = "Latitude: " + crd.latitude + x.innerHTML = "Latitude: " + crd.latitude +
"<br>Longitude: " + crd.longitude + "<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 we want to clear the watch
// if (target.latitude === crd.latitude && target.longitude === crd.longitude) { // if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
@ -227,12 +237,12 @@
myPositionCircle.setLatLng([my_location.latitude, my_location.longitude]); myPositionCircle.setLatLng([my_location.latitude, my_location.longitude]);
if(view == "all"){ if(view == "all"){
var group = new L.featureGroup(circleArray); var group = new L.featureGroup(circleArray);
map.fitBounds(group.getBounds().pad(0.1)); map.fitBounds(group.getBounds().pad(0.4));
} }
else if(view = "closest"){ else if(view = "closest"){
var closest = L.GeometryUtil.closestLayer(map, markerArray, myPositionCircle.getLatLng()); var closest = L.GeometryUtil.closestLayer(map, markerArray, myPositionCircle.getLatLng());
var group = new L.featureGroup([closest.layer, myPositionCircle]); 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