Remove openlayers 2 map api support

config.default.php

@@ -22,8 +22,7 @@
 
 // default map drawing framework
 //$mapapi = "gmaps"; // google maps
-//$mapapi = "openlayers"; // openlayers 2
+$mapapi = "openlayers"; // openlayers
-$mapapi = "openlayers3"; // openlayers 3+
 
 // openlayers additional map layers in XYZ format
 // name => url

index.php

@@ -153,8 +153,7 @@
           <form>
             <select name="api" onchange="loadMapAPI(this.options[this.selectedIndex].value);">
               <option value="gmaps"<?= (uConfig::$mapapi == "gmaps") ? " selected" : "" ?>>Google Maps</option>
-              <option value="openlayers"<?= (uConfig::$mapapi == "openlayers") ? " selected" : "" ?>>OpenLayers 2</option>
+              <option value="openlayers"<?= (uConfig::$mapapi == "openlayers") ? " selected" : "" ?>>OpenLayers</option>
-              <option value="openlayers3"<?= (uConfig::$mapapi == "openlayers3") ? " selected" : "" ?>>OpenLayers 3+</option>
             </select>
           </form>
         </div>

js/api_openlayers.js

@@ -16,60 +16,277 @@
  * along with this program; if not, see <http://www.gnu.org/licenses/>.
  */
 
-// openlayers
+// openlayers 3+
 var map;
 var layerTrack;
 var layerMarkers;
-var wgs84;
+var selectedLayer;
-var mercator;
+var olStyles;
 var loadedAPI = 'openlayers';
 
 function init() {
-  wgs84 = new OpenLayers.Projection('EPSG:4326');   // from WGS 1984
+
-  mercator = new OpenLayers.Projection('EPSG:900913'); // to Mercator
+  addCss('css/ol.css', 'ol_css');
-  var options = {
+
-    controls: [
+  var controls = [
-      new OpenLayers.Control.ArgParser(), // default
+    new ol.control.Zoom(),
-      new OpenLayers.Control.Attribution(), // default
+    new ol.control.Rotate(),
-      new OpenLayers.Control.LayerSwitcher(),
+    new ol.control.ScaleLine(),
-      new OpenLayers.Control.Navigation(), // default
+    new ol.control.ZoomToExtent({ label: getExtentImg() }),
-      new OpenLayers.Control.PanZoomBar(),// do we need it?
+  ];
-      new OpenLayers.Control.ScaleLine()
+
-    ]
+  var view = new ol.View({
-  };
+    center: ol.proj.fromLonLat([init_longitude, init_latitude]),
-  map = new OpenLayers.Map('map-canvas', options);
+    zoom: 8
+  });
+
+  map = new ol.Map({
+    target: 'map-canvas',
+    controls: controls,
+    view: view
+  });
+
   // default layer: OpenStreetMap
-  var osm = new OpenLayers.Layer.OSM();
+  var osm = new ol.layer.Tile({
+    name: 'OpenStreetMap',
+    visible: true,
+    source: new ol.source.OSM()
+  });
   map.addLayer(osm);
+  selectedLayer = osm;
 
   // add extra layers
   for (var layerName in ol_layers) {
     if (ol_layers.hasOwnProperty(layerName)) {
       var layerUrl = ol_layers[layerName];
-      var ol_layer = new OpenLayers.Layer.OSM(
+      var ol_layer = new ol.layer.Tile({
-        layerName,
+        name: layerName,
-        urlFromOL3(layerUrl),
+        visible: false,
-        { tileOptions: { crossOriginKeyword: null } }
+        source: new ol.source.XYZ({
-      );
+          url: layerUrl
+        })
+      });
       map.addLayer(ol_layer);
     }
   }
 
-  var position = new OpenLayers.LonLat(init_longitude, init_latitude).transform(wgs84, mercator);
-  var zoom = 8;
-  map.setCenter(position, zoom);
-
   // init layers
-  layerTrack = new OpenLayers.Layer.Vector('Track');
+  var lineStyle = new ol.style.Style({
-  layerMarkers = new OpenLayers.Layer.Markers('Markers');
+    stroke: new ol.style.Stroke({
+      color: hexToRGBA(strokeColor, strokeOpacity),
+      width: strokeWeight
+    })
+  });
+  layerTrack = new ol.layer.Vector({
+    name: 'Track',
+    type: 'data',
+    source: new ol.source.Vector(),
+    style: lineStyle
+  });
+  layerMarkers = new ol.layer.Vector({
+    name: 'Markers',
+    type: 'data',
+    source: new ol.source.Vector()
+  });
+  map.addLayer(layerTrack);
+  map.addLayer(layerMarkers);
+
+  // styles
+  olStyles = {};
+  var iconRed = new ol.style.Icon({
+    anchor: [ 0.5, 1 ],
+    src: 'images/marker-red.png'
+  });
+  var iconGreen = new ol.style.Icon({
+    anchor: [ 0.5, 1 ],
+    src: 'images/marker-green.png'
+  });
+  var iconWhite = new ol.style.Icon({
+    anchor: [ 0.5, 1 ],
+    opacity: 0.7,
+    src: 'images/marker-white.png'
+  });
+  var iconGold = new ol.style.Icon({
+    anchor: [ 0.5, 1 ],
+    src: 'images/marker-gold.png'
+  });
+  olStyles['red'] = new ol.style.Style({
+    image: iconRed
+  });
+  olStyles['green'] = new ol.style.Style({
+    image: iconGreen
+  });
+  olStyles['white'] = new ol.style.Style({
+    image: iconWhite
+  });
+  olStyles['gold'] = new ol.style.Style({
+    image: iconGold
+  });
+
+  // popups
+  var popupContainer = document.createElement('div');
+  popupContainer.id = 'popup';
+  popupContainer.className = 'ol-popup';
+  document.getElementsByTagName('body')[0].appendChild(popupContainer);
+  var popupCloser = document.createElement('a');
+  popupCloser.id = 'popup-closer';
+  popupCloser.className = 'ol-popup-closer';
+  popupCloser.href = '#';
+  popupContainer.appendChild(popupCloser);
+  var popupContent = document.createElement('div');
+  popupContent.id = 'popup-content';
+  popupContainer.appendChild(popupContent);
+
+  var popup = new ol.Overlay({
+    element: popupContainer,
+    autoPan: true,
+    autoPanAnimation: {
+      duration: 250
+    }
+  });
+
+  popupCloser.onclick = function() {
+    popup.setPosition(undefined);
+    popupCloser.blur();
+    return false;
+  };
+
+  // add click handler to map to show popup
+  map.on('click', function(e) {
+    var coordinate = e.coordinate;
+    var feature = map.forEachFeatureAtPixel(e.pixel,
+      function(feature, layer) {
+        if (layer.get('name') == 'Markers') {
+          return feature;
+        }
+      });
+    if (feature) {
+      var p = feature.get('p');
+      var i = feature.getId();
+      var posLen = feature.get('posLen');
+      // popup show
+      popup.setPosition(coordinate);
+      popupContent.innerHTML = getPopupHtml(p, i, posLen);
+      map.addOverlay(popup);
+      if (document.getElementById('bottom').style.display == 'block') {
+        var index = 0;
+        for (var key in altitudes) {
+          if (altitudes.hasOwnProperty(key) && key == i) {
+            chart.setSelection([{ row: index, column: null }]);
+            break;
+          }
+          index++;
+        }
+      }
+    } else {
+      // popup destroy
+      popup.setPosition(undefined);
+    }
+  });
+
+  // change mouse cursor when over marker
+  map.on("pointermove", function(e) {
+    var hit = map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
+      if (layer.get('name') == 'Markers') {
+        return true;
+      } else {
+        return false;
+      }
+    });
+    if (hit) {
+      this.getTargetElement().style.cursor = 'pointer';
+    } else {
+      this.getTargetElement().style.cursor = '';
+    }
+  });
+
+  // layer switcher
+  var switcher = document.createElement('div');
+  switcher.id = 'switcher';
+  switcher.className = 'ol-control';
+  document.getElementsByTagName('body')[0].appendChild(switcher);
+  var switcherContent = document.createElement('div');
+  switcherContent.id = 'switcher-content';
+  switcherContent.className = 'ol-layerswitcher';
+  switcher.appendChild(switcherContent);
+
+  map.getLayers().forEach(function (layer) {
+    var layerLabel = document.createElement('label');
+    layerLabel.innerHTML = layer.get('name');
+    switcherContent.appendChild(layerLabel);
+
+    var layerRadio = document.createElement('input');
+    if (layer.get('type') === 'data') {
+      layerRadio.type = 'checkbox';
+      layerLabel.className = 'ol-datalayer';
+    } else {
+      layerRadio.type = 'radio';
+    }
+    layerRadio.name = 'layer';
+    layerRadio.value = layer.get('name');
+    layerRadio.onclick = switchLayer;
+    if (layer.getVisible()) {
+      layerRadio.checked = true;
+    }
+    layerLabel.insertBefore(layerRadio, layerLabel.childNodes[0]);
+  });
+
+  function switchLayer() {
+    var layerName = this.value;
+    map.getLayers().forEach(function (layer) {
+      if (layer.get('name') === layerName) {
+        if (layer.get('type') === 'data') {
+          if (layer.getVisible()) {
+            layer.setVisible(false);
+          } else {
+            layer.setVisible(true);
+          }
+        } else {
+          selectedLayer.setVisible(false);
+          selectedLayer = layer;
+          layer.setVisible(true);
+        }
+        return;
+      }
+    });
+  };
+
+  var switcherButton = document.createElement('button');
+  var layerImg = document.createElement('img');
+  layerImg.src = 'images/layers.svg';
+  layerImg.style.width = '60%';
+  switcherButton.appendChild(layerImg);
+
+  var switcherHandle = function() {
+    var el = document.getElementById('switcher');
+    if (el.style.display === 'block') {
+      el.style.display = 'none';
+    } else {
+      el.style.display = 'block';
+    }
+  };
+
+  switcherButton.addEventListener('click', switcherHandle, false);
+  switcherButton.addEventListener('touchstart', switcherHandle, false);
+
+  var element = document.createElement('div');
+  element.className = 'ol-switcher-button ol-unselectable ol-control';
+  element.appendChild(switcherButton);
+
+  var switcherControl = new ol.control.Control({
+      element: element
+  });
+  map.addControl(switcherControl);
 }
 
 function cleanup() {
   map = undefined;
   layerTrack = undefined;
   layerMarkers = undefined;
-  wgs84 = undefined;
+  selectedLayer = undefined;
-  mercator = undefined;
+  olStyles = undefined;
+  removeElementById('popup');
+  removeElementById('switcher');
   document.getElementById("map-canvas").innerHTML = '';
 }
 
@@ -78,7 +295,6 @@ function displayTrack(xml, update) {
   var totalMeters = 0;
   var totalSeconds = 0;
   var points = [];
-  var latlngbounds = new OpenLayers.Bounds();
   var positions = xml.getElementsByTagName('position');
   var posLen = positions.length;
   for (var i = 0; i < posLen; i++) {
@@ -90,24 +306,40 @@ function displayTrack(xml, update) {
     // set marker
     setMarker(p, i, posLen);
     // update polyline
-    var point = new OpenLayers.Geometry.Point(p.longitude, p.latitude).transform(wgs84, mercator);
+    var point = ol.proj.fromLonLat([p.longitude, p.latitude]);
-    latlngbounds.extend(point);
     points.push(point);
   }
-  var lineString = new OpenLayers.Geometry.LineString(points);
+  var lineString = new ol.geom.LineString(points);
-  var lineStyle = { strokeColor: strokeColor, strokeOpacity: strokeOpacity, strokeWidth: strokeWeight };
+
-  var lineFeature = new OpenLayers.Feature.Vector(lineString, null, lineStyle);
+  var lineFeature = new ol.Feature({
-  layerTrack.addFeatures([lineFeature]);
+    geometry: lineString,
-  map.addLayer(layerTrack);
+  });
-  map.addLayer(layerMarkers);
+
+  layerTrack.getSource().addFeature(lineFeature);
+
+  var extent = layerTrack.getSource().getExtent();
+
+  map.getControls().forEach(function (el) {
+    if (el instanceof ol.control.ZoomToExtent) {
+      map.removeControl(el);
+    }
+  });
+
   if (update) {
-    map.zoomToExtent(latlngbounds);
+    map.getView().fit(extent);
-    if (i == 1) {
+    var zoom = map.getView().getZoom();
-      // only one point, zoom out
+    if (zoom > 20) {
-      map.zoomOut();
+      map.getView().setZoom(20);
+      extent = map.getView().calculateExtent(map.getSize());
     }
   }
 
+  var zoomToExtentControl = new ol.control.ZoomToExtent({
+    extent: extent,
+    label: getExtentImg()
+  });
+  map.addControl(zoomToExtentControl);
+
   updateSummary(p.timestamp, totalMeters, totalSeconds);
   if (p.tid != trackid) {
     trackid = p.tid;
@@ -122,53 +354,33 @@ function displayTrack(xml, update) {
 
 function clearMap() {
   if (layerTrack) {
-    layerTrack.removeAllFeatures();
+    layerTrack.getSource().clear();
   }
   if (layerMarkers) {
-    layerMarkers.clearMarkers();
+    layerMarkers.getSource().clear();
   }
 }
 
 function setMarker(p, i, posLen) {
   // marker
-  var lonLat = new OpenLayers.LonLat(p.longitude, p.latitude).transform(wgs84, mercator);
+  var marker = new ol.Feature({
-  var size = new OpenLayers.Size(16, 25);
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([p.longitude, p.latitude]))
-  var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
+  });
-  if (latest == 1) { var icon = new OpenLayers.Icon('images/marker-red.png', size, offset); }
-  else if (i == 0) { var icon = new OpenLayers.Icon('images/marker-green.png', size, offset); }
-  else if (i == posLen - 1) { var icon = new OpenLayers.Icon('images/marker-red.png', size, offset); }
-  else {
-    offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
-    var icon = new OpenLayers.Icon('images/marker-white.png', size, offset);
-  }
-  var marker = new OpenLayers.Marker(lonLat, icon);
-  layerMarkers.addMarker(marker);
 
-  // popup
+  if (latest == 1) {
-  var content = getPopupHtml(p, i, posLen);
+    var iconStyle = olStyles['red'];
-  marker.events.register("mousedown", marker, (function () {
+  } else if (i == 0) {
-    return function () {
+    var iconStyle = olStyles['green'];
-      // remove popups
+  } else if (i == posLen - 1) {
-      if (map.popups.length > 0) {
+    var iconStyle = olStyles['red'];
-        for (var j = map.popups.length - 1; j >= 0; j--) {
+  } else {
-          map.removePopup(map.popups[j])
+    var iconStyle = olStyles['white'];
-        };
   }
-      // show popup
+  marker.setStyle(iconStyle);
-      var popup = new OpenLayers.Popup.FramedCloud("popup_" + (i + 1), lonLat, null, content, icon, true);
+  marker.setId(i);
-      map.addPopup(popup);
+  marker.set('p', p);
-      if (document.getElementById('bottom').style.display == 'block') {
+  marker.set('posLen', posLen);
-        var index = 0;
+  layerMarkers.getSource().addFeature(marker);
-        for (var key in altitudes) {
-          if (altitudes.hasOwnProperty(key) && key == i) {
-            chart.setSelection([{ row: index, column: null }]);
-            break;
-          }
-          index++;
-        }
-      }
-    }
-  })());
 }
 
 function addChartEvent(chart, data) {
@@ -176,16 +388,20 @@ function addChartEvent(chart, data) {
     var selection = chart.getSelection()[0];
     if (selection) {
       var id = data.getValue(selection.row, 0) - 1;
-      var marker = layerMarkers.markers[id];
+      var marker = layerMarkers.getSource().getFeatureById(id);
-      var url = marker.icon.url;
+      var url = marker.get('src');
-      marker.setUrl('images/marker-gold.png');
+      var initStyle = marker.getStyle();
-      altTimeout = setTimeout(function () { marker.setUrl(url); }, 2000);
+      var iconStyle = olStyles['gold'];
+      marker.setStyle(iconStyle);
+      altTimeout = setTimeout(function () { marker.setStyle(initStyle); }, 2000);
     }
   });
 }
+
 //20.597985430276808,52.15547181298076,21.363595171488573,52.33750879522563
 function getBounds() {
-  var bounds = map.getExtent().transform(mercator, wgs84).toArray();
+  var extent = map.getView().calculateExtent(map.getSize());
+  var bounds = ol.proj.transformExtent(extent, 'EPSG:900913', 'EPSG:4326');
   var lon_sw = bounds[0];
   var lat_sw = bounds[1];
   var lon_ne = bounds[2];
@@ -194,41 +410,17 @@ function getBounds() {
 }
 
 function zoomToBounds(b) {
-  var bounds = new OpenLayers.Bounds(b).transform(wgs84, mercator);
+  var bounds = ol.proj.transformExtent(b, 'EPSG:4326', 'EPSG:900913');
-  map.zoomToExtent(bounds);
+  map.getView().fit(bounds);
-}
-
-function urlFromOL3(url) {
-  url = url.replace(/\{([xyz])\}/g, "$${$1}");
-  return expandUrl(url);
-}
-
-// backported from openlayers 3
-function expandUrl(url) {
-  var urls = [];
-  var match = /\{([a-z])-([a-z])\}/.exec(url);
-  if (match) {
-    // char range
-    var startCharCode = match[1].charCodeAt(0);
-    var stopCharCode = match[2].charCodeAt(0);
-    for (var charCode = startCharCode; charCode <= stopCharCode; ++charCode) {
-      urls.push(url.replace(match[0], String.fromCharCode(charCode)));
-    }
-    return urls;
-  }
-  match = match = /\{(\d+)-(\d+)\}/.exec(url);
-  if (match) {
-    // number range
-    var stop = parseInt(match[2], 10);
-    for (var i = parseInt(match[1], 10); i <= stop; i++) {
-      urls.push(url.replace(match[0], i.toString()));
-    }
-    return urls;
-  }
-  urls.push(url);
-  return urls;
 }
 
 function updateSize() {
-  // ignore
+  map.updateSize();
+}
+
+function getExtentImg() {
+  var extentImg = document.createElement('img');
+  extentImg.src = 'images/extent.svg';
+  extentImg.style.width = '60%';
+  return extentImg;
 }

js/api_openlayers3.js

@@ -1,426 +0,0 @@
-/* μlogger
- *
- * Copyright(C) 2017 Bartek Fabiszewski (www.fabiszewski.net)
- *
- * This is free software; you can redistribute it and/or modify it under
- * the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, see <http://www.gnu.org/licenses/>.
- */
-
-// openlayers 3+
-var map;
-var layerTrack;
-var layerMarkers;
-var selectedLayer;
-var olStyles;
-var loadedAPI = 'openlayers3';
-
-function init() {
-
-  addCss('css/ol.css', 'ol3css');
-
-  var controls = [
-    new ol.control.Zoom(),
-    new ol.control.Rotate(),
-    new ol.control.ScaleLine(),
-    new ol.control.ZoomToExtent({ label: getExtentImg() }),
-  ];
-
-  var view = new ol.View({
-    center: ol.proj.fromLonLat([init_longitude, init_latitude]),
-    zoom: 8
-  });
-
-  map = new ol.Map({
-    target: 'map-canvas',
-    controls: controls,
-    view: view
-  });
-
-  // default layer: OpenStreetMap
-  var osm = new ol.layer.Tile({
-    name: 'OpenStreetMap',
-    visible: true,
-    source: new ol.source.OSM()
-  });
-  map.addLayer(osm);
-  selectedLayer = osm;
-
-  // add extra layers
-  for (var layerName in ol_layers) {
-    if (ol_layers.hasOwnProperty(layerName)) {
-      var layerUrl = ol_layers[layerName];
-      var ol_layer = new ol.layer.Tile({
-        name: layerName,
-        visible: false,
-        source: new ol.source.XYZ({
-          url: layerUrl
-        })
-      });
-      map.addLayer(ol_layer);
-    }
-  }
-
-  // init layers
-  var lineStyle = new ol.style.Style({
-    stroke: new ol.style.Stroke({
-      color: hexToRGBA(strokeColor, strokeOpacity),
-      width: strokeWeight
-    })
-  });
-  layerTrack = new ol.layer.Vector({
-    name: 'Track',
-    type: 'data',
-    source: new ol.source.Vector(),
-    style: lineStyle
-  });
-  layerMarkers = new ol.layer.Vector({
-    name: 'Markers',
-    type: 'data',
-    source: new ol.source.Vector()
-  });
-  map.addLayer(layerTrack);
-  map.addLayer(layerMarkers);
-
-  // styles
-  olStyles = {};
-  var iconRed = new ol.style.Icon({
-    anchor: [ 0.5, 1 ],
-    src: 'images/marker-red.png'
-  });
-  var iconGreen = new ol.style.Icon({
-    anchor: [ 0.5, 1 ],
-    src: 'images/marker-green.png'
-  });
-  var iconWhite = new ol.style.Icon({
-    anchor: [ 0.5, 1 ],
-    opacity: 0.7,
-    src: 'images/marker-white.png'
-  });
-  var iconGold = new ol.style.Icon({
-    anchor: [ 0.5, 1 ],
-    src: 'images/marker-gold.png'
-  });
-  olStyles['red'] = new ol.style.Style({
-    image: iconRed
-  });
-  olStyles['green'] = new ol.style.Style({
-    image: iconGreen
-  });
-  olStyles['white'] = new ol.style.Style({
-    image: iconWhite
-  });
-  olStyles['gold'] = new ol.style.Style({
-    image: iconGold
-  });
-
-  // popups
-  var popupContainer = document.createElement('div');
-  popupContainer.id = 'popup';
-  popupContainer.className = 'ol-popup';
-  document.getElementsByTagName('body')[0].appendChild(popupContainer);
-  var popupCloser = document.createElement('a');
-  popupCloser.id = 'popup-closer';
-  popupCloser.className = 'ol-popup-closer';
-  popupCloser.href = '#';
-  popupContainer.appendChild(popupCloser);
-  var popupContent = document.createElement('div');
-  popupContent.id = 'popup-content';
-  popupContainer.appendChild(popupContent);
-
-  var popup = new ol.Overlay({
-    element: popupContainer,
-    autoPan: true,
-    autoPanAnimation: {
-      duration: 250
-    }
-  });
-
-  popupCloser.onclick = function() {
-    popup.setPosition(undefined);
-    popupCloser.blur();
-    return false;
-  };
-
-  // add click handler to map to show popup
-  map.on('click', function(e) {
-    var coordinate = e.coordinate;
-    var feature = map.forEachFeatureAtPixel(e.pixel,
-      function(feature, layer) {
-        if (layer.get('name') == 'Markers') {
-          return feature;
-        }
-      });
-    if (feature) {
-      var p = feature.get('p');
-      var i = feature.getId();
-      var posLen = feature.get('posLen');
-      // popup show
-      popup.setPosition(coordinate);
-      popupContent.innerHTML = getPopupHtml(p, i, posLen);
-      map.addOverlay(popup);
-      if (document.getElementById('bottom').style.display == 'block') {
-        var index = 0;
-        for (var key in altitudes) {
-          if (altitudes.hasOwnProperty(key) && key == i) {
-            chart.setSelection([{ row: index, column: null }]);
-            break;
-          }
-          index++;
-        }
-      }
-    } else {
-      // popup destroy
-      popup.setPosition(undefined);
-    }
-  });
-
-  // change mouse cursor when over marker
-  map.on("pointermove", function(e) {
-    var hit = map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
-      if (layer.get('name') == 'Markers') {
-        return true;
-      } else {
-        return false;
-      }
-    });
-    if (hit) {
-      this.getTargetElement().style.cursor = 'pointer';
-    } else {
-      this.getTargetElement().style.cursor = '';
-    }
-  });
-
-  // layer switcher
-  var switcher = document.createElement('div');
-  switcher.id = 'switcher';
-  switcher.className = 'ol-control';
-  document.getElementsByTagName('body')[0].appendChild(switcher);
-  var switcherContent = document.createElement('div');
-  switcherContent.id = 'switcher-content';
-  switcherContent.className = 'ol-layerswitcher';
-  switcher.appendChild(switcherContent);
-
-  map.getLayers().forEach(function (layer) {
-    var layerLabel = document.createElement('label');
-    layerLabel.innerHTML = layer.get('name');
-    switcherContent.appendChild(layerLabel);
-
-    var layerRadio = document.createElement('input');
-    if (layer.get('type') === 'data') {
-      layerRadio.type = 'checkbox';
-      layerLabel.className = 'ol-datalayer';
-    } else {
-      layerRadio.type = 'radio';
-    }
-    layerRadio.name = 'layer';
-    layerRadio.value = layer.get('name');
-    layerRadio.onclick = switchLayer;
-    if (layer.getVisible()) {
-      layerRadio.checked = true;
-    }
-    layerLabel.insertBefore(layerRadio, layerLabel.childNodes[0]);
-  });
-
-  function switchLayer() {
-    var layerName = this.value;
-    map.getLayers().forEach(function (layer) {
-      if (layer.get('name') === layerName) {
-        if (layer.get('type') === 'data') {
-          if (layer.getVisible()) {
-            layer.setVisible(false);
-          } else {
-            layer.setVisible(true);
-          }
-        } else {
-          selectedLayer.setVisible(false);
-          selectedLayer = layer;
-          layer.setVisible(true);
-        }
-        return;
-      }
-    });
-  };
-
-  var switcherButton = document.createElement('button');
-  var layerImg = document.createElement('img');
-  layerImg.src = 'images/layers.svg';
-  layerImg.style.width = '60%';
-  switcherButton.appendChild(layerImg);
-
-  var switcherHandle = function() {
-    var el = document.getElementById('switcher');
-    if (el.style.display === 'block') {
-      el.style.display = 'none';
-    } else {
-      el.style.display = 'block';
-    }
-  };
-
-  switcherButton.addEventListener('click', switcherHandle, false);
-  switcherButton.addEventListener('touchstart', switcherHandle, false);
-
-  var element = document.createElement('div');
-  element.className = 'ol-switcher-button ol-unselectable ol-control';
-  element.appendChild(switcherButton);
-
-  var switcherControl = new ol.control.Control({
-      element: element
-  });
-  map.addControl(switcherControl);
-}
-
-function cleanup() {
-  map = undefined;
-  layerTrack = undefined;
-  layerMarkers = undefined;
-  selectedLayer = undefined;
-  olStyles = undefined;
-  removeElementById('popup');
-  removeElementById('switcher');
-  document.getElementById("map-canvas").innerHTML = '';
-}
-
-function displayTrack(xml, update) {
-  altitudes = {};
-  var totalMeters = 0;
-  var totalSeconds = 0;
-  var points = [];
-  var positions = xml.getElementsByTagName('position');
-  var posLen = positions.length;
-  for (var i = 0; i < posLen; i++) {
-    var p = parsePosition(positions[i], i);
-    totalMeters += p.distance;
-    totalSeconds += p.seconds;
-    p['totalMeters'] = totalMeters;
-    p['totalSeconds'] = totalSeconds;
-    // set marker
-    setMarker(p, i, posLen);
-    // update polyline
-    var point = ol.proj.fromLonLat([p.longitude, p.latitude]);
-    points.push(point);
-  }
-  var lineString = new ol.geom.LineString(points);
-
-  var lineFeature = new ol.Feature({
-    geometry: lineString,
-  });
-
-  layerTrack.getSource().addFeature(lineFeature);
-
-  var extent = layerTrack.getSource().getExtent();
-
-  map.getControls().forEach(function (el) {
-    if (el instanceof ol.control.ZoomToExtent) {
-      map.removeControl(el);
-    }
-  });
-
-  if (update) {
-    map.getView().fit(extent);
-    var zoom = map.getView().getZoom();
-    if (zoom > 20) {
-      map.getView().setZoom(20);
-      extent = map.getView().calculateExtent(map.getSize());
-    }
-  }
-
-  var zoomToExtentControl = new ol.control.ZoomToExtent({
-    extent: extent,
-    label: getExtentImg()
-  });
-  map.addControl(zoomToExtentControl);
-
-  updateSummary(p.timestamp, totalMeters, totalSeconds);
-  if (p.tid != trackid) {
-    trackid = p.tid;
-    setTrack(trackid);
-  }
-  if (document.getElementById('bottom').style.display == 'block') {
-    // update altitudes chart
-    chart.clearChart();
-    displayChart();
-  }
-}
-
-function clearMap() {
-  if (layerTrack) {
-    layerTrack.getSource().clear();
-  }
-  if (layerMarkers) {
-    layerMarkers.getSource().clear();
-  }
-}
-
-function setMarker(p, i, posLen) {
-  // marker
-  var marker = new ol.Feature({
-    geometry: new ol.geom.Point(ol.proj.fromLonLat([p.longitude, p.latitude]))
-  });
-
-  if (latest == 1) {
-    var iconStyle = olStyles['red'];
-  } else if (i == 0) {
-    var iconStyle = olStyles['green'];
-  } else if (i == posLen - 1) {
-    var iconStyle = olStyles['red'];
-  } else {
-    var iconStyle = olStyles['white'];
-  }
-  marker.setStyle(iconStyle);
-  marker.setId(i);
-  marker.set('p', p);
-  marker.set('posLen', posLen);
-  layerMarkers.getSource().addFeature(marker);
-}
-
-function addChartEvent(chart, data) {
-  google.visualization.events.addListener(chart, 'select', function () {
-    var selection = chart.getSelection()[0];
-    if (selection) {
-      var id = data.getValue(selection.row, 0) - 1;
-      var marker = layerMarkers.getSource().getFeatureById(id);
-      var url = marker.get('src');
-      var initStyle = marker.getStyle();
-      var iconStyle = olStyles['gold'];
-      marker.setStyle(iconStyle);
-      altTimeout = setTimeout(function () { marker.setStyle(initStyle); }, 2000);
-    }
-  });
-}
-
-//20.597985430276808,52.15547181298076,21.363595171488573,52.33750879522563
-function getBounds() {
-  var extent = map.getView().calculateExtent(map.getSize());
-  var bounds = ol.proj.transformExtent(extent, 'EPSG:900913', 'EPSG:4326');
-  var lon_sw = bounds[0];
-  var lat_sw = bounds[1];
-  var lon_ne = bounds[2];
-  var lat_ne = bounds[3];
-  return [lon_sw, lat_sw, lon_ne, lat_ne];
-}
-
-function zoomToBounds(b) {
-  var bounds = ol.proj.transformExtent(b, 'EPSG:4326', 'EPSG:900913');
-  map.getView().fit(bounds);
-}
-
-function updateSize() {
-  map.updateSize();
-}
-
-function getExtentImg() {
-  var extentImg = document.createElement('img');
-  extentImg.src = 'images/extent.svg';
-  extentImg.style.width = '60%';
-  return extentImg;
-}

js/main.js

@@ -492,11 +492,8 @@ function loadMapAPI(api) {
   if (mapapi == 'gmaps') {
     addScript('js/api_gmaps.js', 'mapapi');
     urls.push('//maps.googleapis.com/maps/api/js?' + ((gkey !== null) ? ('key=' + gkey + '&') : '') + 'callback=init');
-  } else if (mapapi == 'openlayers') {
-    addScript('js/api_openlayers.js', 'mapapi');
-    urls.push('//openlayers.org/api/OpenLayers.js');
   } else {
-    addScript('js/api_openlayers3.js', 'mapapi');
+    addScript('js/api_openlayers.js', 'mapapi');
     urls.push('//cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList')
     urls.push('js/ol.js');
   }