Add openlayers 3 api, move extra layers to config, closes #27, closes #34

2017-09-11 22:10:24 +02:00 · 2017-09-11 22:10:24 +02:00 · b04b015a5d
commit b04b015a5d
parent 7df61bd060
13 changed files with 677 additions and 145 deletions
--- a/README.md
+++ b/README.md
@ -19,7 +19,7 @@ Together with a dedicated [μlogger mobile client](https://github.com/bfabiszews
 - multiple users
 - user authentication
 - Google Maps API v3
- OpenLayers v2 (OpenStreet and other layers)
+- OpenLayers v2 or v3 (OpenStreet and other layers)
 - ajax
 - user preferences stored in cookies
 - simple admin menu
--- a/config.default.php
+++ b/config.default.php
@ -21,19 +21,18 @@
 // Copy it to config.php and customize

 // default map drawing framework
-// (gmaps = google maps, openlayers = openlayers/osm)
-//$mapapi = "gmaps";
-$mapapi = "openlayers";
+//$mapapi = "gmaps"; // google maps
+//$mapapi = "openlayers"; // openlayers 2
+$mapapi = "openlayers3"; // openlayers 3+
+
+// openlayers additional map layers in XYZ format
+// name => url
+$ol_layers['OpenCycleMap'] = 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey='; // api key needed
+$ol_layers['OpenTopoMap'] = 'https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png';
+$ol_layers['ESRI'] = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
+$ol_layers['UMP'] = 'http://{1-3}.tiles.ump.waw.pl/ump_tiles/{z}/{x}/{y}.png';
+$ol_layers['Osmapa.pl'] = 'http://{a-c}.tile.openstreetmap.pl/osmapa.pl/{z}/{x}/{y}.png';

-// openlayers additional map layers
-// OpenCycleMap (0 = no, 1 = yes)
-$layer_ocm = 1;
-// MapQuest-OSM (0 = no, 1 = yes)
-$layer_mq = 1;
-// osmapa.pl (0 = no, 1 = yes)
-$layer_osmapa = 1;
-// UMP (0 = no, 1 = yes)
-$layer_ump = 1;

 // default coordinates for initial map
 $init_latitude = 52.23;
--- a/css/main.css
+++ b/css/main.css
@ -322,4 +322,95 @@ button {

@keyframes blink {
  50% { opacity: 0; }
+}
+
+/* openlayers 3 popup */
+.ol-popup {
+  position: absolute;
+  background-color: white;
+  -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #cccccc;
+  bottom: 12px;
+  left: -50px;
+  min-width: 280px;
+}
+.ol-popup:after, .ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol-popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+.ol-popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 2px;
+  right: 8px;
+}
+.ol-popup-closer:after {
+  content: "✖";
+}
+
+#switcher {
+  display: none;
+  position: absolute;
+  bottom: 12px;
+  left: 10px;
+  min-width: 200px;
+}
+.ol-layerswitcher {
+  margin: 1px;
+  color: #fff;
+  background-color: rgba(0, 60, 136, .5);
+  border: none;
+  border-radius: 2px;
+  font-family: sans-serif;
+  font-weight: bold;
+  font-size: .9em;
+  padding: 0.5em;
+}
+.ol-layerswitcher:hover {
+  background-color: rgba(0, 60, 136, .7)
+}
+.ol-layerswitcher label {
+  display: block;
+  clear: both;
+  margin: .5em 0;
+  cursor: pointer;
+}
+.ol-layerswitcher label:hover {
+  color: #c8dcf2;
+}
+.ol-layerswitcher input {
+  margin-right: 1em;
+}
+label.ol-datalayer {
+  margin-top: 1.5em;
+}
+.ol-datalayer ~ .ol-datalayer {
+  margin-top: .5em;
+}
+.ol-switcher-button {
+  top: 6.6em;
+  left: .5em;
+}
+.ol-touch .ol-switcher-button {
+  top: 10em;
 }
--- a/helpers/config.php
+++ b/helpers/config.php
@ -37,14 +37,7 @@
    static $gkey = null;

    // openlayers additional map layers
-    // OpenCycleMap (0 = no, 1 = yes)
-    static $layer_ocm = 1;
-    // MapQuest-OSM (0 = no, 1 = yes)
-    static $layer_mq = 1;
-    // osmapa.pl (0 = no, 1 = yes)
-    static $layer_osmapa = 1;
-    // UMP (0 = no, 1 = yes)
-    static $layer_ump = 1;
+    static $ol_layers = [];

    // default coordinates for initial map
    static $init_latitude = 52.23;
@ -114,10 +107,7 @@

      if (isset($mapapi)) { self::$mapapi = $mapapi; }
      if (isset($gkey)) { self::$gkey = $gkey; }
-      if (isset($layer_ocm)) { self::$layer_ocm = $layer_ocm; }
-      if (isset($layer_mq)) { self::$layer_mq = $layer_mq; }
-      if (isset($layer_osmapa)) { self::$layer_osmapa = $layer_osmapa; }
-      if (isset($layer_ump)) { self::$layer_ump = $layer_ump; }
+      if (isset($ol_layers)) { self::$ol_layers = $ol_layers; }
      if (isset($init_latitude)) { self::$init_latitude = $init_latitude; }
      if (isset($init_longitude)) { self::$init_longitude = $init_longitude; }
      if (isset($dbhost)) { self::$dbhost = $dbhost; }
--- a/images/marker-gold.png
+++ b/images/marker-gold.png
--- a/images/marker-green.png
+++ b/images/marker-green.png
--- a/images/marker-red.png
+++ b/images/marker-red.png
--- a/images/marker-white.png
+++ b/images/marker-white.png
--- a/index.php
+++ b/index.php
@ -73,26 +73,15 @@
      var units = '<?= uConfig::$units ?>';
      var mapapi = '<?= uConfig::$mapapi ?>';
      var gkey = '<?= !empty(uConfig::$gkey) ? uConfig::$gkey : "null" ?>';
-      var layer_ocm = '<?= uConfig::$layer_ocm ?>';
-      var layer_mq = '<?= uConfig::$layer_mq ?>';
-      var layer_osmapa = '<?= uConfig::$layer_osmapa ?>';
-      var layer_ump = '<?= uConfig::$layer_ump ?>';
-      var init_latitude = '<?= uConfig::$init_latitude ?>';
-      var init_longitude = '<?= uConfig::$init_longitude ?>';
+      var ol_layers = <?= json_encode(uConfig::$ol_layers) ?>;
+      var init_latitude = <?= uConfig::$init_latitude ?>;
+      var init_longitude = <?= uConfig::$init_longitude ?>;
      var lang = <?= json_encode($lang) ?>;
      var admin = <?= json_encode($auth->isAdmin()) ?>;
      var auth = '<?= ($auth->isAuthenticated()) ? $auth->user->login : "null" ?>';
      var pass_regex = <?= uConfig::passRegex() ?>;
    </script>
    <script type="text/javascript" src="js/main.js"></script>
-
-    <?php if (uConfig::$mapapi == "gmaps"): ?>
-      <script type="text/javascript" src="//maps.googleapis.com/maps/api/js<?= !empty(uConfig::$gkey) ? "?key=" . uConfig::$gkey : "" ?>"></script>
-      <script type="text/javascript" src="js/api_gmaps.js"></script>
-    <?php else: ?>
-      <script type="text/javascript" src="//openlayers.org/api/OpenLayers.js"></script>
-      <script type="text/javascript" src="js/api_openlayers.js"></script>
-    <?php endif; ?>
    <?php if ($auth->isAdmin()): ?>
      <script type="text/javascript" src="js/admin.js"></script>
    <?php endif; ?>
@ -106,7 +95,7 @@
    </script>
  </head>

-  <body onload="init(); loadTrack(userid, trackid, 1);">
+  <body onload="loadMapAPI();">
    <div id="menu">
      <div id="menu-content">

@ -161,7 +150,8 @@
          <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</option>
+              <option value="openlayers"<?= (uConfig::$mapapi == "openlayers") ? " selected" : "" ?>>OpenLayers 2</option>
+              <option value="openlayers3"<?= (uConfig::$mapapi == "openlayers3") ? " selected" : "" ?>>OpenLayers 3+</option>
            </select>
          </form>
        </div>
--- a/js/api_gmaps.js
+++ b/js/api_gmaps.js
@ -18,9 +18,10 @@

 // google maps
 var map;
-var polies = new Array();
-var markers = new Array();
-var popups = new Array();
+var polies = [];
+var markers = [];
+var popups = [];
+var popup;
 var polyOptions;
 var mapOptions;
 var loadedAPI = 'gmaps';
@ -41,6 +42,16 @@ function init() {
  };
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
 }
+function cleanup() {
+  map = undefined;
+  polies = undefined;
+  markers = undefined;
+  popups = undefined;
+  popup = undefined;
+  polyOptions = undefined;
+  mapOptions = undefined;
+  document.getElementById("map-canvas").innerHTML = '';
+}

 function displayTrack(xml, update) {
  altitudes = {};
@ -111,7 +122,6 @@ function clearMap() {
  popups.lentgth = 0;
 }

-var popup;
 function setMarker(p, i, posLen) {
  // marker
  var marker = new google.maps.Marker({
@ -119,10 +129,10 @@ function setMarker(p, i, posLen) {
    position: p.coordinates,
    title: (new Date(p.timestamp * 1000)).toLocaleString()
  });
-  if (latest == 1) { marker.setIcon('//maps.google.com/mapfiles/dd-end.png') }
-  else if (i == 0) { marker.setIcon('//maps.google.com/mapfiles/marker_greenA.png') }
-  else if (i == posLen - 1) { marker.setIcon('//maps.google.com/mapfiles/markerB.png') }
-  else { marker.setIcon('//maps.gstatic.com/mapfiles/ridefinder-images/mm_20_gray.png') }
+  if (latest == 1) { marker.setIcon('images/marker-red.png') }
+  else if (i == 0) { marker.setIcon('images/marker-green.png') }
+  else if (i == posLen - 1) { marker.setIcon('images/marker-red.png') }
+  else { marker.setIcon('images/marker-white.png') }
  // popup
  var content = getPopupHtml(p, i, posLen);
  popup = new google.maps.InfoWindow();
@ -153,7 +163,7 @@ function addChartEvent(chart, data) {
    if (selection) {
      var id = data.getValue(selection.row, 0) - 1;
      var icon = markers[id].getIcon();
-      markers[id].setIcon('//maps.google.com/mapfiles/marker_orange.png');
+      markers[id].setIcon('images/marker-gold.png');
      altTimeout = setTimeout(function () { markers[id].setIcon(icon); }, 2000);
    }
  });
@ -161,12 +171,11 @@ function addChartEvent(chart, data) {

 //((52.20105108685229, 20.789387865580238), (52.292069558807135, 21.172192736185707))
 function getBounds() {
-  var b = map.getBounds().toString();
-  var bounds = b.split(',', 4);
-  var lat_sw = bounds[0].replace(/\(/g, '');
-  var lon_sw = bounds[1].replace(/[ )]/g, '');
-  var lat_ne = bounds[2].replace(/[ (]/g, '');
-  var lon_ne = bounds[3].replace(/[ )]/g, '');
+  var bounds = map.getBounds();
+  var lat_sw = bounds.getSouthWest().lat();
+  var lon_sw = bounds.getSouthWest().lng();
+  var lat_ne = bounds.getNorthEast().lat();
+  var lon_ne = bounds.getNorthEast().lng();
  return [lon_sw, lat_sw, lon_ne, lat_ne];
 }

--- a/js/api_openlayers.js
+++ b/js/api_openlayers.js
@ -20,10 +20,10 @@
 var map;
 var layerTrack;
 var layerMarkers;
-var lineStyle = { strokeColor: '#FF0000', strokeOpacity: 1, strokeWidth: 2 };
 var wgs84;
 var mercator;
 var loadedAPI = 'openlayers';
+
 function init() {
  wgs84 = new OpenLayers.Projection('EPSG:4326');   // from WGS 1984
  mercator = new OpenLayers.Projection('EPSG:900913'); // to Mercator
@ -39,56 +39,45 @@ function init() {
  };
  map = new OpenLayers.Map('map-canvas', options);
  // default layer: OpenStreetMap
-  var mapnik = new OpenLayers.Layer.OSM('OpenStreetMap',
-    ['//a.tile.openstreetmap.org/${z}/${x}/${y}.png',
-      '//b.tile.openstreetmap.org/${z}/${x}/${y}.png',
-      '//c.tile.openstreetmap.org/${z}/${x}/${y}.png']);
-  map.addLayer(mapnik);
-  if (layer_ocm == 1) {
-    // OpenCycleMap
-    var ocm = new OpenLayers.Layer.OSM('OpenCycleMap',
-      ['//a.tile.thunderforest.com/cycle/${z}/${x}/${y}.png',
-        '//b.tile.thunderforest.com/cycle/${z}/${x}/${y}.png',
-        '//c.tile.thunderforest.com/cycle/${z}/${x}/${y}.png']);
-    map.addLayer(ocm);
-  }
-  if (layer_mq == 1) {
-    // MapQuest-OSM
-    var mq = new OpenLayers.Layer.OSM('MapQuest-OSM',
-      ['//otile1.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.jpg',
-        '//otile2.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.jpg',
-        '//otile3.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.jpg',
-        '//otile4.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.jpg']);
-    map.addLayer(mq);
-  }
-  if (layer_osmapa == 1) {
-    // osmapa.pl
-    var osmapa = new OpenLayers.Layer.OSM('osmapa.pl',
-      ['//a.osm.trail.pl/osmapa.pl/${z}/${x}/${y}.png',
-        '//b.osm.trail.pl/osmapa.pl/${z}/${x}/${y}.png',
-        '//c.osm.trail.pl/osmapa.pl/${z}/${x}/${y}.png']);
-    map.addLayer(osmapa);
-  }
-  if (layer_ump == 1) {
-    // UMP
-    var ump = new OpenLayers.Layer.OSM('UMP',
-      ['//1.tiles.ump.waw.pl/ump_tiles/${z}/${x}/${y}.png',
-        '//2.tiles.ump.waw.pl/ump_tiles/${z}/${x}/${y}.png',
-        '//3.tiles.ump.waw.pl/ump_tiles/${z}/${x}/${y}.png']);
-    map.addLayer(ump);
+  var osm = new OpenLayers.Layer.OSM();
+  map.addLayer(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(
+        layerName,
+        urlFromOL3(layerUrl),
+        { tileOptions: { crossOriginKeyword: null } }
+      );
+      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');
  layerMarkers = new OpenLayers.Layer.Markers('Markers');
 }
+
+function cleanup() {
+  map = undefined;
+  layerTrack = undefined;
+  layerMarkers = undefined;
+  wgs84 = undefined;
+  mercator = undefined;
+  document.getElementById("map-canvas").innerHTML = '';
+}
+
 function displayTrack(xml, update) {
  altitudes = {};
  var totalMeters = 0;
  var totalSeconds = 0;
-  var points = new Array();
+  var points = [];
  var latlngbounds = new OpenLayers.Bounds();
  var positions = xml.getElementsByTagName('position');
  var posLen = positions.length;
@ -106,6 +95,7 @@ function displayTrack(xml, update) {
    points.push(point);
  }
  var lineString = new OpenLayers.Geometry.LineString(points);
+  var lineStyle = { strokeColor: '#FF0000', strokeOpacity: 1, strokeWidth: 2 };
  var lineFeature = new OpenLayers.Feature.Vector(lineString, null, lineStyle);
  layerTrack.addFeatures([lineFeature]);
  map.addLayer(layerTrack);
@ -142,15 +132,14 @@ function clearMap() {
 function setMarker(p, i, posLen) {
  // marker
  var lonLat = new OpenLayers.LonLat(p.longitude, p.latitude).transform(wgs84, mercator);
-  var size = new OpenLayers.Size(21, 25);
+  var size = new OpenLayers.Size(16, 25);
  var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
-  if (latest == 1) { var icon = new OpenLayers.Icon('//www.openstreetmap.org/openlayers/img/marker.png', size, offset); }
-  else if (i == 0) { var icon = new OpenLayers.Icon('//www.openstreetmap.org/openlayers/img/marker-green.png', size, offset); }
-  else if (i == posLen - 1) { var icon = new OpenLayers.Icon('//www.openstreetmap.org/openlayers/img/marker.png', size, offset); }
+  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 {
-    size = new OpenLayers.Size(12, 20);
    offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
-    var icon = new OpenLayers.Icon('//maps.gstatic.com/mapfiles/ridefinder-images/mm_20_gray.png', size, offset);
+    var icon = new OpenLayers.Icon('images/marker-white.png', size, offset);
  }
  var marker = new OpenLayers.Marker(lonLat, icon);
  layerMarkers.addMarker(marker);
@ -189,15 +178,14 @@ function addChartEvent(chart, data) {
      var id = data.getValue(selection.row, 0) - 1;
      var marker = layerMarkers.markers[id];
      var url = marker.icon.url;
-      marker.setUrl('//www.openstreetmap.org/openlayers/img/marker-gold.png');
+      marker.setUrl('images/marker-gold.png');
      altTimeout = setTimeout(function () { marker.setUrl(url); }, 2000);
    }
  });
 }
 //20.597985430276808,52.15547181298076,21.363595171488573,52.33750879522563
 function getBounds() {
-  var b = map.getExtent().transform(mercator, wgs84).toString();
-  var bounds = b.split(',', 4);
+  var bounds = map.getExtent().transform(mercator, wgs84).toArray();
  var lon_sw = bounds[0];
  var lat_sw = bounds[1];
  var lon_ne = bounds[2];
@ -209,3 +197,36 @@ function zoomToBounds(b) {
  var bounds = new OpenLayers.Bounds(b).transform(wgs84, mercator);
  map.zoomToExtent(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;
+}
+
+
--- a/js/api_openlayers3.js
+++ b/js/api_openlayers3.js
@ -0,0 +1,411 @@
+/* μ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('https://openlayers.org/en/v4.3.2/css/ol.css', 'ol3css');
+
+  var controls = [
+    new ol.control.Zoom(),
+    new ol.control.Rotate(),
+    new ol.control.ScaleLine(),
+    new ol.control.ZoomToExtent(),
+  ];
+
+  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: 'rgba(255, 0, 0, 0.5)',
+      width: 2
+    })
+  });
+  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');
+  switcherButton.innerHTML = 'L';
+
+  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
+  });
+  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);
+}
--- a/js/main.js
+++ b/js/main.js
@ -17,6 +17,7 @@
 */

 // general stuff
+var factor_kmh, unit_kmh, factor_m, unit_m, factor_km, unit_km;
 if (units == 'imperial') {
  factor_kmh = 0.62; //to mph
  unit_kmh = 'mph';
@ -38,6 +39,9 @@ var chart;
 var altitudes = {};
 var altTimeout;
 var gm_error = false;
+var loadTime = 0;
+var auto;
+var savedBounds = null;

 function displayChart() {
  if (chart) { google.visualization.events.removeAllListeners(chart); }
@ -149,8 +153,8 @@ function loadTrack(userid, trackid, update) {

 function parsePosition(p, id) {
  // read data
-  var latitude = getNode(p, 'latitude');
-  var longitude = getNode(p, 'longitude');
+  var latitude = parseFloat(getNode(p, 'latitude'));
+  var longitude = parseFloat(getNode(p, 'longitude'));
  var altitude = getNode(p, 'altitude'); // may be null
  if (altitude != null) {
    altitude = parseInt(altitude);
@ -219,7 +223,7 @@ function getPopupHtml(p, i, count) {
      '<img class="icon" alt="' + lang['tdistance'] + '" title="' + lang['tdistance'] + '" src="images/distance_blue.svg"> ' +
      (p.totalMeters.toKm() * factor_km).toFixed(2) + ' ' + unit_km + '<br>' + '</div>';
  }
-  popup =
+  var popup =
    '<div id="popup">' +
    '<div id="pheader">' +
    '<div><img alt="' + lang['user'] + '" title="' + lang['user'] + '" src="images/user_dark.svg"> ' + htmlEncode(p.username) + '</div>' +
@ -440,7 +444,6 @@ function clearOptions(el) {
  }
 }

-var auto;
 function autoReload() {
  if (live == 0) {
    live = 1;
@ -469,38 +472,41 @@ function setTime() {
 }

 // dynamic change of map api
-var savedBounds;
 function loadMapAPI(api) {
-  mapapi = api;
-  try {
-    savedBounds = getBounds();
-  } catch (e) {
-    savedBounds = null;
+  if (api) {
+    mapapi = api;
+    try {
+      savedBounds = getBounds();
+    } catch (e) {
+      savedBounds = null;
+    }
+    cleanup();
  }
-  document.getElementById("map-canvas").innerHTML = '';
-  var url = new Array();
-  if (api == 'gmaps') {
-    url.push('js/api_gmaps.js');
-    url.push('//maps.googleapis.com/maps/api/js?' + ((gkey !== null) ? ('key=' + gkey + '&') : '') + 'callback=init');
+  removeElementById('mapapi');
+  var urls = [];
+  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');
+    urls.push('//cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList')
+    urls.push('//openlayers.org/en/v4.3.2/build/ol.js');
  }
-  else {
-    url.push('js/api_openlayers.js');
-    url.push('//openlayers.org/api/OpenLayers.js');
-  }
-  addScript(url[0]);
-  waitAndLoad(api, url);
+  waitAndLoad(mapapi, urls);
 }

-var loadTime = 0;
-function waitAndLoad(api, url) {
+function waitAndLoad(api, urls) {
  // wait till first script loaded
  if (loadTime > 5000) { loadTime = 0; alert(sprintf(lang['apifailure'], api)); return; }
-  if (loadedAPI !== api) {
-    setTimeout(function () { loadTime += 50; waitAndLoad(api, url); }, 50);
+  if (typeof loadedAPI === 'undefined' || loadedAPI !== api) {
+    setTimeout(function () { loadTime += 50; waitAndLoad(api, urls); }, 50);
    return;
  }
-  if (!isScriptLoaded(url[1])) {
-    addScript(url[1]);
+  for (var i = 0; i < urls.length; i++) {
+    addScript(urls[i], 'mapapi_' + api + '_' + i);
  }
  loadTime = 0;
  waitAndInit(api);
@ -511,8 +517,7 @@ function waitAndInit(api) {
  if (loadTime > 10000) { loadTime = 0; alert(sprintf(lang['apifailure'], api)); return; }
  try {
    init();
-  }
-  catch (e) {
+  } catch (e) {
    setTimeout(function () { loadTime += 50; waitAndInit(api); }, 50);
    return;
  }
@ -527,21 +532,38 @@ function waitAndInit(api) {
  setCookie('api', api, 30);
 }

-function addScript(url) {
+function addScript(url, id) {
+  if (id && document.getElementById(id)) {
+    return;
+  }
  var tag = document.createElement('script');
-  tag.setAttribute('type', 'text/javascript');
-  tag.setAttribute('src', url);
+  tag.type = 'text/javascript';
+  tag.src = url;
+  if (id) {
+    tag.id = id;
+  }
  document.getElementsByTagName('head')[0].appendChild(tag);
 }

-function isScriptLoaded(url) {
-  scripts = document.getElementsByTagName('script');
-  for (var i = scripts.length; i--;) {
-    // check if url matches src
-    var scriptUrl = scripts[i].src.replace(/https?:/, '');
-    if (scriptUrl != '' && url.indexOf(scriptUrl) !== -1) return true;
+function addCss(url, id) {
+  if (id && document.getElementById(id)) {
+    return;
+  }
+  var tag = document.createElement('link');
+  tag.type = 'text/css';
+  tag.rel = 'stylesheet';
+  tag.href = url;
+  if (id) {
+    tag.id = id;
+  }
+  document.getElementsByTagName('head')[0].appendChild(tag);
+}
+
+function removeElementById(id) {
+  var tag = document.getElementById(id);
+  if (tag && tag.parentNode) {
+    tag.parentNode.removeChild(tag);
  }
-  return false;
 }

 function setCookie(name, value, days) {
@ -549,8 +571,7 @@ function setCookie(name, value, days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    var expires = '; expires=' + date.toGMTString();
-  }
-  else {
+  } else {
    var expires = '';
  }
  document.cookie = 'ulogger_' + name + '=' + value + expires + '; path=/';