Merge branch 'fronkdev' into 'master'

Added view-switcher and center button controls inside map

See merge request fronk/thetool!515

Layout/default/Building/Index.php

@@ -397,7 +397,7 @@
         });
       }
     } else {
-      buildingMap = L.map('building-map', {fullscreenControl: true}).setView([<?=TT_PLACEHOLDER_GPS_LAT?>, <?=TT_PLACEHOLDER_GPS_LONG?>], 12);
+      buildingMap = L.map('building-map', {fullscreenControl: true, centerControl: true, switchviewControl: true}).setView([<?=TT_PLACEHOLDER_GPS_LAT?>, <?=TT_PLACEHOLDER_GPS_LONG?>], 12);
     }
 
     if(!(currentTileset in tileLayers)) {

Layout/default/Preorder/Index.php

@@ -437,7 +437,7 @@
             });
           }
         } else {
-          preorderMap = L.map('preorder-map', {fullscreenControl: true}).setView([<?=TT_PLACEHOLDER_GPS_LAT?>, <?=TT_PLACEHOLDER_GPS_LONG?>], 12);
+          preorderMap = L.map('preorder-map', {fullscreenControl: true, centerControl: true, switchviewControl: true}).setView([<?=TT_PLACEHOLDER_GPS_LAT?>, <?=TT_PLACEHOLDER_GPS_LONG?>], 12);
         }
         
         if(!(currentTileset in tileLayers)) {

Layout/default/header.php

@@ -20,6 +20,8 @@
     <link href="<?=self::getResourcePath()?>assets/css/app.css?<?=$git_merge_ts?>" rel="stylesheet" type="text/css" />
     <link href="<?=self::getResourcePath()?>assets/css/leaflet.css" rel="stylesheet" type="text/css" />
     <link href="<?=self::getResourcePath()?>assets/css/leaflet.fullscreen.css" rel="stylesheet" type="text/css" />
+    <link href="<?=self::getResourcePath()?>assets/css/leaflet-ext/leaflet.center-button.css" rel="stylesheet" type="text/css" />
+    <link href="<?=self::getResourcePath()?>assets/css/leaflet-ext/leaflet.switch-view-button.css" rel="stylesheet" type="text/css" />
     <link href="<?=self::getResourcePath()?>assets/css/thetool.css?<?=$git_merge_ts?>" rel="stylesheet" type="text/css" />
     <link href="<?=self::getResourcePath()?>assets/libs/select2/select2.min.css" rel="stylesheet" type="text/css" />
     <link href="<?=self::getResourcePath()?>assets/css/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
@@ -42,6 +44,8 @@
     <script type="text/javascript" src="<?=self::getResourcePath()?>assets/js/leaflet.js"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>assets/js/Leaflet.fullscreen.min.js"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>assets/js/leaflet.MakiMarkers.js"></script>
+    <script type="text/javascript" src="<?=self::getResourcePath()?>assets/js/leaflet-ext/leaflet.center-button.js"></script>
+    <script type="text/javascript" src="<?=self::getResourcePath()?>assets/js/leaflet-ext/leaflet.switch-view-button.js"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>js/popper.min.js"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>js/bootstrap.min.js"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>assets/js/bootstrap-select.min.js"></script>

public/assets/css/leaflet-ext/leaflet.center-button.css

@@ -0,0 +1,11 @@
+.leaflet-control-center a {
+    background:#fff url(map-center-button.png) no-repeat 0 0;
+}
+
+@media
+(-webkit-min-device-pixel-ratio:2),
+(min-resolution:192dpi) {
+    .leaflet-control-center a {
+        background-image:url(map-center-button-2x.png);
+    }
+}

public/assets/css/leaflet-ext/leaflet.switch-view-button.css

@@ -0,0 +1,11 @@
+.leaflet-control-switch-view a {
+    background:#fff url(map-switch-view.png) no-repeat 0 0;
+}
+
+@media
+(-webkit-min-device-pixel-ratio:2),
+(min-resolution:192dpi) {
+    .leaflet-control-switch-view a {
+        background-image:url(map-switch-view-2x.png);
+    }
+}

public/assets/js/leaflet-ext/leaflet.center-button.js

@@ -0,0 +1,64 @@
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD
+        define(['leaflet'], factory);
+    } else if (typeof module !== 'undefined') {
+        // Node/CommonJS
+        module.exports = factory(require('leaflet'));
+    } else {
+        // Browser globals
+        if (typeof window.L === 'undefined') {
+            throw new Error('Leaflet must be loaded first');
+        }
+        factory(window.L);
+    }
+}(function (L) {
+    L.Control.Center = L.Control.extend({
+        options: {
+            position: 'bottomleft',
+            title: 'Zentrieren'
+        },
+
+        onAdd: function (map) {
+            var container = L.DomUtil.create('div', 'leaflet-control-center leaflet-bar leaflet-control');
+
+            this.link = L.DomUtil.create('a', 'leaflet-control-center-button leaflet-bar-part', container);
+            this.link.href = '#';
+
+            this._map = map;
+            this.link.title = this.options.title;
+
+            L.DomEvent.on(this.link, 'click', this._click, this);
+
+            return container;
+        },
+
+        _click: function (e) {
+            L.DomEvent.stopPropagation(e);
+            L.DomEvent.preventDefault(e);
+            this._map.centerMap();
+        },
+
+    });
+
+    L.Map.include({
+        centerMap: function() {
+            if(typeof mapCenterPos !== 'undefined') {
+                this.setView(mapCenterPos);
+            }
+
+        },
+
+    });
+
+    L.Map.addInitHook(function () {
+        if (this.options.centerControl) {
+            this.centerControl = new L.Control.Center(this.options.centerControl);
+            this.addControl(this.centerControl);
+        }
+    });
+
+    L.control.center = function (options) {
+        return new L.Control.Center(options);
+    };
+}));

public/assets/js/leaflet-ext/leaflet.switch-view-button.js

@@ -0,0 +1,62 @@
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD
+        define(['leaflet'], factory);
+    } else if (typeof module !== 'undefined') {
+        // Node/CommonJS
+        module.exports = factory(require('leaflet'));
+    } else {
+        // Browser globals
+        if (typeof window.L === 'undefined') {
+            throw new Error('Leaflet must be loaded first');
+        }
+        factory(window.L);
+    }
+}(function (L) {
+    L.Control.Switchview = L.Control.extend({
+        options: {
+            position: 'bottomleft',
+            title: 'Zwischen Karte und Satellitenansicht wechseln'
+        },
+
+        onAdd: function (map) {
+            var container = L.DomUtil.create('div', 'leaflet-control-switch-view leaflet-bar leaflet-control');
+
+            this.link = L.DomUtil.create('a', 'leaflet-control-switch-view-button leaflet-bar-part', container);
+            this.link.href = '#';
+
+            this._map = map;
+            this.link.title = this.options.title;
+
+            L.DomEvent.on(this.link, 'click', this._click, this);
+
+            return container;
+        },
+
+        _click: function (e) {
+            L.DomEvent.stopPropagation(e);
+            L.DomEvent.preventDefault(e);
+            this._map.toggleTileset();
+        },
+
+    });
+
+    L.Map.include({
+        toggleTileset: function() {
+            toggleTileset();
+
+        },
+
+    });
+
+    L.Map.addInitHook(function () {
+        if (this.options.switchviewControl) {
+            this.switchviewControl = new L.Control.Switchview(this.options.switchviewControl);
+            this.addControl(this.switchviewControl);
+        }
+    });
+
+    L.control.switchview = function (options) {
+        return new L.Control.Switchview(options);
+    };
+}));