fly/fgdata
1
0
Fork 0
Code Activity

Phi: add layer binding to the map widget

Browse source
This commit is contained in:
Torsten Dreyer 2015-02-25 16:44:47 +01:00
parent a8ee47ddc5
commit bf4a2a2087
3 changed files with 113 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
webgui/topics/Map.html
View file

@ -1 +1,13 @@
<div data-bind="component: { name: 'map', params: { css: { width: '100%', height: '100%' }}}"></div>
<div data-bind="component: {
name: 'map',
params: {
map: {
attributionControl: true,
zoom: 11
},
css: {
width: '100%',
height: '100%'
},
overlays: overlays
}}"></div>

75
webgui/topics/Map.js
View file

@ -4,6 +4,81 @@ define([
function ViewModel(params) {
var self = this;
self.overlays = {
"VFRMap.com Sectionals (US)" : new L.TileLayer('http://vfrmap.com/20140918/tiles/vfrc/{z}/{y}/{x}.jpg', {
maxZoom : 12,
minZoom : 3,
attribution : '(c) <a href="VFRMap.com">VFRMap.com</a>',
tms : true,
opacity : 0.5,
bounds : L.latLngBounds(L.latLng(16.0, -179.0), L.latLng(72.0, -60.0)),
}),
"VFRMap.com - Low IFR (US)" : new L.TileLayer('http://vfrmap.com/20140918/tiles/ifrlc/{z}/{y}/{x}.jpg', {
maxZoom : 12,
minZoom : 5,
attribution : '© <a href="VFRMap.com">VFRMap.com</a>',
tms : true,
opacity : 0.5,
bounds : L.latLngBounds(L.latLng(16.0, -179.0), L.latLng(72.0, -60.0)),
}),
"dfs.de VFR" : new L.TileLayer(
'https://secais.dfs.de/static-maps/ICAO500-2014-DACH-Reprojected_01/tiles/{z}/{x}/{y}.png', {
minZoom : 5,
maxZoom : 15,
attribution : 'Map data © <a href="http://www.dfs.de">DFS</a>',
bounds : L.latLngBounds(L.latLng(46.0, 5.0), L.latLng(55.1, 16.5)),
}),
"Lower Airspace (Germany)" : new L.TileLayer('https://secais.dfs.de/static-maps/lower_20131114/tiles/{z}/{x}/{y}.png',
{
minZoom : 5,
maxZoom : 15,
attribution : 'Map data © <a href="http://www.dfs.de">DFS</a>',
bounds : L.latLngBounds(L.latLng(46.0, 5.0), L.latLng(55.1, 16.5)),
}),
"France VFR" : new L.TileLayer('http://carte.f-aero.fr/oaci/{z}/{x}/{y}.png', {
minZoom : 5,
maxZoom : 15,
attribution : 'Map data © <a href="http://carte.f-aero.fr/">F-AERO</a>',
bounds : L.latLngBounds(L.latLng(41.0, -5.3), L.latLng(51.2, 10.1)),
}),
"France VAC Landing" : new L.TileLayer('http://carte.f-aero.fr/vac-atterrissage/{z}/{x}/{y}.png', {
minZoom : 5,
maxZoom : 15,
attribution : 'Map data © <a href="http://carte.f-aero.fr/">F-AERO</a>',
bounds : L.latLngBounds(L.latLng(41.0, -5.3), L.latLng(51.2, 10.1)),
}),
"France VAC Approach" : new L.TileLayer('http://carte.f-aero.fr/vac-approche/{z}/{x}/{y}.png', {
minZoom : 5,
maxZoom : 15,
attribution : 'Map data © <a href="http://carte.f-aero.fr/">F-AERO</a>',
bounds : L.latLngBounds(L.latLng(41.0, -5.3), L.latLng(51.2, 10.1)),
}),
"Precipitation" : new L.TileLayer('http://{s}.tile.openweathermap.org/map/precipitation/{z}/{x}/{y}.png', {
maxZoom : 14,
minZoom : 0,
subdomains : '12',
format : 'image/png',
transparent : true,
opacity : 0.5
}),
"Isobares" : new L.TileLayer('http://{s}.tile.openweathermap.org/map/pressure_cntr/{z}/{x}/{y}.png', {
maxZoom : 7,
minZoom : 0,
subdomains : '12',
format : 'image/png',
transparent : true,
opacity : 0.5
}),
}
}
ViewModel.prototype.dispose = function() {

29
webgui/widgets/map.js
View file

@ -31,15 +31,32 @@ define(
$(self.element).css("min-height", $(self.element).width());
}
self.map = leaflet.map(self.element).setView([
53.5, 10.0
], 13);
var MapOptions = {
attributionControl: false,
};
var osmLayer = new leaflet.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
if( params && params.map ) {
for( var p in params.map ) {
MapOptions[p] = params.map[p];
}
MapOptions = params.map;
}
self.map = leaflet.map(self.element,MapOptions).setView([
53.5, 10.0
], MapOptions.zoom || 13);
var baseLayers = {
"OpenStreetMaps" : new leaflet.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom : 18,
attribution : 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
});
self.map.addLayer(osmLayer);
})
}
self.map.addLayer(baseLayers["OpenStreetMaps"]);
if( params && params.overlays ) {
L.control.layers(baseLayers, params.overlays).addTo(self.map);
}
L.RotatedMarker = L.Marker.extend({
options : {