{"id":207,"date":"2024-02-25T17:44:27","date_gmt":"2024-02-25T17:44:27","guid":{"rendered":"https:\/\/www.acugis.com\/gis-tutorials\/?page_id=207"},"modified":"2024-02-25T17:48:04","modified_gmt":"2024-02-25T17:48:04","slug":"leaflet-print","status":"publish","type":"page","link":"https:\/\/www.acugis.com\/gis-tutorials\/web-mapping-with-leafletjs\/leaflet-print\/","title":{"rendered":"Leaflet Broswer Print"},"content":{"rendered":"\n

In this tutorial, we’ll add Print and PDF functionality to our leaflet map using the Leaflet Browser Print plugin.<\/p>\n\n\n\n

https:\/\/github.com\/Igor-Vladyka\/leaflet.browser.print<\/a><\/p>\n\n\n\n

To use Leaflet Browser Print plugin, download the leaflet.browser.print.min.js file and place it in your document root.<\/p>\n\n\n\n

Let’s start with our basic Leaflet map<\/a><\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n    <base target=\"_top\">\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    \n    <title>Basic Leaflet Map<\/title>\n    \n    <!-- Leafletjs and CSS -->    \n    <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\" integrity=\"sha256-20nQCchB9co0qIjJZRGuk2\/Z9VM+kNiyxNV1lvTlZBo=\" crossorigin=\"\"><\/script>\n    \n        <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" integrity=\"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD\/miZyoHS5obTRR9BMY=\" crossorigin=\"\"\/>\n\n    <!-- Inline CSS for map -->\n    \n    <style>\n        html, body {\n            height: 100%;\n            margin: 0;\n        }\n        .leaflet-container {\n            height: 80%;\n            width: 80%;\n            max-width: 100%;\n            max-height: 100%;\n        }\n    <\/style>\n\n    \n    <\/head>\n    \n    <body>\n\n    <div id=\"map\"><\/div>\n    \n    <script>\n        \n    \/\/ Add OpenStreetMap basemap\n        var map = L.map('map').setView([37.0902, -95.7129], 4);\n\n        var osm = L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n            maxZoom: 19,\n            attribution: '&copy; <a href=\"http:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>'\n        }).addTo(map);\n\n    \n    <\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Add the following to the <head> section of your html file.:<\/p>\n\n\n\n
<script src=\"leaflet.browser.print.min.js\"><\/script>\n<\/pre>\n\n\n\n
Add the following block of JavaScript to your html page.<\/p>\n\n\n\n
L.control.browserPrint({\n\ttitle: 'Just print me!',\n\tdocumentTitle: 'My Leaflet Map',\n\tprintLayer: L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n\t\t\t\t\tattribution: 'Map tiles by <a href=\"http:\/\/openstreetmap.com\">OpenStreetMap<\/a>',\n\t\t\t\t\tsubdomains: 'abcd',\n\t\t\t\t\tminZoom: 1,\n\t\t\t\t\tmaxZoom: 16,\n\t\t\t\t\text: 'png'\n\t\t\t\t}),\n\tclosePopupsOnPrint: false,\n\tprintModes: [\n            L.BrowserPrint.Mode.Landscape(),\n            \"Portrait\",\n            L.BrowserPrint.Mode.Auto(\"B4\",{title: \"Auto\"}),\n            L.BrowserPrint.Mode.Custom(\"B5\",{title:\"Select area\"})\n\t],\n\tmanualMode: false\n}).addTo(map);\n<\/pre>\n\n\n\n
With our JavaScript in place, our html code now looks like below:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n    <base target=\"_top\">\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    \n    <title>Basic Leaflet Map<\/title>\n    \n    <!-- Leafletjs and CSS -->    \n    <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\" integrity=\"sha256-20nQCchB9co0qIjJZRGuk2\/Z9VM+kNiyxNV1lvTlZBo=\" crossorigin=\"\"><\/script>\n    \n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" integrity=\"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD\/miZyoHS5obTRR9BMY=\" crossorigin=\"\"\/>\n\t\t\n\t<!-- Leaflet Print JavaScript -->\t\n\t<script src=\"leaflet.browser.print.min.js\"><\/script>\n\n    <!-- Inline CSS for map -->\n    \n    <style>\n        html, body {\n            height: 100%;\n            margin: 0;\n        }\n        .leaflet-container {\n            height: 80%;\n            width: 80%;\n            max-width: 100%;\n            max-height: 100%;\n        }\n    <\/style>\n\n    \n    <\/head>\n    \n    <body>\n\n    <div id=\"map\"><\/div>\n    \n    <script>\n        \n    \/\/ Add OpenStreetMap basemap\n        var map = L.map('map').setView([37.0902, -95.7129], 4);\n\n        var osm = L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n            maxZoom: 19,\n            attribution: '&copy; <a href=\"http:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>'\n        }).addTo(map);\n\n\t\tL.control.browserPrint({\n\t\t\ttitle: 'Just print me!',\n\t\t\tdocumentTitle: 'My Leaflet Map',\n\t\t\tprintLayer: L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n\t\t\t\t\tattribution: 'Map tiles by <a href=\"http:\/\/openstreetmap.com\">OpenStreetMap<\/a>',\n\t\t\t\t\tsubdomains: 'abcd',\n\t\t\t\t\tminZoom: 1,\n\t\t\t\t\tmaxZoom: 16,\n\t\t\t\t\text: 'png'\n\t\t\t\t}),\n\t\tclosePopupsOnPrint: false,\n\t\tprintModes: [\n            \tL.BrowserPrint.Mode.Landscape(),\n            \t\"Portrait\",\n            \tL.BrowserPrint.Mode.Auto(\"B4\",{title: \"Auto\"}),\n            \tL.BrowserPrint.Mode.Custom(\"B5\",{title:\"Select area\"})\n\t\t\t],\n\t\t\tmanualMode: false\n\t\t}).addTo(map);\n\n    \n    <\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Now, when we view our map, we see the Print controls:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
When generated, you are given the option to Print or save as PDF<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, we’ll add Print and PDF functionality to our leaflet map using the Leaflet Browser Print plugin. https:\/\/github.com\/Igor-Vladyka\/leaflet.browser.print To use Leaflet Browser Print plugin, download the leaflet.browser.print.min.js file and place it in your document root. Let’s start with our basic Leaflet map Add the following to the <head> section of your html file.: … <\/p>\n
Continue reading “Leaflet Broswer Print”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":166,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-207","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/comments?post=207"}],"version-history":[{"count":2,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/207\/revisions"}],"predecessor-version":[{"id":214,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/207\/revisions\/214"}],"up":[{"embeddable":true,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/166"}],"wp:attachment":[{"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/media?parent=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}