{"id":215,"date":"2024-02-25T17:59:17","date_gmt":"2024-02-25T17:59:17","guid":{"rendered":"https:\/\/www.acugis.com\/gis-tutorials\/?page_id=215"},"modified":"2024-02-25T17:59:17","modified_gmt":"2024-02-25T17:59:17","slug":"leaflet-draw","status":"publish","type":"page","link":"https:\/\/www.acugis.com\/gis-tutorials\/web-mapping-with-leafletjs\/leaflet-draw\/","title":{"rendered":"Leaflet Draw"},"content":{"rendered":"\n

In this tutorial, we’ll add Leaflet Draw to our map.<\/p>\n\n\n\n

https:\/\/github.com\/Leaflet\/Leaflet.draw<\/a><\/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
You can either download the full packages from Github or use a CDN.  We’ll use the CDN.<\/p>\n\n\n\n
Add the following to the <head> section of your html file.:<\/p>\n\n\n\n
<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.draw\/0.4.2\/leaflet.draw.css\"\/>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.draw\/0.4.2\/leaflet.draw.js\"><\/script>\n<\/pre>\n\n\n\n
Add the following block of JavaScript to your html page.<\/p>\n\n\n\n
var drawnItems = new L.FeatureGroup();\n        map.addLayer(drawnItems);\n\n        var drawControl = new L.Control.Draw({\n            edit: {\n                featureGroup: drawnItems\n            }\n        });\n        map.addControl(drawControl);\n\n        map.on('draw:created', function (e) {\n            var type = e.layerType,\n                layer = e.layer;\n            drawnItems.addLayer(layer);\n        });\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    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.draw\/0.4.2\/leaflet.draw.css\"\/>\n\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.draw\/0.4.2\/leaflet.draw.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: 60%;\n            width: 60%;\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\t\t\n\t\/\/ Add Browser Print Plugin\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\t\/\/ Add Browser Print Plugin\n\t\t\n\t\tvar drawnItems = new L.FeatureGroup();\n        \tmap.addLayer(drawnItems);\n\n        var drawControl = new L.Control.Draw({\n            edit: {\n                featureGroup: drawnItems\n            }\n        \t});\n        \tmap.addControl(drawControl);\n\n        \tmap.on('draw:created', function (e) {\n            \tvar type = e.layerType,\n                \tlayer = e.layer;\n            \tdrawnItems.addLayer(layer);\n        \t});\n\n    \n    <\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Now, when we view our map, we see the Draw controls:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\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 Leaflet Draw to our map. https:\/\/github.com\/Leaflet\/Leaflet.draw Let’s start with our basic Leaflet map You can either download the full packages from Github or use a CDN. We’ll use the CDN. Add the following to the <head> section of your html file.: Add the following block of JavaScript to your html … <\/p>\n
Continue reading “Leaflet Draw”<\/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-215","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/215","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=215"}],"version-history":[{"count":1,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/215\/revisions"}],"predecessor-version":[{"id":217,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/215\/revisions\/217"}],"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=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}