<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.6" async defer ></script>
<script type="text/javascript" src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script type="text/javascript" src="https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script src="lib/leaflet.browser.print.js"></script>
<script src="lib/leaflet.browser.print.utils.js"></script>
<script src="lib/leaflet.browser.print.sizes.js"></script>
<script src="lib/leaflet.browser.print.min.js"></script>
<script src="lib/script.js"></script>
</head>
<body>
<div class="row map">
<div id="mapid"></div>
</div>
</body>
</html>
<script type="module">
var map;
var googleStreets = L.gridLayer.googleMutant({
maxZoom: 20,
type: 'roadmap',
});
map = L.map('mapid',{zoomControl : false}).setView(['-15.792253570362446',
'-59.63378906250001'], 3).addLayer(googleStreets);
L.control.scale({position: 'bottomright'}).addTo(map);
L.Control.BrowserPrint.Utils.registerLayer(
L.GridLayer.GoogleMutant,
"L.GridLayer.GoogleMutant",
function (layer,utils) {
return L.gridLayer.googleMutant(layer.options);
}
);
L.control.browserPrint({
documentTitle: "printImage",
printModes: [
L.control.browserPrint.mode.auto("Download PNG")
]
}).addTo(map);
map.on("browser-print-start", function(e){
L.control.scale({position: 'bottomright'}).addTo(e.printMap);
});
window.print = function () {
let node = document.querySelector(".grid-print-container");
return domtoimage
.toPng(node, { filter: node => { return node.src = encodeURI(node.src); }})
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = map.printControl.options.documentTitle || "exportedMap" + '.png';
link.href = dataUrl;
link.click();
});
};
</script>
/* Add your styles here */
#mapid {
height: 100%;
width: 100vw;
}
.map {
position: absolute;
top: 6em;
bottom: 0;
width: 100%;
left: 1em;
height: 500px;
}
// Add your code here
/**
MIT License http://www.opensource.org/licenses/mit-license.php
Author Igor Vladyka <igor.vladyka@gmail.com> (https://github.com/Igor-Vladyka/leaflet.browser.print)
**/
L.Control.BrowserPrint.Utils = {
_ignoreArray: [],
_cloneFactoryArray: [],
_cloneRendererArray: [],
_knownRenderers: {},
cloneOptions: function(options) {
var utils = this;
var retOptions = {};
for (var name in options) {
var item = options[name];
if (item && item.clone) {
retOptions[name] = item.clone();
} else if (item && item.onAdd) {
retOptions[name] = utils.cloneLayer(item);
} else {
retOptions[name] = item;
}
}
return retOptions;
},
cloneBasicOptionsWithoutLayers: function(options) {
var retOptions = {};
var optionNames = Object.getOwnPropertyNames(options);
if (optionNames.length) {
for (var i = 0; i < optionNames.length; i++) {
var optName = optionNames[i];
if (optName && optName != "layers") {
retOptions[optName] = options[optName];
}
}
return this.cloneOptions(retOptions);
}
return retOptions;
},
cloneInnerLayers: function (layer) {
var utils = this;
var layers = [];
layer.eachLayer(function (inner) {
var l = utils.cloneLayer(inner);
if (l) {
layers.push(l);
}
});
return layers;
},
initialize: function () {
this._knownRenderers = {};
// Renderers
this.registerRenderer(L.SVG, 'L.SVG');
this.registerRenderer(L.Canvas, 'L.Canvas');
this.registerLayer(L.TileLayer.WMS, 'L.TileLayer.WMS', function(layer, utils) { return L.tileLayer.wms(layer._url, utils.cloneOptions(layer.options)); });
this.registerLayer(L.TileLayer, 'L.TileLayer', function(layer, utils) { return L.tileLayer(layer._url, utils.cloneOptions(layer.options)); });
this.registerLayer(L.GridLayer, 'L.GridLayer', function(layer, utils) { return L.gridLayer(utils.cloneOptions(layer.options)); });
this.registerLayer(L.ImageOverlay, 'L.ImageOverlay', function(layer, utils) { return L.imageOverlay(layer._url, layer._bounds, utils.cloneOptions(layer.options)); });
this.registerLayer(L.Marker, 'L.Marker', function(layer, utils) { return L.marker(layer.getLatLng(), utils.cloneOptions(layer.options)); });
this.registerLayer(L.Popup, 'L.Popup', function(layer, utils) { return L.popup(utils.cloneOptions(layer.options)).setLatLng(layer.getLatLng()).setContent(layer.getContent()); });
this.registerLayer(L.Circle, 'L.Circle', function(layer, utils) { return L.circle(layer.getLatLng(), layer.getRadius(), utils.cloneOptions(layer.options)); });
this.registerLayer(L.CircleMarker, 'L.CircleMarker', function(layer, utils) { return L.circleMarker(layer.getLatLng(), utils.cloneOptions(layer.options)); });
this.registerLayer(L.Rectangle, 'L.Rectangle', function(layer, utils) { return L.rectangle(layer.getBounds(), utils.cloneOptions(layer.options)); });
this.registerLayer(L.Polygon, 'L.Polygon', function(layer, utils) { return L.polygon(layer.getLatLngs(), utils.cloneOptions(layer.options)); });
// MultiPolyline is removed in leaflet 1.0.0
this.registerLayer(L.MultiPolyline, 'L.MultiPolyline', function(layer, utils) { return L.polyline(layer.getLatLngs(), utils.cloneOptions(layer.options)); });
// MultiPolygon is removed in leaflet 1.0.0
this.registerLayer(L.MultiPolygon, 'L.MultiPolygon', function(layer, utils) { return L.multiPolygon(layer.getLatLngs(), utils.cloneOptions(layer.options)); });
this.registerLayer(L.Polyline, 'L.Polyline', function(layer, utils) { return L.polyline(layer.getLatLngs(), utils.cloneOptions(layer.options)); });
this.registerLayer(L.GeoJSON, 'L.GeoJSON', function(layer, utils) { return L.geoJson(layer.toGeoJSON(), utils.cloneOptions(layer.options)); });
this.registerIgnoreLayer(L.FeatureGroup, 'L.FeatureGroup');
this.registerIgnoreLayer(L.LayerGroup, 'L.LayerGroup');
// There is no point to clone tooltips here; L.tooltip(options);
this.registerLayer(L.Tooltip, 'L.Tooltip', function(){ return null; });
},
_register: function(array, type, identifier, builderFunction) {
if (type &&
!array.filter(function(l){ return l.identifier === identifier; }).length) {
array.push({
type: type,
identifier: identifier,
builder: builderFunction || function (layer) { return new type(layer.options); }
});
}
},
registerLayer: function(type, identifier, builderFunction) {
this._register(this._cloneFactoryArray, type, identifier, builderFunction);
},
registerRenderer: function(type, identifier, builderFunction) {
this._register(this._cloneRendererArray, type, identifier, builderFunction);
},
registerIgnoreLayer: function(type, identifier) {
this._register(this._ignoreArray, type, identifier);
},
cloneLayer: function(layer) {
if (!layer) return null;
// First we check if this layer is actual renderer
var renderer = this.__getRenderer(layer);
if (renderer) {
return renderer;
}
var factoryObject;
if (layer._group) { // Exceptional check for L.MarkerClusterGroup
factoryObject = this.__getFactoryObject(layer._group, true);
} else {
factoryObject = this.__getFactoryObject(layer);
}
// We clone and recreate layer if it's simple overlay
if (factoryObject) {
factoryObject = factoryObject.builder(layer, this);
}
return factoryObject;
},
getType: function(layer) {
if (!layer) return null;
var factoryObject = this.__getFactoryObject(layer);
if (factoryObject) {
factoryObject = factoryObject.identifier;
}
return factoryObject;
},
__getRenderer: function(oldRenderer) {
var renderer = this._knownRenderers[oldRenderer._leaflet_id];
if (!renderer) {
for (var i = 0; i < this._cloneRendererArray.length; i++) {
var factoryObject = this._cloneRendererArray[i];
if (oldRenderer instanceof factoryObject.type) {
this._knownRenderers[oldRenderer._leaflet_id] = factoryObject.builder(oldRenderer.options);
break;
}
}
renderer = this._knownRenderers[oldRenderer._leaflet_id];
}
return renderer;
},
__getFactoryObject: function (layer, skipIgnore) {
if (!skipIgnore) {
for (var i = 0; i < this._ignoreArray.length; i++) {
var ignoreObject = this._ignoreArray[i];
if (ignoreObject.type && layer instanceof ignoreObject.type) {
return null;
}
}
}
for (var i = 0; i < this._cloneFactoryArray.length; i++) {
var factoryObject = this._cloneFactoryArray[i];
if (factoryObject.type && layer instanceof factoryObject.type) {
return factoryObject;
}
}
for (var i = 0; i < this._cloneRendererArray.length; i++) {
var factoryObject = this._cloneRendererArray[i];
if (factoryObject.type && layer instanceof factoryObject.type) {
return null;
}
}
this.__unknownLayer__();
return null;
},
__unknownLayer__: function(){
console.warn('Unknown layer, cannot clone this layer. Leaflet version: ' + L.version);
console.info('For additional information please refer to documentation on: https://github.com/Igor-Vladyka/leaflet.browser.print.');
console.info('-------------------------------------------------------------------------------------------------------------------');
}
};
/**
MIT License http://www.opensource.org/licenses/mit-license.php
Author Igor Vladyka <igor.vladyka@gmail.com> (https://github.com/Igor-Vladyka/leaflet.browser.print)
**/
/* Portrait mode sizes in mm for 0 lvl*/
L.Control.BrowserPrint.Size = {
A: {
Width: 840,
Height: 1188
},
B: {
Width: 1000,
Height: 1414
},
C: {
Width: 916,
Height: 1296
},
D: {
Width: 770,
Height: 1090
},
LETTER: {
Width: 216,
Height: 279
},
HALFLETTER: {
Width: 140,
Height: 216
},
LEGAL: {
Width: 216,
Height: 356
},
JUNIORLEGAL: {
Width: 127,
Height: 203
},
TABLOID: {
Width: 279,
Height: 432
},
LEDGER: {
Width: 432,
Height: 279
}
};
L.Control.BrowserPrint.Mode = function(mode, title, pageSize, action, invalidateBounds) {
if (!mode) {
throw 'Print mode should be specified.';
}
this.Mode = mode;
this.Title = title || mode;
this.PageSize = (pageSize || 'A4').toUpperCase();
this.PageSeries = ["A", "B", "C", "D"].indexOf(this.PageSize[0]) != -1 ? this.PageSize[0] : "";
this.PageSeriesSize = this.PageSize.substring(this.PageSeries.length);
this.Action = action || function(context, element) {
return function() {
context['_print' + element.Mode](element);
};
};
this.InvalidateBounds = invalidateBounds;
};
L.Control.BrowserPrint.Mode.Landscape = "Landscape";
L.Control.BrowserPrint.Mode.Portrait = "Portrait";
L.Control.BrowserPrint.Mode.Auto = "Auto";
L.Control.BrowserPrint.Mode.Custom = "Custom";
L.Control.BrowserPrint.Mode.prototype.getPageMargin = function(type) {
var size = this.getPaperSize();
var marginInMm = ((size.Width + size.Height) / 39.9);
var result;
switch (type) {
case "mm":
result = marginInMm.toFixed(2) + "mm";
break;
case "in":
result = (marginInMm / 25.4).toFixed(2) + "in";
break;
default:
result = marginInMm;
break;
}
return result;
};
L.Control.BrowserPrint.Mode.prototype.getPaperSize = function(){
if (this.PageSeries) {
var series = L.Control.BrowserPrint.Size[this.PageSeries];
var w = series.Width;
var h = series.Height;
var switchSides = false;
if (this.PageSeriesSize) {
this.PageSeriesSize = +this.PageSeriesSize;
switchSides = this.PageSeriesSize % 2 === 1;
if (switchSides) {
w = w / (this.PageSeriesSize - 1 || 1);
h = h / (this.PageSeriesSize + 1);
} else {
w = w / this.PageSeriesSize;
h = h / this.PageSeriesSize;
}
}
return {
Width: switchSides ? h : w,
Height: switchSides ? w : h
};
} else {
var size = L.Control.BrowserPrint.Size[this.PageSeriesSize];
return {
Width: size.Width,
Height: size.Height
};
}
};
L.Control.BrowserPrint.Mode.prototype.getSize = function(){
var size = this.getPaperSize();
var margin = this.getPageMargin() * 2 * (window.devicePixelRatio || 1);
size.Width = Math.floor(size.Width - margin) + 'mm';
size.Height = Math.floor(size.Height - margin) + 'mm';
return size;
};
L.control.browserPrint.mode = function(mode, title, type, action, invalidateBounds){
return new L.Control.BrowserPrint.Mode(mode, title, type, action, invalidateBounds);
}
L.control.browserPrint.mode.portrait = function(title, pageSize, action) {
return L.control.browserPrint.mode(L.Control.BrowserPrint.Mode.Portrait, title, pageSize, action, false);
};
L.control.browserPrint.mode.landscape = function(title, pageSize, action) {
return L.control.browserPrint.mode(L.Control.BrowserPrint.Mode.Landscape, title, pageSize, action, false);
};
L.control.browserPrint.mode.auto = function(title, pageSize, action) {
return L.control.browserPrint.mode(L.Control.BrowserPrint.Mode.Auto, title, pageSize, action, true);
};
L.control.browserPrint.mode.custom = function(title, pageSize, action) {
return L.control.browserPrint.mode(L.Control.BrowserPrint.Mode.Custom, title, pageSize, action, true);
};
/**
MIT License http://www.opensource.org/licenses/mit-license.php
Author Igor Vladyka <igor.vladyka@gmail.com> (https://github.com/Igor-Vladyka/leaflet.browser.print)
**/
L.Control.BrowserPrint = L.Control.extend({
options: {
title: 'Print map',
documentTitle: '',
position: 'topleft',
printLayer: null,
printModes: ["Portrait", "Landscape", "Auto", "Custom"],
closePopupsOnPrint: true,
contentSelector: "[leaflet-browser-print-content]",
pagesSelector: "[leaflet-browser-print-pages]",
manualMode: false,
customPrintStyle: { color: "gray", dashArray: '5, 10', pane: "customPrintPane" }
},
onAdd: function (map) {
if (this.options.customPrintStyle.pane && !map.getPane(this.options.customPrintStyle.pane)) {
map.createPane(this.options.customPrintStyle.pane).style.zIndex = 9999;
}
var container = L.DomUtil.create('div', 'leaflet-control-browser-print leaflet-bar leaflet-control');
L.DomEvent.disableClickPropagation(container);
this._appendControlStyles(container);
if (this.options.printModes.length > 1) {
L.DomEvent.addListener(container, 'mouseover', this._displayPageSizeButtons, this);
L.DomEvent.addListener(container, 'mouseout', this._hidePageSizeButtons, this);
} else {
container.style.cursor = "pointer";
}
if (this.options.position.indexOf("left") > 0) {
this._createIcon(container);
this._createMenu(container);
} else {
this._createMenu(container);
this._createIcon(container);
}
map.printControl = this; // Make control available from the map object itself;
return container;
},
_createIcon: function (container) {
this.__link__ = L.DomUtil.create('a', '', container);
this.__link__.className = "leaflet-browser-print";
if (this.options.title) {
this.__link__.title = this.options.title;
}
return this.__link__;
},
_createMenu: function (container) {
var domPrintModes = [];
for (var i = 0; i < this.options.printModes.length; i++) {
var mode = this.options.printModes[i];
/*
Mode:
Mode: Portrait/Landscape/Auto/Custom
Title: 'Portrait'/'Landscape'/'Auto'/'Custom'
PageSize: 'A3'/'A4'
Action: '_printPortrait'/...
InvalidateBounds: true/false
*/
if (mode.length) {
var key = mode[0].toUpperCase() + mode.substring(1).toLowerCase();
mode = L.control.browserPrint.mode[mode.toLowerCase()](this._getDefaultTitle(key));
} else if (mode instanceof L.Control.BrowserPrint.Mode) {
// Looks like everythin is fine.
} else {
throw "Invalid Print Mode. Can't construct logic to print current map."
}
if (this.options.printModes.length == 1) {
mode.Element = container;
} else {
mode.Element = L.DomUtil.create('li', 'browser-print-mode', L.DomUtil.create('ul', 'browser-print-holder', container));
mode.Element.innerHTML = mode.Title;
}
L.DomEvent.addListener(mode.Element, 'click', mode.Action(this, mode), this);
domPrintModes.push(mode);
}
this.options.printModes = domPrintModes;
},
_getDefaultTitle: function(key) {
return this.options.printModesNames && this.options.printModesNames[key] || key;
},
_displayPageSizeButtons: function() {
if (this.options.position.indexOf("left") > 0) {
this.__link__.style.borderTopRightRadius = "0px";
this.__link__.style.borderBottomRightRadius = "0px";
} else {
this.__link__.style.borderTopLeftRadius = "0px";
this.__link__.style.borderBottomLeftRadius = "0px";
}
this.options.printModes.forEach(function(mode){
mode.Element.style.display = "inline-block";
});
},
_hidePageSizeButtons: function () {
if (this.options.position.indexOf("left") > 0) {
this.__link__.style.borderTopRightRadius = "";
this.__link__.style.borderBottomRightRadius = "";
} else {
this.__link__.style.borderTopLeftRadius = "";
this.__link__.style.borderBottomLeftRadius = "";
}
this.options.printModes.forEach(function(mode){
mode.Element.style.display = "";
});
},
_getMode: function(expectedOrientation, mode) {
return new L.control.browserPrint.mode(expectedOrientation, mode.Title, mode.PageSize, mode.Action, mode.InvalidateBounds);
},
_printLandscape: function (mode) {
this._addPrintClassToContainer(this._map, "leaflet-browser-print--landscape");
this._print(mode);
},
_printPortrait: function (mode) {
this._addPrintClassToContainer(this._map, "leaflet-browser-print--portrait");
this._print(mode);
},
_printAuto: function (mode) {
this._addPrintClassToContainer(this._map, "leaflet-browser-print--auto");
var autoBounds = this._getBoundsForAllVisualLayers();
var orientation = this._getPageSizeFromBounds(autoBounds);
this._print(this._getMode(orientation, mode), autoBounds);
},
_printCustom: function (mode) {
this._addPrintClassToContainer(this._map, "leaflet-browser-print--custom");
this.options.custom = { mode: mode};
this._map.on('mousedown', this._startAutoPoligon, this);
},
_addPrintClassToContainer: function (map, printClassName) {
var container = map.getContainer();
if (container.className.indexOf(printClassName) === -1) {
container.className += " " + printClassName;
}
},
_removePrintClassFromContainer: function (map, printClassName) {
var container = map.getContainer();
if (container.className && container.className.indexOf(printClassName) > -1) {
container.className = container.className.replace(" " + printClassName, "");
}
},
_startAutoPoligon: function (e) {
e.originalEvent.preventDefault();
e.originalEvent.stopPropagation();
this._map.dragging.disable();
this.options.custom.start = e.latlng;
this._map.off('mousedown', this._startAutoPoligon, this);
this._map.on('mousemove', this._moveAutoPoligon, this);
this._map.on('mouseup', this._endAutoPoligon, this);
},
_moveAutoPoligon: function (e) {
if (this.options.custom) {
e.originalEvent.preventDefault();
e.originalEvent.stopPropagation();
if (this.options.custom.rectangle) {
this.options.custom.rectangle.setBounds(L.latLngBounds(this.options.custom.start, e.latlng));
} else {
this.options.custom.rectangle = L.rectangle([this.options.custom.start, e.latlng], this.options.customPrintStyle);
this.options.custom.rectangle.addTo(this._map);
}
}
},
_endAutoPoligon: function (e) {
e.originalEvent.preventDefault();
e.originalEvent.stopPropagation();
this._map.off('mousemove', this._moveAutoPoligon, this);
this._map.off('mouseup', this._endAutoPoligon, this);
this._map.dragging.enable();
if (this.options.custom && this.options.custom.rectangle) {
var autoBounds = this.options.custom.rectangle.getBounds();
this._map.removeLayer(this.options.custom.rectangle);
var orientation = this._getPageSizeFromBounds(autoBounds);
this._print(this._getMode(orientation, this.options.custom.mode), autoBounds);
delete this.options.custom;
} else {
this._clearPrint();
}
},
_getPageSizeFromBounds: function(bounds) {
var height = Math.abs(bounds.getNorth() - bounds.getSouth());
var width = Math.abs(bounds.getEast() - bounds.getWest());
if (height > width) {
return "Portrait";
} else {
return "Landscape";
}
},
_setupPrintPagesWidth: function(pagesContainer, size, pageOrientation) {
pagesContainer.style.width = pageOrientation === "Landscape" ? size.Height : size.Width;
},
_setupPrintMapHeight: function(mapContainer, size, pageOrientation) {
mapContainer.style.height = pageOrientation === "Landscape" ? size.Width : size.Height;
},
/* Intended to cancel next printing*/
cancel: function(cancelNextPrinting){
this.cancelNextPrinting = cancelNextPrinting;
},
print: function(pageMode) {
pageMode.Action(this, pageMode)();
},
_print: function (printMode, autoBounds) {
this._map.fire(L.Control.BrowserPrint.Event.PrintInit, { mode: printMode });
L.Control.BrowserPrint.Utils.initialize();
var self = this;
var mapContainer = this._map.getContainer();
var pageOrientation = printMode.Mode;
var origins = {
bounds: autoBounds || this._map.getBounds(),
width: mapContainer.style.width,
height: mapContainer.style.height,
documentTitle: document.title,
printLayer: L.Control.BrowserPrint.Utils.cloneLayer(this.options.printLayer),
panes: []
};
var mapPanes = this._map.getPanes();
for (var pane in mapPanes) {
origins.panes.push({name: pane, container: undefined});
}
origins.printObjects = this._getPrintObjects(origins.printLayer);
this._map.fire(L.Control.BrowserPrint.Event.PrePrint, { printLayer: origins.printLayer, printObjects: origins.printObjects, pageOrientation: pageOrientation, printMode: printMode.Mode, pageBounds: origins.bounds});
if (this.cancelNextPrinting) {
delete this.cancelNextPrinting;
return;
}
var overlay = this._addPrintMapOverlay(printMode.PageSize, printMode.getPageMargin("mm"), printMode.getSize(), pageOrientation, origins);
if (this.options.documentTitle) {
document.title = this.options.documentTitle;
}
this._map.fire(L.Control.BrowserPrint.Event.PrintStart, { printLayer: origins.printLayer, printMap: overlay.map, printObjects: overlay.objects });
if (printMode.InvalidateBounds) {
overlay.map.fitBounds(origins.bounds);
overlay.map.invalidateSize({reset: true, animate: false, pan: false});
} else {
overlay.map.setView(this._map.getCenter(), this._map.getZoom());
}
var interval = setInterval(function(){
if (!self._isTilesLoading(overlay.map)) {
clearInterval(interval);
if (self.options.manualMode) {
self._setupManualPrintButton(overlay.map, origins, overlay.objects);
} else {
self._completePrinting(overlay.map, origins, overlay.objects);
}
}
}, 50);
},
_completePrinting: function (overlayMap, origins, printObjects) {
var self = this;
setTimeout(function(){
self._map.fire(L.Control.BrowserPrint.Event.Print, { printLayer: origins.printLayer, printMap: overlayMap, printObjects: printObjects });
var printPromise = window.print();
if (printPromise) {
Promise.all([printPromise]).then(function(){
self._printEnd(origins);
self._map.fire(L.Control.BrowserPrint.Event.PrintEnd, { printLayer: origins.printLayer, printMap: overlayMap, printObjects: printObjects });
})
} else {
self._printEnd(origins);
self._map.fire(L.Control.BrowserPrint.Event.PrintEnd, { printLayer: origins.printLayer, printMap: overlayMap, printObjects: printObjects });
}
}, 1000);
},
_getBoundsForAllVisualLayers: function () {
var fitBounds = null;
// Getting all layers without URL -> not tiles.
for (var layerId in this._map._layers){
var layer = this._map._layers[layerId];
if (!layer._url && !layer._mutant) {
if (fitBounds) {
if (layer.getBounds) {
fitBounds.extend(layer.getBounds());
} else if(layer.getLatLng){
fitBounds.extend(layer.getLatLng());
}
} else {
if (layer.getBounds) {
fitBounds = layer.getBounds();
} else if(layer.getLatLng){
fitBounds = L.latLngBounds(layer.getLatLng(), layer.getLatLng());
}
}
}
}
if (!fitBounds) {
fitBounds = this._map.getBounds();
}
return fitBounds;
},
_clearPrint: function () {
this._removePrintClassFromContainer(this._map, "leaflet-browser-print--landscape");
this._removePrintClassFromContainer(this._map, "leaflet-browser-print--portrait");
this._removePrintClassFromContainer(this._map, "leaflet-browser-print--auto");
this._removePrintClassFromContainer(this._map, "leaflet-browser-print--custom");
},
_printEnd: function (origins) {
this._clearPrint();
document.body.removeChild(this.__overlay__);
this.__overlay__ = null;
document.body.className = document.body.className.replace(" leaflet--printing", "");
if (this.options.documentTitle) {
document.title = origins.documentTitle;
}
this._map.invalidateSize({reset: true, animate: false, pan: false});
},
_getPrintObjects: function(printLayer) {
var printObjects = {};
for (var id in this._map._layers){
var layer = this._map._layers[id];
if (!printLayer || !layer._url || layer instanceof L.TileLayer.WMS) {
var type = L.Control.BrowserPrint.Utils.getType(layer);
if (type) {
if (!printObjects[type]) {
printObjects[type] = [];
}
printObjects[type].push(layer);
}
}
}
return printObjects;
},
_addPrintCss: function (pageSize, pageMargin, pageOrientation) {
var printStyleSheet = document.createElement('style');
printStyleSheet.className = "leaflet-browser-print-css";
printStyleSheet.setAttribute('type', 'text/css');
printStyleSheet.innerHTML = ' @media print { .leaflet-popup-content-wrapper, .leaflet-popup-tip { box-shadow: none; }';
printStyleSheet.innerHTML += ' .leaflet-browser-print--manualMode-button { display: none; }';
printStyleSheet.innerHTML += ' * { -webkit-print-color-adjust: exact!important; printer-colors: exact!important; color-adjust: exact!important; }';
if (pageMargin) {
printStyleSheet.innerHTML += ' @page { margin: ' + pageMargin + '; }';
}
printStyleSheet.innerHTML += ' @page :first { page-break-after: always; }';
switch (pageOrientation) {
case "Landscape":
printStyleSheet.innerText += " @page { size : " + pageSize + " landscape; }";
break;
default:
case "Portrait":
printStyleSheet.innerText += " @page { size : " + pageSize + " portrait; }";
break;
}
return printStyleSheet;
},
_appendControlStyles: function (container) {
var printControlStyleSheet = document.createElement('style');
printControlStyleSheet.setAttribute('type', 'text/css');
printControlStyleSheet.innerHTML += " .leaflet-control-browser-print { display: flex; } .leaflet-control-browser-print a { background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gcCCi8Vjp+aNAAAAGhJREFUOMvFksENgDAMA68RC7BBN+Cf/ZU33QAmYAT6BolAGxB+RrrIsg1BpfNBVXcPMLMDI/ytpKozMHWwK7BJJ7yYWQbGdBea9wTIkRDzKy0MT7r2NiJACRgotCzxykFI34QY2Ea7KmtxGJ+uX4wfAAAAAElFTkSuQmCC') no-repeat 5px; background-size: 16px 16px; display: block; border-radius: 2px; }";
printControlStyleSheet.innerHTML += " .leaflet-control-browser-print a.leaflet-browser-print { background-position-x: 7px; }";
printControlStyleSheet.innerHTML += " .browser-print-holder { margin: 0px; padding: 0px; list-style: none; white-space: nowrap; } .browser-print-holder-left li:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .browser-print-holder-right li:first-child { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }";
printControlStyleSheet.innerHTML += " .browser-print-mode { display: none; background-color: #919187; color: #FFF; font: 11px/19px 'Helvetica Neue', Arial, Helvetica, sans-serif; text-decoration: none; padding: 4px 10px; text-align: center; } .browser-print-mode { padding: 6px 10px; } .browser-print-mode:hover { background-color: #757570; cursor: pointer; }";
printControlStyleSheet.innerHTML += " .leaflet-browser-print--custom, .leaflet-browser-print--custom path { cursor: crosshair!important; }";
printControlStyleSheet.innerHTML += " .leaflet-print-overlay { width: 100%; height:auto; min-height: 100%; position: absolute; top: 0; background-color: white!important; left: 0; z-index: 1001; display: block!important; } ";
printControlStyleSheet.innerHTML += " .leaflet--printing { height:auto; min-height: 100%; margin: 0px!important; padding: 0px!important; } body.leaflet--printing > * { display: none; box-sizing: border-box; }";
printControlStyleSheet.innerHTML += " .grid-print-container { grid-template: 1fr / 1fr; box-sizing: border-box; } .grid-map-print { grid-row: 1; grid-column: 1; } body.leaflet--printing .grid-print-container [leaflet-browser-print-content]:not(style) { display: unset!important; }";
printControlStyleSheet.innerHTML += " .pages-print-container { box-sizing: border-box; }";
container.appendChild(printControlStyleSheet);
},
_setupManualPrintButton: function(map, origins, objects) {
var manualPrintButton = document.createElement('button');
manualPrintButton.className = "leaflet-browser-print--manualMode-button";
manualPrintButton.innerHTML = "Print";
manualPrintButton.style.position = "absolute";
manualPrintButton.style.top = "20px";
manualPrintButton.style.right = "20px";
this.__overlay__.appendChild(manualPrintButton);
var self = this;
L.DomEvent.addListener(manualPrintButton, 'click', function () {
self._completePrinting(map, origins, objects);
});
},
_addPrintMapOverlay: function (pageSize, pageMargin, printSize, pageOrientation, origins) {
this.__overlay__ = document.createElement("div");
this.__overlay__.className = this._map.getContainer().className + " leaflet-print-overlay";
document.body.appendChild(this.__overlay__);
this.__overlay__.appendChild(this._addPrintCss(pageSize, pageMargin, pageOrientation));
var gridContainer = document.createElement("div");
gridContainer.className = "grid-print-container";
gridContainer.style.width = "100%";
gridContainer.style.display = "grid";
this._setupPrintMapHeight(gridContainer, printSize, pageOrientation);
if (this.options.contentSelector) {
var content = document.querySelectorAll(this.options.contentSelector);
if (content && content.length) {
for (var i = 0; i < content.length; i++) {
var printContentItem = content[i].cloneNode(true);
gridContainer.appendChild(printContentItem);
}
}
}
var isMultipage = this.options.pagesSelector && document.querySelectorAll(this.options.pagesSelector).length;
if (isMultipage) {
var pagesContainer = document.createElement("div");
pagesContainer.className = "pages-print-container";
pagesContainer.style.margin = "0!important";
this._setupPrintPagesWidth(pagesContainer, printSize, pageOrientation);
this.__overlay__.appendChild(pagesContainer);
pagesContainer.appendChild(gridContainer);
var pages = document.querySelectorAll(this.options.pagesSelector);
if (pages && pages.length) {
for (var i = 0; i < pages.length; i++) {
var printPageItem = pages[i].cloneNode(true);
pagesContainer.appendChild(printPageItem);
}
}
} else {
this._setupPrintPagesWidth(gridContainer, printSize, pageOrientation);
this.__overlay__.appendChild(gridContainer);
}
var overlayMapDom = document.createElement("div");
overlayMapDom.id = this._map.getContainer().id + "-print";
overlayMapDom.className = "grid-map-print";
overlayMapDom.style.width = "100%";
overlayMapDom.style.height = "100%";
gridContainer.appendChild(overlayMapDom);
document.body.className += " leaflet--printing";
var newMapOptions = L.Control.BrowserPrint.Utils.cloneBasicOptionsWithoutLayers(this._map.options);
newMapOptions.maxZoom = this._map.getMaxZoom();
return this._setupPrintMap(overlayMapDom.id, newMapOptions, origins.printLayer, origins.printObjects, origins.panes);
},
_setupPrintMap: function (id, options, printLayer, printObjects, panes) {
options.zoomControl = false;
options.dragging = false;
options.zoomAnimation = false;
options.fadeAnimation = false;
options.markerZoomAnimation = false;
options.keyboard = false;
options.scrollWheelZoom = false;
options.tap = false;
options.touchZoom = false;
var overlayMap = L.map(id, options);
if (printLayer) {
printLayer.addTo(overlayMap);
}
panes.forEach(function(p) { overlayMap.createPane(p.name, p.container); });
var clones = {};
for (var type in printObjects){
var closePopupsOnPrint = this.options.closePopupsOnPrint;
var popupsToOpen = [];
printObjects[type] = printObjects[type].map(function(pLayer){
var clone = L.Control.BrowserPrint.Utils.cloneLayer(pLayer);
if (clone) {
/* Workaround for apropriate handling of popups. */
if (pLayer instanceof L.Popup){
if(!pLayer.isOpen) {
pLayer.isOpen = function () { return this._isOpen; };
}
if (pLayer.isOpen() && !closePopupsOnPrint) {
popupsToOpen.push({source: pLayer._source, popup: clone});
}
} else {
clone.addTo(overlayMap);
}
clones[pLayer._leaflet_id] = clone;
if (pLayer instanceof L.Layer) {
var tooltip = pLayer.getTooltip();
if (tooltip) {
clone.bindTooltip(tooltip.getContent(), tooltip.options);
if (pLayer.isTooltipOpen()) {
clone.openTooltip(tooltip.getLatLng());
}
}
}
return clone;
}
});
}
for (var p = 0; p < popupsToOpen.length; p++) {
var popupModel = popupsToOpen[p];
if (popupModel.source) {
var element = clones[popupModel.source._leaflet_id];
if (element && element.bindPopup && element.openPopup) {
clones[popupModel.source._leaflet_id].bindPopup(popupModel.popup).openPopup(popupModel.popup.getLatLng());
}
}
}
return {map: overlayMap, objects: printObjects};
},
// Get all layers that is tile layers and is still loading;
_isTilesLoading: function(overlayMap){
var isLoading = false;
var mapMajorVersion = parseFloat(L.version);
if (mapMajorVersion > 1) {
isLoading = this._getLoadingLayers(overlayMap);
} else {
isLoading = overlayMap._tilesToLoad || overlayMap._tileLayersToLoad;
}
return isLoading;
},
_getLoadingLayers: function(map) {
for (var l in map._layers) {
var layer = map._layers[l];
if ((layer._url || layer._mutant) && layer._loading) {
return true;
}
}
return false;
}
});
L.Control.BrowserPrint.Event = {
PrintInit: 'browser-print-init',
PrePrint: 'browser-pre-print',
PrintStart: 'browser-print-start',
Print: 'browser-print',
PrintEnd: 'browser-print-end'
},
L.control.browserPrint = function(options) {
if (!options || !options.printModes) {
options = options || {};
options.printModes = [
L.control.browserPrint.mode.portrait(),
L.control.browserPrint.mode.landscape(),
L.control.browserPrint.mode.auto(),
L.control.browserPrint.mode.custom()
]
}
if (options && options.printModes && (!options.printModes.filter || !options.printModes.length)) {
throw "Please specify valid print modes for Print action. Example: printModes: [L.control.browserPrint.mode.portrait(), L.control.browserPrint.mode.auto('Automatico'), 'Custom']";
}
if (options.printModesNames) {
console.warn("'printModesNames' option is obsolete. Please use 'L.control.browserPrint.mode.*(/*Title*/)' shortcut instead. Please check latest release and documentation.");
}
return new L.Control.BrowserPrint(options);
};
/*!
*
* leaflet.browser.print - v1.0.5 (https://github.com/Igor-Vladyka/leaflet.browser.print)
* A leaflet plugin which allows users to print the map directly from the browser
*
* MIT (http://www.opensource.org/licenses/mit-license.php)
* (c) 2020 Igor Vladyka <igor.vladyka@gmail.com> (https://github.com/Igor-Vladyka/)
*
*/!function(t){var e={};function r(n){if(e[n])return e[n].exports;var i=e[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)r.d(n,i,function(e){return t[e]}.bind(null,i));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,r){r(1),r(2),t.exports=r(3)},function(t,e){L.Control.BrowserPrint=L.Control.extend({options:{title:"Print map",documentTitle:"",position:"topleft",printLayer:null,printModes:["Portrait","Landscape","Auto","Custom"],closePopupsOnPrint:!0,contentSelector:"[leaflet-browser-print-content]",pagesSelector:"[leaflet-browser-print-pages]",manualMode:!1,customPrintStyle:{color:"gray",dashArray:"5, 10",pane:"customPrintPane"}},onAdd:function(t){this.options.customPrintStyle.pane&&!t.getPane(this.options.customPrintStyle.pane)&&(t.createPane(this.options.customPrintStyle.pane).style.zIndex=9999);var e=L.DomUtil.create("div","leaflet-control-browser-print leaflet-bar leaflet-control");return L.DomEvent.disableClickPropagation(e),this._appendControlStyles(e),this.options.printModes.length>1?(L.DomEvent.addListener(e,"mouseover",this._displayPageSizeButtons,this),L.DomEvent.addListener(e,"mouseout",this._hidePageSizeButtons,this)):e.style.cursor="pointer",this.options.position.indexOf("left")>0?(this._createIcon(e),this._createMenu(e)):(this._createMenu(e),this._createIcon(e)),t.printControl=this,e},_createIcon:function(t){return this.__link__=L.DomUtil.create("a","",t),this.__link__.className="leaflet-browser-print",this.options.title&&(this.__link__.title=this.options.title),this.__link__},_createMenu:function(t){for(var e=[],r=0;r<this.options.printModes.length;r++){var n=this.options.printModes[r];if(n.length){var i=n[0].toUpperCase()+n.substring(1).toLowerCase();n=L.control.browserPrint.mode[n.toLowerCase()](this._getDefaultTitle(i))}else if(!(n instanceof L.Control.BrowserPrint.Mode))throw"Invalid Print Mode. Can't construct logic to print current map.";1==this.options.printModes.length?n.Element=t:(n.Element=L.DomUtil.create("li","browser-print-mode",L.DomUtil.create("ul","browser-print-holder",t)),n.Element.innerHTML=n.Title),L.DomEvent.addListener(n.Element,"click",n.Action(this,n),this),e.push(n)}this.options.printModes=e},_getDefaultTitle:function(t){return this.options.printModesNames&&this.options.printModesNames[t]||t},_displayPageSizeButtons:function(){this.options.position.indexOf("left")>0?(this.__link__.style.borderTopRightRadius="0px",this.__link__.style.borderBottomRightRadius="0px"):(this.__link__.style.borderTopLeftRadius="0px",this.__link__.style.borderBottomLeftRadius="0px"),this.options.printModes.forEach((function(t){t.Element.style.display="inline-block"}))},_hidePageSizeButtons:function(){this.options.position.indexOf("left")>0?(this.__link__.style.borderTopRightRadius="",this.__link__.style.borderBottomRightRadius=""):(this.__link__.style.borderTopLeftRadius="",this.__link__.style.borderBottomLeftRadius=""),this.options.printModes.forEach((function(t){t.Element.style.display=""}))},_getMode:function(t,e){return new L.control.browserPrint.mode(t,e.Title,e.PageSize,e.Action,e.InvalidateBounds)},_printLandscape:function(t){this._addPrintClassToContainer(this._map,"leaflet-browser-print--landscape"),this._print(t)},_printPortrait:function(t){this._addPrintClassToContainer(this._map,"leaflet-browser-print--portrait"),this._print(t)},_printAuto:function(t){this._addPrintClassToContainer(this._map,"leaflet-browser-print--auto");var e=this._getBoundsForAllVisualLayers(),r=this._getPageSizeFromBounds(e);this._print(this._getMode(r,t),e)},_printCustom:function(t){this._addPrintClassToContainer(this._map,"leaflet-browser-print--custom"),this.options.custom={mode:t},this._map.on("mousedown",this._startAutoPoligon,this)},_addPrintClassToContainer:function(t,e){var r=t.getContainer();-1===r.className.indexOf(e)&&(r.className+=" "+e)},_removePrintClassFromContainer:function(t,e){var r=t.getContainer();r.className&&r.className.indexOf(e)>-1&&(r.className=r.className.replace(" "+e,""))},_startAutoPoligon:function(t){t.originalEvent.preventDefault(),t.originalEvent.stopPropagation(),this._map.dragging.disable(),this.options.custom.start=t.latlng,this._map.off("mousedown",this._startAutoPoligon,this),this._map.on("mousemove",this._moveAutoPoligon,this),this._map.on("mouseup",this._endAutoPoligon,this)},_moveAutoPoligon:function(t){this.options.custom&&(t.originalEvent.preventDefault(),t.originalEvent.stopPropagation(),this.options.custom.rectangle?this.options.custom.rectangle.setBounds(L.latLngBounds(this.options.custom.start,t.latlng)):(this.options.custom.rectangle=L.rectangle([this.options.custom.start,t.latlng],this.options.customPrintStyle),this.options.custom.rectangle.addTo(this._map)))},_endAutoPoligon:function(t){if(t.originalEvent.preventDefault(),t.originalEvent.stopPropagation(),this._map.off("mousemove",this._moveAutoPoligon,this),this._map.off("mouseup",this._endAutoPoligon,this),this._map.dragging.enable(),this.options.custom&&this.options.custom.rectangle){var e=this.options.custom.rectangle.getBounds();this._map.removeLayer(this.options.custom.rectangle);var r=this._getPageSizeFromBounds(e);this._print(this._getMode(r,this.options.custom.mode),e),delete this.options.custom}else this._clearPrint()},_getPageSizeFromBounds:function(t){return Math.abs(t.getNorth()-t.getSouth())>Math.abs(t.getEast()-t.getWest())?"Portrait":"Landscape"},_setupPrintPagesWidth:function(t,e,r){t.style.width="Landscape"===r?e.Height:e.Width},_setupPrintMapHeight:function(t,e,r){t.style.height="Landscape"===r?e.Width:e.Height},cancel:function(t){this.cancelNextPrinting=t},print:function(t){t.Action(this,t)()},_print:function(t,e){this._map.fire(L.Control.BrowserPrint.Event.PrintInit,{mode:t}),L.Control.BrowserPrint.Utils.initialize();var r=this,n=this._map.getContainer(),i=t.Mode,o={bounds:e||this._map.getBounds(),width:n.style.width,height:n.style.height,documentTitle:document.title,printLayer:L.Control.BrowserPrint.Utils.cloneLayer(this.options.printLayer),panes:[]},s=this._map.getPanes();for(var a in s)o.panes.push({name:a,container:void 0});if(o.printObjects=this._getPrintObjects(o.printLayer),this._map.fire(L.Control.BrowserPrint.Event.PrePrint,{printLayer:o.printLayer,printObjects:o.printObjects,pageOrientation:i,printMode:t.Mode,pageBounds:o.bounds}),this.cancelNextPrinting)delete this.cancelNextPrinting;else{var l=this._addPrintMapOverlay(t.PageSize,t.getPageMargin("mm"),t.getSize(),i,o);this.options.documentTitle&&(document.title=this.options.documentTitle),this._map.fire(L.Control.BrowserPrint.Event.PrintStart,{printLayer:o.printLayer,printMap:l.map,printObjects:l.objects}),t.InvalidateBounds?(l.map.fitBounds(o.bounds),l.map.invalidateSize({reset:!0,animate:!1,pan:!1})):l.map.setView(this._map.getCenter(),this._map.getZoom());var p=setInterval((function(){r._isTilesLoading(l.map)||(clearInterval(p),r.options.manualMode?r._setupManualPrintButton(l.map,o,l.objects):r._completePrinting(l.map,o,l.objects))}),50)}},_completePrinting:function(t,e,r){var n=this;setTimeout((function(){n._map.fire(L.Control.BrowserPrint.Event.Print,{printLayer:e.printLayer,printMap:t,printObjects:r});var i=window.print();i?Promise.all([i]).then((function(){n._printEnd(e),n._map.fire(L.Control.BrowserPrint.Event.PrintEnd,{printLayer:e.printLayer,printMap:t,printObjects:r})})):(n._printEnd(e),n._map.fire(L.Control.BrowserPrint.Event.PrintEnd,{printLayer:e.printLayer,printMap:t,printObjects:r}))}),1e3)},_getBoundsForAllVisualLayers:function(){var t=null;for(var e in this._map._layers){var r=this._map._layers[e];r._url||r._mutant||(t?r.getBounds?t.extend(r.getBounds()):r.getLatLng&&t.extend(r.getLatLng()):r.getBounds?t=r.getBounds():r.getLatLng&&(t=L.latLngBounds(r.getLatLng(),r.getLatLng())))}return t||(t=this._map.getBounds()),t},_clearPrint:function(){this._removePrintClassFromContainer(this._map,"leaflet-browser-print--landscape"),this._removePrintClassFromContainer(this._map,"leaflet-browser-print--portrait"),this._removePrintClassFromContainer(this._map,"leaflet-browser-print--auto"),this._removePrintClassFromContainer(this._map,"leaflet-browser-print--custom")},_printEnd:function(t){this._clearPrint(),document.body.removeChild(this.__overlay__),this.__overlay__=null,document.body.className=document.body.className.replace(" leaflet--printing",""),this.options.documentTitle&&(document.title=t.documentTitle),this._map.invalidateSize({reset:!0,animate:!1,pan:!1})},_getPrintObjects:function(t){var e={};for(var r in this._map._layers){var n=this._map._layers[r];if(!t||!n._url||n instanceof L.TileLayer.WMS){var i=L.Control.BrowserPrint.Utils.getType(n);i&&(e[i]||(e[i]=[]),e[i].push(n))}}return e},_addPrintCss:function(t,e,r){var n=document.createElement("style");switch(n.className="leaflet-browser-print-css",n.setAttribute("type","text/css"),n.innerHTML=" @media print { .leaflet-popup-content-wrapper, .leaflet-popup-tip { box-shadow: none; }",n.innerHTML+=" .leaflet-browser-print--manualMode-button { display: none; }",n.innerHTML+=" * { -webkit-print-color-adjust: exact!important; printer-colors: exact!important; color-adjust: exact!important; }",e&&(n.innerHTML+=" @page { margin: "+e+"; }"),n.innerHTML+=" @page :first { page-break-after: always; }",r){case"Landscape":n.innerText+=" @page { size : "+t+" landscape; }";break;default:case"Portrait":n.innerText+=" @page { size : "+t+" portrait; }"}return n},_appendControlStyles:function(t){var e=document.createElement("style");e.setAttribute("type","text/css"),e.innerHTML+=" .leaflet-control-browser-print { display: flex; } .leaflet-control-browser-print a { background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gcCCi8Vjp+aNAAAAGhJREFUOMvFksENgDAMA68RC7BBN+Cf/ZU33QAmYAT6BolAGxB+RrrIsg1BpfNBVXcPMLMDI/ytpKozMHWwK7BJJ7yYWQbGdBea9wTIkRDzKy0MT7r2NiJACRgotCzxykFI34QY2Ea7KmtxGJ+uX4wfAAAAAElFTkSuQmCC') no-repeat 5px; background-size: 16px 16px; display: block; border-radius: 2px; }",e.innerHTML+=" .leaflet-control-browser-print a.leaflet-browser-print { background-position-x: 7px; }",e.innerHTML+=" .browser-print-holder { margin: 0px; padding: 0px; list-style: none; white-space: nowrap; } .browser-print-holder-left li:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .browser-print-holder-right li:first-child { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }",e.innerHTML+=" .browser-print-mode { display: none; background-color: #919187; color: #FFF; font: 11px/19px 'Helvetica Neue', Arial, Helvetica, sans-serif; text-decoration: none; padding: 4px 10px; text-align: center; } .browser-print-mode { padding: 6px 10px; } .browser-print-mode:hover { background-color: #757570; cursor: pointer; }",e.innerHTML+=" .leaflet-browser-print--custom, .leaflet-browser-print--custom path { cursor: crosshair!important; }",e.innerHTML+=" .leaflet-print-overlay { width: 100%; height:auto; min-height: 100%; position: absolute; top: 0; background-color: white!important; left: 0; z-index: 1001; display: block!important; } ",e.innerHTML+=" .leaflet--printing { height:auto; min-height: 100%; margin: 0px!important; padding: 0px!important; } body.leaflet--printing > * { display: none; box-sizing: border-box; }",e.innerHTML+=" .grid-print-container { grid-template: 1fr / 1fr; box-sizing: border-box; } .grid-map-print { grid-row: 1; grid-column: 1; } body.leaflet--printing .grid-print-container [leaflet-browser-print-content]:not(style) { display: unset!important; }",e.innerHTML+=" .pages-print-container { box-sizing: border-box; }",t.appendChild(e)},_setupManualPrintButton:function(t,e,r){var n=document.createElement("button");n.className="leaflet-browser-print--manualMode-button",n.innerHTML="Print",n.style.position="absolute",n.style.top="20px",n.style.right="20px",this.__overlay__.appendChild(n);var i=this;L.DomEvent.addListener(n,"click",(function(){i._completePrinting(t,e,r)}))},_addPrintMapOverlay:function(t,e,r,n,i){this.__overlay__=document.createElement("div"),this.__overlay__.className=this._map.getContainer().className+" leaflet-print-overlay",document.body.appendChild(this.__overlay__),this.__overlay__.appendChild(this._addPrintCss(t,e,n));var o=document.createElement("div");if(o.className="grid-print-container",o.style.width="100%",o.style.display="grid",this._setupPrintMapHeight(o,r,n),this.options.contentSelector){var s=document.querySelectorAll(this.options.contentSelector);if(s&&s.length)for(var a=0;a<s.length;a++){var l=s[a].cloneNode(!0);o.appendChild(l)}}if(this.options.pagesSelector&&document.querySelectorAll(this.options.pagesSelector).length){var p=document.createElement("div");p.className="pages-print-container",p.style.margin="0!important",this._setupPrintPagesWidth(p,r,n),this.__overlay__.appendChild(p),p.appendChild(o);var c=document.querySelectorAll(this.options.pagesSelector);if(c&&c.length)for(a=0;a<c.length;a++){var u=c[a].cloneNode(!0);p.appendChild(u)}}else this._setupPrintPagesWidth(o,r,n),this.__overlay__.appendChild(o);var d=document.createElement("div");d.id=this._map.getContainer().id+"-print",d.className="grid-map-print",d.style.width="100%",d.style.height="100%",o.appendChild(d),document.body.className+=" leaflet--printing";var h=L.Control.BrowserPrint.Utils.cloneBasicOptionsWithoutLayers(this._map.options);return h.maxZoom=this._map.getMaxZoom(),this._setupPrintMap(d.id,h,i.printLayer,i.printObjects,i.panes)},_setupPrintMap:function(t,e,r,n,i){e.zoomControl=!1,e.dragging=!1,e.zoomAnimation=!1,e.fadeAnimation=!1,e.markerZoomAnimation=!1,e.keyboard=!1,e.scrollWheelZoom=!1,e.tap=!1,e.touchZoom=!1;var o=L.map(t,e);r&&r.addTo(o),i.forEach((function(t){o.createPane(t.name,t.container)}));var s={};for(var a in n){var l=this.options.closePopupsOnPrint,p=[];n[a]=n[a].map((function(t){var e=L.Control.BrowserPrint.Utils.cloneLayer(t);if(e){if(t instanceof L.Popup?(t.isOpen||(t.isOpen=function(){return this._isOpen}),t.isOpen()&&!l&&p.push({source:t._source,popup:e})):e.addTo(o),s[t._leaflet_id]=e,t instanceof L.Layer){var r=t.getTooltip();r&&(e.bindTooltip(r.getContent(),r.options),t.isTooltipOpen()&&e.openTooltip(r.getLatLng()))}return e}}))}for(var c=0;c<p.length;c++){var u=p[c];if(u.source){var d=s[u.source._leaflet_id];d&&d.bindPopup&&d.openPopup&&s[u.source._leaflet_id].bindPopup(u.popup).openPopup(u.popup.getLatLng())}}return{map:o,objects:n}},_isTilesLoading:function(t){return parseFloat(L.version)>1?this._getLoadingLayers(t):t._tilesToLoad||t._tileLayersToLoad},_getLoadingLayers:function(t){for(var e in t._layers){var r=t._layers[e];if((r._url||r._mutant)&&r._loading)return!0}return!1}}),L.Control.BrowserPrint.Event={PrintInit:"browser-print-init",PrePrint:"browser-pre-print",PrintStart:"browser-print-start",Print:"browser-print",PrintEnd:"browser-print-end"},L.control.browserPrint=function(t){if(t&&t.printModes||((t=t||{}).printModes=[L.control.browserPrint.mode.portrait(),L.control.browserPrint.mode.landscape(),L.control.browserPrint.mode.auto(),L.control.browserPrint.mode.custom()]),t&&t.printModes&&(!t.printModes.filter||!t.printModes.length))throw"Please specify valid print modes for Print action. Example: printModes: [L.control.browserPrint.mode.portrait(), L.control.browserPrint.mode.auto('Automatico'), 'Custom']";return t.printModesNames&&console.warn("'printModesNames' option is obsolete. Please use 'L.control.browserPrint.mode.*(/*Title*/)' shortcut instead. Please check latest release and documentation."),new L.Control.BrowserPrint(t)}},function(t,e){L.Control.BrowserPrint.Utils={_ignoreArray:[],_cloneFactoryArray:[],_cloneRendererArray:[],_knownRenderers:{},cloneOptions:function(t){var e={};for(var r in t){var n=t[r];n&&n.clone?e[r]=n.clone():n&&n.onAdd?e[r]=this.cloneLayer(n):e[r]=n}return e},cloneBasicOptionsWithoutLayers:function(t){var e={},r=Object.getOwnPropertyNames(t);if(r.length){for(var n=0;n<r.length;n++){var i=r[n];i&&"layers"!=i&&(e[i]=t[i])}return this.cloneOptions(e)}return e},cloneInnerLayers:function(t){var e=this,r=[];return t.eachLayer((function(t){var n=e.cloneLayer(t);n&&r.push(n)})),r},initialize:function(){this._knownRenderers={},this.registerRenderer(L.SVG,"L.SVG"),this.registerRenderer(L.Canvas,"L.Canvas"),this.registerLayer(L.TileLayer.WMS,"L.TileLayer.WMS",(function(t,e){return L.tileLayer.wms(t._url,e.cloneOptions(t.options))})),this.registerLayer(L.TileLayer,"L.TileLayer",(function(t,e){return L.tileLayer(t._url,e.cloneOptions(t.options))})),this.registerLayer(L.GridLayer,"L.GridLayer",(function(t,e){return L.gridLayer(e.cloneOptions(t.options))})),this.registerLayer(L.ImageOverlay,"L.ImageOverlay",(function(t,e){return L.imageOverlay(t._url,t._bounds,e.cloneOptions(t.options))})),this.registerLayer(L.Marker,"L.Marker",(function(t,e){return L.marker(t.getLatLng(),e.cloneOptions(t.options))})),this.registerLayer(L.Popup,"L.Popup",(function(t,e){return L.popup(e.cloneOptions(t.options)).setLatLng(t.getLatLng()).setContent(t.getContent())})),this.registerLayer(L.Circle,"L.Circle",(function(t,e){return L.circle(t.getLatLng(),t.getRadius(),e.cloneOptions(t.options))})),this.registerLayer(L.CircleMarker,"L.CircleMarker",(function(t,e){return L.circleMarker(t.getLatLng(),e.cloneOptions(t.options))})),this.registerLayer(L.Rectangle,"L.Rectangle",(function(t,e){return L.rectangle(t.getBounds(),e.cloneOptions(t.options))})),this.registerLayer(L.Polygon,"L.Polygon",(function(t,e){return L.polygon(t.getLatLngs(),e.cloneOptions(t.options))})),this.registerLayer(L.MultiPolyline,"L.MultiPolyline",(function(t,e){return L.polyline(t.getLatLngs(),e.cloneOptions(t.options))})),this.registerLayer(L.MultiPolygon,"L.MultiPolygon",(function(t,e){return L.multiPolygon(t.getLatLngs(),e.cloneOptions(t.options))})),this.registerLayer(L.Polyline,"L.Polyline",(function(t,e){return L.polyline(t.getLatLngs(),e.cloneOptions(t.options))})),this.registerLayer(L.GeoJSON,"L.GeoJSON",(function(t,e){return L.geoJson(t.toGeoJSON(),e.cloneOptions(t.options))})),this.registerIgnoreLayer(L.FeatureGroup,"L.FeatureGroup"),this.registerIgnoreLayer(L.LayerGroup,"L.LayerGroup"),this.registerLayer(L.Tooltip,"L.Tooltip",(function(){return null}))},_register:function(t,e,r,n){e&&!t.filter((function(t){return t.identifier===r})).length&&t.push({type:e,identifier:r,builder:n||function(t){return new e(t.options)}})},registerLayer:function(t,e,r){this._register(this._cloneFactoryArray,t,e,r)},registerRenderer:function(t,e,r){this._register(this._cloneRendererArray,t,e,r)},registerIgnoreLayer:function(t,e){this._register(this._ignoreArray,t,e)},cloneLayer:function(t){if(!t)return null;var e,r=this.__getRenderer(t);return r||((e=t._group?this.__getFactoryObject(t._group,!0):this.__getFactoryObject(t))&&(e=e.builder(t,this)),e)},getType:function(t){if(!t)return null;var e=this.__getFactoryObject(t);return e&&(e=e.identifier),e},__getRenderer:function(t){var e=this._knownRenderers[t._leaflet_id];if(!e){for(var r=0;r<this._cloneRendererArray.length;r++){var n=this._cloneRendererArray[r];if(t instanceof n.type){this._knownRenderers[t._leaflet_id]=n.builder(t.options);break}}e=this._knownRenderers[t._leaflet_id]}return e},__getFactoryObject:function(t,e){if(!e)for(var r=0;r<this._ignoreArray.length;r++){var n=this._ignoreArray[r];if(n.type&&t instanceof n.type)return null}for(r=0;r<this._cloneFactoryArray.length;r++){if((i=this._cloneFactoryArray[r]).type&&t instanceof i.type)return i}for(r=0;r<this._cloneRendererArray.length;r++){var i;if((i=this._cloneRendererArray[r]).type&&t instanceof i.type)return null}return this.__unknownLayer__(),null},__unknownLayer__:function(){console.warn("Unknown layer, cannot clone this layer. Leaflet version: "+L.version),console.info("For additional information please refer to documentation on: https://github.com/Igor-Vladyka/leaflet.browser.print."),console.info("-------------------------------------------------------------------------------------------------------------------")}}},function(t,e){L.Control.BrowserPrint.Size={A:{Width:840,Height:1188},B:{Width:1e3,Height:1414},C:{Width:916,Height:1296},D:{Width:770,Height:1090},LETTER:{Width:216,Height:279},HALFLETTER:{Width:140,Height:216},LEGAL:{Width:216,Height:356},JUNIORLEGAL:{Width:127,Height:203},TABLOID:{Width:279,Height:432},LEDGER:{Width:432,Height:279}},L.Control.BrowserPrint.Mode=function(t,e,r,n,i){if(!t)throw"Print mode should be specified.";this.Mode=t,this.Title=e||t,this.PageSize=(r||"A4").toUpperCase(),this.PageSeries=-1!=["A","B","C","D"].indexOf(this.PageSize[0])?this.PageSize[0]:"",this.PageSeriesSize=this.PageSize.substring(this.PageSeries.length),this.Action=n||function(t,e){return function(){t["_print"+e.Mode](e)}},this.InvalidateBounds=i},L.Control.BrowserPrint.Mode.Landscape="Landscape",L.Control.BrowserPrint.Mode.Portrait="Portrait",L.Control.BrowserPrint.Mode.Auto="Auto",L.Control.BrowserPrint.Mode.Custom="Custom",L.Control.BrowserPrint.Mode.prototype.getPageMargin=function(t){var e,r=this.getPaperSize(),n=(r.Width+r.Height)/39.9;switch(t){case"mm":e=n.toFixed(2)+"mm";break;case"in":e=(n/25.4).toFixed(2)+"in";break;default:e=n}return e},L.Control.BrowserPrint.Mode.prototype.getPaperSize=function(){if(this.PageSeries){var t=L.Control.BrowserPrint.Size[this.PageSeries],e=t.Width,r=t.Height,n=!1;return this.PageSeriesSize&&(this.PageSeriesSize=+this.PageSeriesSize,(n=this.PageSeriesSize%2==1)?(e/=this.PageSeriesSize-1||1,r/=this.PageSeriesSize+1):(e/=this.PageSeriesSize,r/=this.PageSeriesSize)),{Width:n?r:e,Height:n?e:r}}var i=L.Control.BrowserPrint.Size[this.PageSeriesSize];return{Width:i.Width,Height:i.Height}},L.Control.BrowserPrint.Mode.prototype.getSize=function(){var t=this.getPaperSize(),e=2*this.getPageMargin()*(window.devicePixelRatio||1);return t.Width=Math.floor(t.Width-e)+"mm",t.Height=Math.floor(t.Height-e)+"mm",t},L.control.browserPrint.mode=function(t,e,r,n,i){return new L.Control.BrowserPrint.Mode(t,e,r,n,i)},L.control.browserPrint.mode.portrait=function(t,e,r){return L.control.browserPrint.mode(L.Control.BrowserPrint.Mode.Portrait,t,e,r,!1)},L.control.browserPrint.mode.landscape=function(t,e,r){return L.control.browserPrint.mode(L.Control.BrowserPrint.Mode.Landscape,t,e,r,!1)},L.control.browserPrint.mode.auto=function(t,e,r){return L.control.browserPrint.mode(L.Control.BrowserPrint.Mode.Auto,t,e,r,!0)},L.control.browserPrint.mode.custom=function(t,e,r){return L.control.browserPrint.mode(L.Control.BrowserPrint.Mode.Custom,t,e,r,!0)}}]);