print function

package-lock.json

@@ -5511,6 +5511,11 @@
         "entities": "^1.1.1"
       }
     },
+    "dom-to-image": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
+      "integrity": "sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -7043,6 +7048,11 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "file-saver": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-1.3.8.tgz",
+      "integrity": "sha512-spKHSBQIxxS81N/O21WmuXA2F6wppUCsutpzenOeZzOCCJ5gEfcbqJP983IrpLXzYmXnMUa6J03SubcNPdKrlg=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -11070,6 +11080,15 @@
       "resolved": "https://registry.npmjs.org/leaflet-defaulticon-compatibility/-/leaflet-defaulticon-compatibility-0.1.1.tgz",
       "integrity": "sha512-vDBFdlUAwjSEGep9ih8kfJilf6yN8V9zTbF5NC/1ZwLeGko3RUQepspPnGCRMFV51dY3Lb3hziboicrFz+rxQA=="
     },
+    "leaflet-easyprint": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/leaflet-easyprint/-/leaflet-easyprint-2.1.9.tgz",
+      "integrity": "sha1-7Tlcfh43elzdlE98wHIW/q6duDM=",
+      "requires": {
+        "dom-to-image": "^2.5.2",
+        "file-saver": "^1.3.3"
+      }
+    },
     "leaflet-gpx": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/leaflet-gpx/-/leaflet-gpx-1.5.0.tgz",

package.json

@@ -49,6 +49,7 @@
     "leaflet-control-custom": "^1.0.0",
     "leaflet-control-geocoder": "^1.13.0",
     "leaflet-defaulticon-compatibility": "^0.1.1",
+    "leaflet-easyprint": "^2.1.9",
     "leaflet-gpx": "^1.5.0",
     "leaflet-play": "^0.4.4",
     "leaflet-routing-machine": "^3.2.12",

src/components/LeafletMap/LMap.js

@@ -3,6 +3,7 @@ import './leaflet-map.css';
 import './vendor';
 import {t, setLanguage} from './languages';
 
+
 import maps from './maps.js';
 import lmapSidebar from './sidebar';
 import createElement from './LElement';
@@ -38,6 +39,7 @@ export class LMap {
         this.domID = id;
         this.options = options;
         this.mapElements = [];
+        this.zones = [];
         this.status = null;
         this.clusterGroup = L.markerClusterGroup();
 
@@ -69,6 +71,7 @@ export class LMap {
         if(this.options.routing) this.addRouting();
 
         this.addPlayBackControl();
+        this.addPrintControl();
     }
 
     setView(options){
@@ -166,6 +169,35 @@ export class LMap {
     }
     // ________________________________________________________
 
+    drawZone(name, coordinates){
+        let zone = L.polygon(coordinates, {name: name}).addTo(this.map);
+        this.zones.push(zone);
+    }
+
+    getZoneByName(name){
+        for( let i = 0; i < this.zones.length; i++){
+            let z = this.zones[i];
+            if( z.options.name === name) return z;
+        }
+        return null;
+    }
+
+    getAllZones(){
+        return this.zones;
+    }
+    
+    addPrintControl(){
+        L.easyPrint({
+            filename: 'map',
+            position: 'topleft',
+            sizeModes: ['Current', 'A4Portrait', 'A4Landscape'],
+            exportOnly: true,
+            hideControlContainer: true
+        }).addTo(this.map);
+    }
+
+    
+
     addElevation(){
         var hg = L.control.heightgraph({
             position: 'bottomright',

src/components/LeafletMap/leaflet-map.css

@@ -16,4 +16,8 @@
 
 .leaflet-control-routing-btn.open .leaflet-control-routing-icon::before{
     content: "\0058";
+}
+
+.leaflet-control-easyPrint .easyPrintHolder{
+    margin-top: -26px;
 }

src/components/LeafletMap/vendor.js

@@ -34,3 +34,4 @@ import './LPlayback/LeafletPlayback';
 import './LPlayback/playback_control';
 
 import 'leaflet-spin/leaflet.spin';
+import 'leaflet-easyprint/dist/bundle';

src/views/LMaps/mapfunctions.js

@@ -35,6 +35,17 @@ export default class MapFunctions extends React.Component{
         // this.positionMap.removeElement("0001");
         // this.positionMap.removeAllElements();
 
+        this.positionMap.drawZone('Zone', [
+            [46.0295228,5.9216256],[47.0295228,5.9216256],[47.0295228,8.9216256],[46.0295228,8.9216256]
+        ]);
+
+        var _zones = this.positionMap.getAllZones();
+        console.log('zones', _zones);
+
+        var _zone = this.positionMap.getZoneByName('Zone');
+        console.log('zone', _zone);
+
+
         var curStatus = _oneEl.getStatus();
         console.log('element status', curStatus);