diff --git a/html/script.js b/html/script.js
index ab37abb..1e33437 100644
--- a/html/script.js
+++ b/html/script.js
@@ -9,12 +9,14 @@ let tabHidden = false;
let webgl = false;
let webglFeatures = new ol.source.Vector();
let webglLayer;
-let sitePosLayer;
let OLMap = null;
let OLProj = null;
-let StaticFeatures = new ol.source.Vector();
let PlaneIconFeatures = new ol.source.Vector();
let trailGroup = new ol.Collection();
+let siteCircleLayer;
+let siteCircleFeatures = new ol.source.Vector();
+let locationDotLayer;
+let locationDotFeatures = new ol.source.Vector();
let iconLayer;
let trailLayers;
let heatFeatures = [];
@@ -935,6 +937,7 @@ function initPage() {
}
});
+ /*
new Toggle({
key: "SiteCircles",
display: "Distance Circles",
@@ -946,6 +949,7 @@ function initPage() {
initSitePos();
}
});
+ */
new Toggle({
key: "updateLocation",
@@ -1628,21 +1632,39 @@ function initMap() {
layers_group = createBaseLayers();
layers = layers_group.getLayers();
- sitePosLayer = new ol.layer.Vector({
+ siteCircleLayer = new ol.layer.Vector({
name: 'site_pos',
type: 'overlay',
- title: 'Site position and range rings',
- source: StaticFeatures,
- visible: (localStorage['sitePosLayer'] != 'false'),
+ title: 'Range rings',
+ source: siteCircleFeatures,
+ visible: (localStorage['siteCircleLayer'] == undefined ? SiteCircles : localStorage['siteCircleLayer'] == 'true'),
zIndex: 100,
renderOrder: null,
renderBuffer: renderBuffer,
});
- sitePosLayer.on('change:visible', function() {
- localStorage['sitePosLayer'] = sitePosLayer.getVisible();
+ siteCircleLayer.on('change:visible', function() {
+ localStorage['siteCircleLayer'] = siteCircleLayer.getVisible();
+ drawSiteCircle();
});
- layers.push(sitePosLayer);
+ layers.push(siteCircleLayer);
+
+ locationDotLayer = new ol.layer.Vector({
+ name: 'locationDot',
+ type: 'overlay',
+ title: (receiverJson && receiverJson.lat != null) ? 'Site position' : 'Your position',
+ source: locationDotFeatures,
+ visible: (localStorage['locationDotLayer'] == undefined ? SiteShow : localStorage['locationDotLayer'] == 'true'),
+ zIndex: 100,
+ renderOrder: null,
+ renderBuffer: renderBuffer,
+ });
+ locationDotLayer.on('change:visible', function() {
+ localStorage['locationDotLayer'] = locationDotLayer.getVisible();
+ createLocationDot();
+ });
+
+ layers.push(locationDotLayer);
const dummyLayer = new ol.layer.Vector({
@@ -3606,9 +3628,9 @@ function onDisplayUnitsChanged(e) {
// Refresh data
refreshFilter();
- // Redraw range rings
- if (SitePosition != null && SiteCircles) {
- createSiteCircleFeatures();
+ // Draw range rings
+ if (siteCircleLayer.getVisible()) {
+ drawSiteCircle();
}
// Reset map scale line units
@@ -5223,10 +5245,8 @@ function onLocationChange(position) {
SiteLat = CenterLat = DefaultCenterLat = position.coords.latitude;
SiteLon = CenterLon = DefaultCenterLon = position.coords.longitude;
- SitePosition = [SiteLon, SiteLat];
- if (sitePosLayer.getVisible()) {
- createSiteCircleFeatures();
- }
+ drawSiteCircle();
+ createLocationDot();
if (moveMap) {
OLMap.getView().setCenter(ol.proj.fromLonLat([SiteLon, SiteLat]));
@@ -5278,7 +5298,7 @@ function geoFindMe() {
if (localStorage['geoFindMeFirstVisit'] == undefined) {
OLMap.getView().setCenter(ol.proj.fromLonLat([SiteLon, SiteLat]));
localStorage['geoFindMeFirstVisit'] = 'no';
- sitePosLayer.setVisible(true);
+ siteCircleLayer.setVisible(true);
}
initSitePos();
console.log('Location from browser: '+ SiteLat +', ' + SiteLon);
@@ -5330,7 +5350,8 @@ function initSitePos() {
if (SiteLat != null && SiteLon != null) {
SitePosition = [SiteLon, SiteLat];
// Add home marker if requested
- createSiteCircleFeatures();
+ drawSiteCircle();
+ createLocationDot();
} else {
TAR.planeMan.setColumnVis('distance', false);
}
@@ -5364,31 +5385,32 @@ function remakeTrails() {
}
}
-function createSiteCircleFeatures() {
- StaticFeatures.clear();
+function createLocationDot() {
+ if (!locationDotLayer.getVisible() || !SiteShow)
+ return;
+ let markerStyle = new ol.style.Style({
+ image: new ol.style.Circle({
+ radius: 7,
+ snapToPixel: false,
+ fill: new ol.style.Fill({color: 'black'}),
+ stroke: new ol.style.Stroke({
+ color: 'white', width: 2
+ })
+ })
+ });
+
+ let feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(SitePosition)));
+ feature.setStyle(markerStyle);
+ locationDotFeatures.addFeature(feature);
+}
+function drawSiteCircle() {
+ siteCircleFeatures.clear();
// Clear existing circles first
- if (!SitePosition)
+ if (!siteCircleLayer.getVisible()) {
return;
-
- if (SiteShow) {
- let markerStyle = new ol.style.Style({
- image: new ol.style.Circle({
- radius: 7,
- snapToPixel: false,
- fill: new ol.style.Fill({color: 'black'}),
- stroke: new ol.style.Stroke({
- color: 'white', width: 2
- })
- })
- });
-
- let feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(SitePosition)));
- feature.setStyle(markerStyle);
- StaticFeatures.addFeature(feature);
}
-
- if (!SiteCircles)
+ if (!SitePosition)
return;
let circleColor = '#000000';
@@ -5424,7 +5446,7 @@ function createSiteCircleFeatures() {
});
feature.setStyle(circleStyle);
- StaticFeatures.addFeature(feature);
+ siteCircleFeatures.addFeature(feature);
}
}
@@ -6243,7 +6265,7 @@ function drawTileBorder(data) {
let tile = new ol.geom.LineString([southWest, southEast, northEast, northWest, southWest]);
let tileFeature = new ol.Feature(tile);
tileFeature.setStyle(estimateStyle);
- StaticFeatures.addFeature(tileFeature);
+ siteCircleFeatures.addFeature(tileFeature);
} else {
let west = new ol.geom.LineString([south180p, southWest, northWest, north180p]);
let east = new ol.geom.LineString([south180m, southEast, northEast, north180m]);
@@ -6251,8 +6273,8 @@ function drawTileBorder(data) {
let eastF = new ol.Feature(east);
westF.setStyle(estimateStyle);
eastF.setStyle(estimateStyle);
- StaticFeatures.addFeature(westF);
- StaticFeatures.addFeature(eastF);
+ siteCircleFeatures.addFeature(westF);
+ siteCircleFeatures.addFeature(eastF);
}
}