{"id":313,"date":"2022-07-27T15:51:00","date_gmt":"2022-07-27T14:51:00","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=313"},"modified":"2022-09-26T15:03:28","modified_gmt":"2022-09-26T14:03:28","slug":"leaflet-js-free-maps-for-your-site","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/en\/313\/leaflet-js-free-maps-for-your-site\/","title":{"rendered":"LeafletJS: free maps for your site."},"content":{"rendered":"\n<p><a href=\"https:\/\/leafletjs.com\/\">Leaflet JS<\/a> is one of the most exciting discoveries I&#8217;ve come across in the latest years. It is one of the most powerful mapping libraries you&#8217;ll find around, competing with Google&#8217;s API, ESRI and Mapbox thanks to its great community and the awesome plugins that have been developed for it.<\/p>\n\n\n\n<p>Open-source FTW \ud83e\udd1f<\/p>\n\n\n\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\" integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6\/keqq\/sMZMZ19scR4PsZChSR7A==\" crossorigin=\"\">\n<script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\" integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\" crossorigin=\"\"><\/script>\n\n\n\n<style>\n\n<\/style>\n\n\n\t<div id=\"mapid2\" style=\"height:100px;\"><\/div>\n\n\n<script>\n\n\/\/leaflet map object\nvar map = L.map('mapid2',{\n\tzoomControl:false,\n\tdragging:false,\n\tmaxZoom:14,\n\tminZoom:14,\n\tdoubleClickZoom:false,\n}).setView([25.475, -80.45], 14);\n\n\/\/tiled basemap object\nL.tileLayer(\"https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/Canvas\/World_Dark_Gray_Base\/MapServer\/tile\/{z}\/{y}\/{x}\", {\n\tattribution: \"Sample art demo powered by Leaflet. Uses ESRI tiles.\",\n}).addTo(map);\n\n<\/script>\n\n\n\n<p><em><sub><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-light-gray-color\">(See the code for above map in <a href=\"https:\/\/theroamingworkshop.cloud\/b\/?p=356&amp;lang=en\" target=\"_blank\" rel=\"noreferrer noopener\">this post<\/a> with a few more Leaflet samples)<\/mark><\/sub><\/em><\/p>\n\n\n\n<div id=\"menu\" style=\"padding:20px 20px 20px 20px; border-left:2px solid darkgrey;\">\n<p style=\"font-weight:bold;\">Content<\/p>\n<\/div>\n<script>\nvar text;\nvar element;\n\nfunction fillmenu(){\n\nfor (let i=0; i<window.document.getElementsByTagName(\"h2\").length; i++){\nelement = window.document.getElementsByTagName(\"h2\")[i];\ntext = \"\u25b9 \"+element.innerHTML;\nvar newelement = document.createElement(\"a\");\nnewelement.innerHTML=text;\nvar postid=window.document.getElementsByTagName(\"article\")[0].id;\nvar url = \"https:\/\/theroamingworkshop.cloud\/b\/?p=\"+postid.substr(5,postid.length)+\"#\"+element.id;\nnewelement.setAttribute(\"href\", url);\nnewelement.appendChild(document.createElement(\"br\"));\nwindow.document.getElementById(\"menu\").appendChild(newelement);\nconsole.log(text);\n}\n}\nif(window.location.href.includes(\"tag\")){\n\n}else{\nwindow.setTimeout(fillmenu,2000);\n}\n\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"set-up\">1. Set up.<\/h2>\n\n\n\n<p>All you need to use Leaflet JS is the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>A web browser with html and javascript compatibility (any modern browser like Firefox, Opera, Chrome, Edge, Vivaldi, etc  will do).<\/li><li>Any text editor.<ul><li>[OPTIONAL] A web server to host your resulting webpage and make it accessible via internet. In any case, you can always run the file locally except for some special features.<\/li><\/ul><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"integrating-leaflet-in-html\">2. Integrating Leaflet JS in any webpage.<\/h2>\n\n\n\n<p>Being a library, you only need to link its scripts to make use of it.<\/p>\n\n\n\n<p>Start by creating a new file with a basic html structure and extension .html. I always use and recommend w3schools for any help:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.w3schools.com\/html\/\">https:\/\/www.w3schools.com\/html\/<\/a><\/li><\/ul>\n\n\n\n<p>Add Leaflet's funcitonalities to the HTML file by including the following code inside some &lt;head&gt; tags:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n.....\n&lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\"\n  integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6\/keqq\/sMZMZ19scR4PsZChSR7A==\"\n  crossorigin=\"\"\/&gt;\n&lt;script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"\n  integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\"\n  crossorigin=\"\"&gt;&lt;\/script&gt;\n.....\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<p>This method will read the library from the internet, but you can download the library files from Leaflet's website to your PC and make proper reference to the local files in your html code:<a href=\"https:\/\/leafletjs.com\/download.html\">https:\/\/leafletjs.com\/download.html<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href=\"\/path\/to\/leaflet.css\" \/&gt;\n&lt;script src=\"\/path\/to\/leaflet.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>This options will make use of a local copy of the library and won't be affected by changes to the live repository. It also allows you to adapt the code locally to suit your application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-a-map\">3. Adding a map to html &lt;body&gt; with Leaflet JS<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"location-in-html-body\">Location inside html &lt;body&gt;<\/h4>\n\n\n\n<p>Leaflet will add its components inside a &lt;div&gt; element which you can place anywhere inside your html &lt;body&gt; tags to suit your design. You need to specify a div \"id\" in order to refer to it later. I am using \"mapid\" for this example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"mapid\" style=\"height:500px;\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>The map will be affected by CSS properties assigned to the div tag (#mapid in my case). This will modify how the div element fits and looks in your website.<\/p>\n\n\n\n<p>As an example, I'll modify the frame to be round with a 30px radius, instead of the default square edge. We'll add this code as CSS inside &lt;style&gt; tags. Uncomment these lines to see the difference.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n#mapid{border-radius: 30px;}\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"define-the-map-in-javascript\">Define the map in javascript<\/h4>\n\n\n\n<p>Let's now add the map object itself. This is done using the library functions (which start with L). We'll add all this function inside the &lt;script&gt; tags as they make use of javascript.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Define the map object.<\/strong> Make use of the function \"L.map\" and refer to the \"mapid\" div element. Then define the start view coordinates and zoom level with \"L.setView\".<br><br>I am going to set the center of the view approximately in Miami (make a google search and extract its latitude and logitude coordinates: 25.75, -80.2. The zoom range will be set to 12 so it's close enough. Larger values mean bigger zoom in and smaller values provide a wider view.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var map = L.map('mapid').setView(&#91;25.75, -80.2], 12);<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Define the base layer.<\/strong> Web-based maps make use of tiled images which are loaded dinamically according to your navigation across the map. We can use the \"L.tileLayer\" function and any of the following tiled services very well put together  in <a href=\"https:\/\/mappinggis.com\/2018\/03\/como-anadir-mapas-base-en-qgis-3-0-openstreetmap-google-carto-stamen\/#Anadir_capas_de_OpenStreetMap_en_QGIS_3x\">this post<\/a>, which includes Open Street Maps (OSM), Google Maps, and ESRI services. Being will be using the OSM basemap for this example:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>L.tileLayer(\"http:\/\/a.tile.openstreetmap.org\/{z}\/{x}\/{y}.png\", {\/*no properties*\/\n}).addTo(map);<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Finally, let's add a marker, a basic functionality you will want in most maps. We can set the text inside \"bindPopup\" being able to format with html tags. \"openPopup\" function displays the pop up directly at start.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/marker object\nvar marker = L.marker(&#91;25.77, -80.13]).addTo(map);\n\n\/\/pop up object attached to marker object\nmarker.bindPopup(\"&lt;b>I'm in&lt;\/b>&lt;br>Miami Beach!\").openPopup();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"final-result\">Final result.<\/h2>\n\n\n\n<p>The rectangle below is a HTML block with all the code above put together. It should which display a OSM basemap centered in Miami with a marker in Miami Beach.<\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\"\n  integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6\/keqq\/sMZMZ19scR4PsZChSR7A==\"\n  crossorigin=\"\"\/>\n<script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"\n  integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\"\n  crossorigin=\"\"><\/script>\n<\/head>\n<style>\n#mapid{border-radius: 30px;}\n<\/style>\n<body>\n\t<div id=\"mapid\" style=\"height:500px;\"><\/div>\n<\/body>\n<script>\n\/\/leaflet map object\nvar map = L.map('mapid').setView([25.75, -80.2], 12);\n\/\/tiled basemap object\nL.tileLayer(\"http:\/\/a.tile.openstreetmap.org\/{z}\/{x}\/{y}.png\", {\/*no properties*\/\n}).addTo(map);\n\/\/marker object\nvar marker = L.marker([25.77, -80.13]).addTo(map);\n\/\/pop up object attached to marker object\nmarker.bindPopup(\"<b>I'm in<\/b><br>Miami Beach!\").openPopup();\n<\/script>\n<\/html>\n\n\n\n<p><br>The source code inside the HTML block above is exactly the following:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"&gt;\n\n&lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\"\n  integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6\/keqq\/sMZMZ19scR4PsZChSR7A==\"\n  crossorigin=\"\"\/&gt;\n&lt;script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"\n  integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\"\n  crossorigin=\"\"&gt;&lt;\/script&gt;\n\n&lt;\/head&gt;\n\n&lt;style&gt;\n#mapid{border-radius: 30px;}\n&lt;\/style&gt;\n\n&lt;body&gt;\n\t&lt;div id=\"mapid\" style=\"height:500px;\"&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n\n&lt;script&gt;\n\n\/\/leaflet map object\nvar map = L.map('mapid').setView(&#91;25.75, -80.2], 12);\n\n\/\/tiled basemap object\nvar googleMaps = L.tileLayer(\"http:\/\/a.tile.openstreetmap.org\/{z}\/{x}\/{y}.png\", {\/*no properties*\/\n}).addTo(map);\n\n\/\/marker object\nvar marker = L.marker(&#91;25.77, -80.13]).addTo(map);\n\n\/\/pop up object attached to marker object\nmarker.bindPopup(\"&lt;b&gt;I'm in&lt;\/b&gt;&lt;br&gt;Miami Beach!\").openPopup();\n\n\n&lt;\/script&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>You can copy paste this code in a text file with .html extension and preview locally in a browser.<\/i><\/p>\n\n\n\n<p>Don't miss the <a href=\"https:\/\/leafletjs.com\/reference-1.7.1.html\">Docs<\/a> and <a href=\"https:\/\/leafletjs.com\/plugins.html\">Plugins<\/a> sections in the Leaflet JS website. There are plenty of features that you can add to your map. The most interesting are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Map <a href=\"https:\/\/leafletjs.com\/reference-1.7.1.html#control-zoom\">controls<\/a>: zoom, layers, attribution.<\/li><li><a href=\"https:\/\/leafletjs.com\/reference-1.7.1.html#tilelayer-wms\">WMS<\/a> tiles services to add different basemaps.<\/li><li><a href=\"https:\/\/github.com\/makinacorpus\/Leaflet.GeometryUtil\">Geoprocessing<\/a>, <a href=\"https:\/\/github.com\/perliedman\/leaflet-control-geocoder\">geocoding<\/a> and <a href=\"http:\/\/www.liedman.net\/leaflet-routing-machine\/\">routing<\/a> plugins.<\/li><li>Coordinate <a href=\"https:\/\/github.com\/MrMufflon\/Leaflet.Coordinates\">display<\/a> and <a href=\"https:\/\/github.com\/jjimenezshaw\/Leaflet.UTM\">conversion<\/a> (latlon or UTM shown on map).<\/li><li>Geometry and drawing <a href=\"https:\/\/github.com\/geoman-io\/leaflet-geoman\">tools<\/a>.<\/li><li>Third-party integration like <a href=\"https:\/\/turfjs.org\/\">TurfJS<\/a> or <a href=\"http:\/\/esri.github.io\/esri-leaflet\/\">ESRI<\/a>.<\/li><\/ul>\n\n\n\n<p>I hope you enjoyed this introduction to Leaflet and you can make good use of it. Also, if you can, contribute in its development or spread its use!<\/p>\n\n\n\n<p>You can keep reading a cool use of Leaflet in our article about Turf integration on Leaflet: web-based GIS operations come true.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"references\">References<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Leaflet JS Quick Start Guide:<br><a href=\"https:\/\/leafletjs.com\/examples\/quick-start\/\">https:\/\/leafletjs.com\/examples\/quick-start\/<\/a><\/li><li>Tiled layer URLs:<br><a href=\"https:\/\/mappinggis.com\/2018\/03\/como-anadir-mapas-base-en-qgis-3-0-openstreetmap-google-carto-stamen\/\">https:\/\/mappinggis.com\/2018\/03\/como-anadir-mapas-base-en-qgis-3--openstreetmap-google-carto-stamen\/<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Leaflet JS is one of the most exciting discoveries I&#8217;ve come across in the latest years. It is one of the most powerful mapping libraries you&#8217;ll find around, competing with Google&#8217;s API, ESRI and Mapbox thanks to its great community and the awesome plugins that have been developed for it. Open-source FTW \ud83e\udd1f (See the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":791,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[],"class_list":["post-313","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-map-en","post-preview"],"_links":{"self":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/comments?post=313"}],"version-history":[{"count":65,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/313\/revisions"}],"predecessor-version":[{"id":1441,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/313\/revisions\/1441"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media\/791"}],"wp:attachment":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media?parent=313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}