1
0
Fork 0

browser map: continue map overhaul

- re-add the navdb layer
and this time add the improved icon svgs
This commit is contained in:
Torsten Dreyer 2014-10-16 11:25:06 +02:00
parent 11d4b23e39
commit eadbb5c3e3
11 changed files with 238 additions and 16 deletions

View file

@ -20,17 +20,21 @@ L.RotatedMarker = L.Marker.extend({
initialize: function(latlng,options) {
L.Marker.prototype.initialize(latlng,options);
if( options )
L.Util.setOptions(this,options);
},
});
L.rotatedMarker = function(pos) {
return new L.RotatedMarker(pos);
L.rotatedMarker = function(pos,options) {
return new L.RotatedMarker(pos,options);
}
L.AircraftMarker = L.RotatedMarker.extend({
options : {
angle : 0,
clickable: false,
keyboard: false,
getProperties:function() {
return {};
},
@ -52,6 +56,8 @@ L.AircraftMarker = L.RotatedMarker.extend({
onAdd: function( map ) {
L.RotatedMarker.prototype.onAdd.call(this,map);
this.popup = L.popup( {
autoPan: false,
keepInView: false,
closeButton: false,
className: 'aircraft-marker-popup',
closeOnClick: false,
@ -84,6 +90,8 @@ L.AircraftMarker = L.RotatedMarker.extend({
this.popup.setContent(popup);
this.options.angle = props.heading;
// this.options.title = props.callsign + ' Heading ' + props.heading + '°';
// this.options.alt = this.options.title;
this.setLatLng( props.position );
var that = this;
this.timeoutid = setTimeout( function() { that.timeout(); }, this.options.updateInterval );

201
webgui/map/NavdbLayer.js Normal file
View file

@ -0,0 +1,201 @@
var MAP_ICON = {};
MAP_ICON["VOR"] = L.icon({
iconSize : [ 30, 30 ],
iconAnchor : [ 15, 15 ],
popupAncor : [ 0, -17 ],
iconUrl : "images/vor.svg",
});
MAP_ICON["NDB"] = L.icon({
iconSize : [ 30, 30 ],
iconAnchor : [ 15, 15 ],
popupAncor : [ 0, -17 ],
iconUrl : "images/ndb.svg",
});
MAP_ICON["dme"] = L.icon({
iconSize : [ 30, 30 ],
iconAnchor : [ 15, 15 ],
popupAncor : [ 0, -17 ],
iconUrl : "images/dme.svg",
});
MAP_ICON["airport-paved"] = L.icon({
iconSize : [ 30, 30 ],
iconAnchor : [ 15, 15 ],
popupAncor : [ 0, -17 ],
iconUrl : "images/airport-paved.svg",
});
MAP_ICON["airport-unpaved"] = L.icon({
iconSize : [ 30, 30 ],
iconAnchor : [ 15, 15 ],
popupAncor : [ 0, -17 ],
iconUrl : "images/airport-unpaved.svg",
});
MAP_ICON["airport-unknown"] = L.icon({
iconSize : [ 30, 30 ],
iconAnchor : [ 15, 15 ],
popupAncor : [ 0, -17 ],
iconUrl : "images/airport-unknown.svg",
});
MAP_ICON["arp"] = L.icon({
iconSize : [ 30, 30 ],
iconAnchor : [ 15, 15 ],
popupAncor : [ 0, -17 ],
iconUrl : "images/arp.svg",
});
MAP_ICON["aircraft"] = L.icon({
iconSize : [ 20, 20 ],
iconAnchor : [ 10, 10 ],
popupAncor : [ 0, -12 ],
iconUrl : "images/aircraft.svg",
});
L.NavdbLayer = L.GeoJSON.extend({
options: {
pointToLayer : function(feature, latlng) {
var options = {
title : feature.properties.id + ' (' + feature.properties.name + ')',
alt : feature.properties.id,
riseOnHover : true,
};
if (feature.properties.type == "airport") {
if( map.getZoom() >= 13 ) {
options.icon = MAP_ICON['arp'];
} else {
options.angle = feature.properties.longestRwyHeading_deg;
switch (feature.properties.longestRwySurface) {
case 'asphalt':
case 'concrete':
options.icon = MAP_ICON['airport-paved'];
break;
case 'unknown':
options.icon = MAP_ICON['airport-unknown'];
break;
default:
options.icon = MAP_ICON['airport-unpaved'];
break;
}
}
} else {
if (feature.properties.type in MAP_ICON) {
options.icon = MAP_ICON[feature.properties.type];
}
}
return L.rotatedMarker(latlng, options);
},
/*
onEachFeature : function(feature, layer) {
if (feature.properties) {
var popupString = '<div class="popup">';
for ( var k in feature.properties) {
var v = feature.properties[k];
popupString += k + ': ' + v + '<br />';
}
popupString += '</div>';
layer.bindPopup(popupString, {
maxHeight : 200
});
}
},
*/
filter : function(feature, layer) {
var zoom = map.getZoom();
switch (feature.properties.type) {
case 'airport':
if (zoom >= 10)
return true;
return feature.properties.longestRwyLength_m >= 2000;
break;
case 'NDB':
if (zoom >= 10)
return true;
if (zoom >= 8)
return feature.properties.range_nm >= 30;
return feature.properties.range_nm > 50;
}
return true;
},
style : function(feature) {
if (feature.properties.type == "ILS" || feature.properties.type == "localizer") {
return {
color : 'black',
weight : 1,
};
}
if (feature.properties.type == "airport") {
return {
color : 'black',
weight : 3,
fill : 'true',
fillColor : '#606060',
fillOpacity : 1.0,
lineJoin : 'bevel',
};
}
},
},
onAdd: function( map ) {
L.GeoJSON.prototype.onAdd.call(this,map);
this.dirty = true;
this.update();
},
onRemove: function( map ) {
L.GeoJSON.prototype.onRemove.call(this,map);
if( this.timeoutid != null )
clearTimeout( this.timeoutid );
},
invalidate: function() {
this.dirty = true;
},
dirty: true,
timeoutid: null,
update: function() {
if (this.dirty) {
this.dirty = false;
var bounds = this._map.getBounds();
var radius = bounds.getSouthWest().distanceTo(bounds.getNorthEast()) / 3704; // radius in NM
if (radius > 250)
radius = 250;
if (radius < 10)
radius = 10;
var filter = "vor,ndb,airport";
if (radius < 60)
filter += ",ils,dme,loc,om";
if (radius < 20)
filter += ",mm";
var center = this._map.getCenter();
var lat = center.lat;
var lon = center.lng;
var url = "/navdb?q=findWithinRange&type=" + filter + "&range=" + radius + "&lat=" + lat + "&lon=" + lon;
var that = this;
var jqxhr = $.get(url).done(function(data) {
that.clearLayers();
that.addData(data);
}).fail(function() {
alert('failed to load navdb data');
}).always(function() {
});
}
var that = this;
timeoutid = setTimeout(function() { that.update() }, 5000);
},
});
L.navdbLayer = function(options) {
return new L.NavdbLayer(null,options);
}

View file

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="500" width="500">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<path d="M250.2,59.002c11.001,0,20.176,9.165,20.176,20.777v122.24l171.12,95.954v42.779l-171.12-49.501v89.227l40.337,29.946v35.446l-60.52-20.18-60.502,20.166v-35.45l40.341-29.946v-89.227l-171.14,49.51v-42.779l171.14-95.954v-122.24c0-11.612,9.15-20.777,20.16-20.777z" fill="deeppink" stroke="black" stroke-width="5"/>
</svg>

Before

Width:  |  Height:  |  Size: 428 B

After

Width:  |  Height:  |  Size: 488 B

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
<circle cx="50" cy="50" r="49" fill="mediumblue" />
<rect x="40" y="20" width="20" height="60" fill="white" />
</svg>

Before

Width:  |  Height:  |  Size: 224 B

After

Width:  |  Height:  |  Size: 284 B

View file

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
<circle cx="50" cy="50" r="49" fill="mediumblue" />
</svg>

Before

Width:  |  Height:  |  Size: 165 B

After

Width:  |  Height:  |  Size: 225 B

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
<circle cx="50" cy="50" r="49" fill="mediumblue" />
<rect x="40" y="20" width="20" height="60" fill="#228822" />
</svg>

Before

Width:  |  Height:  |  Size: 226 B

After

Width:  |  Height:  |  Size: 286 B

View file

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
<rect x="1" y="1" width="98" height="98" fill="none" stroke="mediumblue" stroke-width="3" />
</svg>

Before

Width:  |  Height:  |  Size: 206 B

After

Width:  |  Height:  |  Size: 266 B

View file

@ -1,8 +1,4 @@
<?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 xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512" preserveAspectRatio="xMinYMin meet">
<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;stroke:#000000;stroke-width:1.87207282" />
</svg>

Before

Width:  |  Height:  |  Size: 958 B

After

Width:  |  Height:  |  Size: 962 B

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
<circle cx="50" cy="50" r="7" stroke="mediumblue" stroke-width="6" fill="white" fill-opacity="0" />
<circle cx="50.0" cy="65.0" r="3" fill="mediumblue"/>

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
<path fill="none" stroke="mediumblue" stroke-width="3" d="M25,1 L75,1 L99,25 L99,75 L75,99 L25,99 L1,75 L 1,25 z" />
<circle cx="50" cy="50" r="7" fill="mediumblue"/>
</svg>

Before

Width:  |  Height:  |  Size: 280 B

After

Width:  |  Height:  |  Size: 340 B

View file

@ -19,6 +19,7 @@
<script src="../lib/fgfs.js" type="text/javascript"></script>
<script src="FollowControl.js" type="text/javascript"></script>
<script src="Marker.js" type="text/javascript"></script>
<script src="NavdbLayer.js" type="text/javascript"></script>
<title>FlightGear - Map</title>
</head>
@ -91,7 +92,7 @@ html,body {
var propertyMirror = new FGFS.PropertyMirror([
[ "latitude", "/position/latitude-deg" ],
[ "longitude", "/position/longitude-deg" ],
[ "altitude", "/position/altitude-deg" ],
[ "altitude", "/position/altitude-ft" ],
[ "heading", "/orientation/heading-deg" ],
[ "groundspeed", "/velocities/groundspeed-kt" ],
[ "model", "/sim/model/path" ],
@ -114,6 +115,20 @@ html,body {
attributionControl: true,
});
var navdbLayer = L.navdbLayer();
map.on('resize', function(e) {
navdbLayer.invalidate();
});
map.on('zoomend', function(e) {
navdbLayer.invalidate();
});
map.on('moveend', function(e) {
navdbLayer.invalidate();
});
L.control.layers({
"OpenStreetMaps" : osmLayer,
"MapQuest Satelite" : new L.TileLayer(
@ -176,6 +191,8 @@ html,body {
bounds: L.latLngBounds(L.latLng(46.0,5.0), L.latLng(55.1,16.5) ),
}),
"NavDB" : navdbLayer,
"Precipitation" : new L.TileLayer(
'http://{s}.tile.openweathermap.org/map/precipitation/{z}/{x}/{y}.png',
{