AFG/dump1090
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Starting to hack on OL3 support.

Browse source
This commit is contained in:
Oliver Jowett 2016-07-02 12:55:38 +01:00
parent b1acfcf26a
commit 5acecbaf6f
2 changed files with 93 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
public_html/gmap.html
View file

@ -6,7 +6,10 @@
<link rel="stylesheet" href="jquery/jquery-ui-1.11.4-smoothness.css" /> <link rel="stylesheet" href="jquery/jquery-ui-1.11.4-smoothness.css" />
<script src="jquery/jquery-3.0.0.min.js"></script> <script src="jquery/jquery-3.0.0.min.js"></script>
<script src="jquery/jquery-ui-1.11.4.min.js"></script> <script src="jquery/jquery-ui-1.11.4.min.js"></script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.16.0/build/ol-debug.js" type="text/javascript"></script>
<script type="text/javascript" src="config.js"></script> <script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="markers.js"></script> <script type="text/javascript" src="markers.js"></script>
<script type="text/javascript" src="dbloader.js"></script> <script type="text/javascript" src="dbloader.js"></script>

231
public_html/script.js
View file

@ -2,7 +2,10 @@
"use strict"; "use strict";
// Define our global variables // Define our global variables
var GoogleMap = null; var OLMap = null;
var StaticFeatures = new ol.Collection();
var PlaneIconFeatures = new ol.Collection();
var PlaneTrailFeatures = new ol.Collection();
var Planes = {}; var Planes = {};
var PlanesOrdered = []; var PlanesOrdered = [];
var SelectedPlane = null; var SelectedPlane = null;
@ -316,11 +319,11 @@ function initialize_map() {
CenterLat = Number(localStorage['CenterLat']) || DefaultCenterLat; CenterLat = Number(localStorage['CenterLat']) || DefaultCenterLat;
CenterLon = Number(localStorage['CenterLon']) || DefaultCenterLon; CenterLon = Number(localStorage['CenterLon']) || DefaultCenterLon;
ZoomLvl = Number(localStorage['ZoomLvl']) || DefaultZoomLvl; ZoomLvl = Number(localStorage['ZoomLvl']) || DefaultZoomLvl;
MapType = localStorage['MapType'] || google.maps.MapTypeId.ROADMAP; //MapType = localStorage['MapType'] || google.maps.MapTypeId.ROADMAP;
// Set SitePosition, initialize sorting // Set SitePosition, initialize sorting
if (SiteShow && (typeof SiteLat !== 'undefined') && (typeof SiteLon !== 'undefined')) { if (SiteShow && (typeof SiteLat !== 'undefined') && (typeof SiteLon !== 'undefined')) {
SitePosition = new google.maps.LatLng(SiteLat, SiteLon); SitePosition = [SiteLon, SiteLat];
sortByDistance(); sortByDistance();
} else { } else {
SitePosition = null; SitePosition = null;
@ -336,154 +339,90 @@ function initialize_map() {
document.getElementById("infoblock_country").style.display = 'none'; // hide country row document.getElementById("infoblock_country").style.display = 'none'; // hide country row
} }
// Make a list of all the available map IDs // Initialize OL3
var mapTypeIds = []; // TODO map types etc
for(var type in google.maps.MapTypeId) {
mapTypeIds.push(google.maps.MapTypeId[type]);
}
mapTypeIds.push("dark_map"); var rasterLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
for (var type in ExtraMapTypes) { var staticLayer = new ol.layer.Vector({
mapTypeIds.push(type); source: new ol.source.Vector({features: StaticFeatures})
} });
// Styled Map to outline airports and highways var trailsLayer = new ol.layer.Vector({
var styles = [ source: new ol.source.Vector({features: PlaneTrailFeatures})
{ });
"featureType": "administrative",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "on" },
{ "weight": 8 },
{ "color": "#000000" }
]
},{
"featureType": "water",
"stylers": [
{ "lightness": -74 }
]
},{
"featureType": "transit.station.airport",
"stylers": [
{ "visibility": "on" },
{ "weight": 8 },
{ "invert_lightness": true },
{ "lightness": 27 }
]
},{
"featureType": "road.highway",
"stylers": [
{ "visibility": "simplified" },
{ "invert_lightness": true },
{ "gamma": 0.3 }
]
},{
"featureType": "road",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
}
]
// Add our styled map var iconsLayer = new ol.layer.Vector({
var styledMap = new google.maps.StyledMapType(styles, {name: "Dark Map"}); source: new ol.source.Vector({features: PlaneIconFeatures})
});
// Define the Google Map OLMap = new ol.Map({
var mapOptions = { target: 'map_canvas',
center: new google.maps.LatLng(CenterLat, CenterLon), layers: [rasterLayer, staticLayer, trailsLayer, iconsLayer],
zoom: ZoomLvl, view: new ol.View({
mapTypeId: MapType, center: ol.proj.fromLonLat([CenterLon, CenterLat]),
mapTypeControl: true, zoom: ZoomLvl
streetViewControl: false, })
zoomControl: true, });
scaleControl: true,
mapTypeControlOptions: {
mapTypeIds: mapTypeIds,
position: google.maps.ControlPosition.TOP_LEFT,
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
GoogleMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
GoogleMap.mapTypes.set("dark_map", styledMap);
// Define the extra map types
for (var type in ExtraMapTypes) {
GoogleMap.mapTypes.set(type, new google.maps.ImageMapType({
getTileUrl: generic_gettile.bind(null, ExtraMapTypes[type]),
tileSize: new google.maps.Size(256, 256),
name: type,
maxZoom: 18
}));
}
// Listeners for newly created Map // Listeners for newly created Map
google.maps.event.addListener(GoogleMap, 'center_changed', function() { OLMap.getView().on('change:center', function(event) {
localStorage['CenterLat'] = GoogleMap.getCenter().lat(); var center = ol.proj.toLonLat(OLMap.getView().getCenter(), OLMap.getView().getProjection());
localStorage['CenterLon'] = GoogleMap.getCenter().lng(); localStorage['CenterLon'] = center[0]
localStorage['CenterLat'] = center[1]
if (FollowSelected) { if (FollowSelected) {
// On manual navigation, disable follow // On manual navigation, disable follow
var selected = Planes[SelectedPlane]; var selected = Planes[SelectedPlane];
if (Math.abs(GoogleMap.getCenter().lat() - selected.position.lat()) > 0.0001 && if (Math.abs(center[0] - selected.position[0]) > 0.0001 &&
Math.abs(GoogleMap.getCenter().lng() - selected.position.lng()) > 0.0001) { Math.abs(center[1] - selected.position[1]) > 0.0001) {
FollowSelected = false; FollowSelected = false;
refreshSelected(); refreshSelected();
} }
} }
}); });
google.maps.event.addListener(GoogleMap, 'zoom_changed', function() { OLMap.getView().on('change:resolution', function(event) {
localStorage['ZoomLvl'] = GoogleMap.getZoom(); localStorage['ZoomLvl'] = OLMap.getView().getZoom();
});
google.maps.event.addListener(GoogleMap, 'maptypeid_changed', function() {
localStorage['MapType'] = GoogleMap.getMapTypeId();
}); });
// Add home marker if requested // Add home marker if requested
if (SitePosition) { if (SitePosition) {
var markerImage = new google.maps.MarkerImage( console.log("setting up site position");
'//maps.google.com/mapfiles/kml/pal4/icon57.png', var markerStyle = new ol.style.Style({
new google.maps.Size(32, 32), // Image size image: new ol.style.Circle({
new google.maps.Point(0, 0), // Origin point of image radius: 7,
new google.maps.Point(16, 16)); // Position where marker should point snapToPixel: false,
var marker = new google.maps.Marker({ fill: new ol.style.Fill({color: 'black'}),
position: SitePosition, stroke: new ol.style.Stroke({
map: GoogleMap, color: 'white', width: 2
icon: markerImage, })
title: SiteName, })
zIndex: -99999 });
});
var feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(SitePosition)));
feature.setStyle(markerStyle);
StaticFeatures.push(feature);
if (SiteCircles) { if (SiteCircles) {
for (var i=0;i<SiteCirclesDistances.length;i++) { var circleStyle = new ol.style.Style({
drawCircle(marker, SiteCirclesDistances[i]); // in meters fill: null,
stroke: new ol.style.Stroke({
color: '#000000',
width: 1
})
});
for (var i=0; i < SiteCirclesDistances.length; ++i) {
var distance = SiteCirclesDistances[i] * 1000.0;
if (!Metric) {
distance *= 1.852;
}
var feature = new ol.Feature(new ol.geom.Circle(ol.proj.fromLonLat(SitePosition), distance));
feature.setStyle(circleStyle);
StaticFeatures.push(feature);
} }
} }
} }
@ -508,20 +447,28 @@ function initialize_map() {
cache: true, cache: true,
dataType: 'json' }); dataType: 'json' });
request.done(function(data) { request.done(function(data) {
for (var i = 0; i < data.rings.length; ++i) { var ringStyle = new ol.style.Style({
var points = data.rings[i].points; fill: null,
var ring = []; stroke: new ol.style.Stroke({
for (var j = 0; j < points.length; ++j) { color: '#000000',
ring.push(new google.maps.LatLng(points[j][0], points[j][1])); width: 1
} })
ring.push(ring[0]); });
new google.maps.Polyline({ for (var i = 0; i < data.rings.length; ++i) {
path: ring, var geom = new ol.geom.LineString();
strokeOpacity: 1.0, var points = data.rings[i].points;
strokeColor: '#000000', if (points.length > 0) {
strokeWeight: 1, for (var j = 0; j < points.length; ++j) {
map: GoogleMap }); geom.appendCoordinate([ points[j][1], points[j][0] ]);
}
geom.appendCoordinate([ points[0][1], points[0][0] ]);
geom.transform('EPSG:4326', 'EPSG:3857');
var feature = new ol.Feature(geom);
feature.setStyle(ringStyle);
StaticFeatures.push(feature);
}
} }
}); });