browsermap: make follow aircraft optional
- don't follow aircraft after map pan - add a control to toggle follow aircraft
This commit is contained in:
parent
71ecbc533b
commit
db319d5285
2 changed files with 40 additions and 1 deletions
8
webgui/map/images/followAircraft.svg
Normal file
8
webgui/map/images/followAircraft.svg
Normal file
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 512 512">
|
||||
<path d="m 256.00225,133.67887 c 4.11893,0 7.55419,3.43151 7.55419,7.77922 v 45.76843 l 64.06982,35.92658 v 16.01707 l -64.06982,-18.53388 v 33.40788 l 15.10276,11.21221 v 13.2715 l -22.65957,-7.55568 -22.65283,7.55044 v -13.273 l 15.10426,-11.21222 v -33.40788 l -64.07732,18.53726 v -16.01708 l 64.07732,-35.92658 v -45.76843 c 0,-4.34771 3.42589,-7.77922 7.54819,-7.77922 z M 256,50 C 162.939,50 87.5,125.44 87.5,218.5 87.5,313 169.43,375.333 256,462 342.57,375.333 424.5,313 424.5,218.5 424.5,125.44 349.061,50 256,50 z m 0,286.958 c -68.275,0 -123.624,-55.349 -123.624,-123.624 0,-68.276 55.349,-123.624 123.624,-123.624 68.277,0 123.625,55.348 123.625,123.624 0,68.275 -55.348,123.624 -123.625,123.624 z" style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.87207282" />
|
||||
</svg>
|
After Width: | Height: | Size: 958 B |
|
@ -37,6 +37,15 @@ html,body,#map {
|
|||
margin: 0 0 5px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.followAircraft {
|
||||
background: white;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
<div id='map'></div>
|
||||
<script type="text/javascript">
|
||||
|
@ -316,6 +325,17 @@ html,body,#map {
|
|||
};
|
||||
|
||||
info.addTo(map);
|
||||
|
||||
var FollowAircraftControl = L.control();
|
||||
FollowAircraftControl.onAdd = function(map) {
|
||||
this._div = L.DomUtil.create('div', 'followAircraft');
|
||||
this._div.innerHTML = '<img src="images/followAircraft.svg" title="Center Map on Aircraft Position" />';
|
||||
this._div.onclick = function() { toggleFollowAircraft(); return true; };
|
||||
// this.update();
|
||||
return this._div;
|
||||
}
|
||||
|
||||
FollowAircraftControl.addTo(map);
|
||||
|
||||
map.on('resize', function(e) {
|
||||
navdbLayer.dirty = true;
|
||||
|
@ -328,6 +348,16 @@ html,body,#map {
|
|||
map.on('moveend', function(e) {
|
||||
navdbLayer.dirty = true;
|
||||
});
|
||||
|
||||
map.on('dragstart', function(e) {
|
||||
followAircraft = false;
|
||||
});
|
||||
|
||||
var followAircraft = true;
|
||||
function toggleFollowAircraft() {
|
||||
followAircraft = !followAircraft;
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
|
@ -343,7 +373,8 @@ html,body,#map {
|
|||
|
||||
setInterval(function() {
|
||||
var latlng = new L.LatLng(aircraftState.lat, aircraftState.lon);
|
||||
map.setView(latlng);
|
||||
if( followAircraft )
|
||||
map.setView(latlng);
|
||||
aircraftMarker.setState(aircraftState);
|
||||
}, 1000);
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue