{"id":356,"date":"2022-07-27T16:42:00","date_gmt":"2022-07-27T15:42:00","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=356"},"modified":"2022-08-01T20:54:01","modified_gmt":"2022-08-01T19:54:01","slug":"leaflet-js-samples","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/en\/356\/leaflet-js-samples\/","title":{"rendered":"Free Web Map Services (WMS) and demos for Leaflet JS."},"content":{"rendered":"\n<p>Here I will be dropping a few samples of cool stuff that you can do with Leaflet JS.<\/p>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>You can directly copy and paste the codes below in a text file with .html extension and preview locally in a browser.<\/i><\/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=\"world-wide-greyscale\">1. World-wide greyscale locked header.<\/h2>\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<\/style>\n<body>\n\t<div id=\"mapid2\" style=\"height:100px;\"><\/div> <! fixed height set as a style property >\n<\/body>\n<script>\n\/\/leaflet map object\nvar map = L.map('mapid2',{\n\tzoomControl:false,\/\/disabling interaction\n\tdragging:false,\/\/disabling interaction\n\tmaxZoom:0,\/\/disabling interaction\n\tminZoom:0,\/\/disabling interaction\n\tdoubleClickZoom:false,\/\/disabling interaction\n}).setView([20, -40], 0);\/\/initial zoom level to 0\n\/\/tiled basemap object\nvar googleMaps = L.tileLayer(\"https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/Canvas\/World_Dark_Gray_Base\/MapServer\/tile\/{z}\/{y}\/{x}\", {\n\tattribution: 'Sample <b>worldwide locked demo<\/b> by <a href=\"https:\/\/theroamingworkshop.cloud\">The Roaming Workshop<\/a>. Uses ESRI tiles.',\n}).addTo(map); \/\/custom attribution text with hyperlink\n<\/script>\n<\/html>\n\n\n\n<p><br>Features:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Free greyscale OSM mapping by ESRI.<\/li><li>World-wide zoom level: L.map zoom level set to 0.<\/li><li>Disabled user controls, turning it into a locked view.<\/li><li>Fixed height added to the div element style.<\/li><li>Custom attribution text with hyperlink.<\/li><\/ul>\n\n\n\n<p>See the details in the source code below.<\/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\n&lt;\/style&gt;\n\n&lt;body&gt;\n\t&lt;div id=\"mapid2\" style=\"height:100px;\"&gt;&lt;\/div&gt; &lt;! fixed height set as a style property &gt;\n&lt;\/body&gt;\n\n&lt;script&gt;\n\n\/\/leaflet map object\nvar map = L.map('mapid2',{\n\tzoomControl:false,\/\/disabling interaction\n\tdragging:false,\/\/disabling interaction\n\tmaxZoom:0,\/\/disabling interaction\n\tminZoom:0,\/\/disabling interaction\n\tdoubleClickZoom:false,\/\/disabling interaction\n}).setView(&#91;20, -40], 0);\/\/initial zoom level to 0\n\n\/\/tiled basemap object\nvar googleMaps = L.tileLayer(\"https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/Canvas\/World_Dark_Gray_Base\/MapServer\/tile\/{z}\/{y}\/{x}\", {\n\tattribution: 'Sample &lt;b&gt;worldwide locked demo&lt;\/b&gt; by &lt;a href=\"https:\/\/theroamingworkshop.cloud\"&gt;The Roaming Workshop&lt;\/a&gt;. Uses ESRI tiles.',\n}).addTo(map); \/\/custom attribution text with hyperlink\n\n&lt;\/script&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"esri-nationalgeographic-interactive\">2. ESRI+National Geographic interactive country spotter.<\/h2>\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<!-- Load Esri Leaflet from CDN -->\n<script src=\"https:\/\/unpkg.com\/esri-leaflet\/dist\/esri-leaflet.js\"><\/script>\n<script src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2021\/08\/countries.txt\"><\/script>\n<!-- Load Lealeft Control Custom by yigityuce -->\n<script src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2021\/08\/Leaflet-Control-Custom.txt\"><\/script>\n<!-- FONT AWESOME CDN -->\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\">\n<\/head>\n<style>\n<\/style>\n<body>\n\t<div id=\"mapid3\" style=\"height:600px;\"><\/div> <! fixed size set as a style property >\n<\/body>\n<script>\n\/\/leaflet map object\nvar map = L.map('mapid3',{\n\tzoomControl:false,\n\tmaxBounds:[[-90,-180],[90,180]],\n});\nmap.setView([30, 0], 3);\n\/\/Define ESRI maps\nvar natgeomap = L.esri.basemapLayer(\"NationalGeographic\");\nvar graymap = L.esri.basemapLayer(\"Terrain\");\n\/\/Add unlabeled layer to map\ngraymap.addTo(map);\n\/\/Set map style\nvar layerstyle = {\n\tweight: 0.5,\n\tcolor: \"grey\",\n\tdashArray: \"5\",\n\tfillOpacity: 0,\n\t};\nfunction mouseOver(feature, layer, e){\n\tlayer.on({\n\t\tmouseover: highlight,\n\t\tmouseout: restore,\n\t\tclick: focus,\n\t});\n} \nfunction highlight(e){\n\tvar layer = e.target;\n\tlayer.setStyle({\n\tcolor:\"red\",\n\tweight: 2,\n\t});\n\tcoords=layer.getBounds().getCenter();\n\tcountry=e.target.feature.properties.name;\n\t\n\t\/\/fix known issues with browsers\n    \t\n\tif (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {\n\t\tlayer.bringToFront();\n    \t}\n}\nfunction restore(e){\n\tvar layer = e.target;\n\tlayer.setStyle(layerstyle);\n\t\n\t\/\/fix known issues with browsers\n    \t\n\tif (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {\n\t\tlayer.bringToFront();\n    \t}\n}\n\/\/instantiate label object\nvar label;\nfunction focus(e){\n\tlabel = L.tooltip().setContent(country+\" !!\").setLatLng(coords);\n\tlabel.addTo(map);\n\tmap.fitBounds(e.target.getBounds());\n\/\/\tgraymap.remove;\n\tmap.removeLayer(graymap);\n\tnatgeomap.addTo(map);\n}\n\/\/Add home (reset) button\nL.control.custom({\n\tposition: 'topleft',\n\tcontent: '<button type=\"button\" class=\"btn btn-default\">'+\n\t\t'\t<i class=\"fa fa-home\"><\/i>'+\n\t\t'<\/button>',\n\tstyle:{\n\t\t\n\t\t},\n\tevents:{\n\t\tclick: function(){\n\t\t\tmap.setView([30, 0], 3);\n\t\t\tmap.removeLayer(natgeomap);\n\t\t\tgraymap.addTo(map);\n\t\t\tmap.removeLayer(label);\n\t\t\t}\n\t\t},\n\t}).addTo(map);\nL.control.zoom().addTo(map);\n\/\/Add geoJson layer\nL.geoJson(countries, {\n\tstyle: layerstyle,\n\tonEachFeature: mouseOver,\n\t}).addTo(map);\n<\/script>\n<\/html>\n\n\n\n<p><br>Features:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Educational geographical map by ESRI and National Geographic by including the <a href=\"http:\/\/esri.github.io\/esri-leaflet\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESRI library for Leaflet<\/a>.<\/li><li>Lightweight vector map overlay in GeoJSON format courtesy of <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/johan\/world.geo.json\" target=\"_blank\">world.geo.json<\/a><\/li><li>Interactive country selection and labelling following <a href=\"https:\/\/leafletjs.com\/examples\/choropleth\/\" target=\"_blank\" rel=\"noreferrer noopener\">Leaflet's tutorials<\/a>.<\/li><li>Custom reset button using <a href=\"https:\/\/github.com\/yigityuce\/Leaflet.Control.Custom\" target=\"_blank\" rel=\"noreferrer noopener\">Leaflet.Control.Custom<\/a> plugin by yigityuce.<\/li><\/ul>\n\n\n\n<p>See the details in the code below:<\/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;!-- Load Esri Leaflet from CDN --&gt;\n&lt;script src=\"https:\/\/unpkg.com\/esri-leaflet\/dist\/esri-leaflet.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2021\/08\/countries.txt\"&gt;&lt;\/script&gt;\n\n&lt;!-- Load Lealeft Control Custom by yigityuce --&gt;\n&lt;script src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2021\/08\/Leaflet-Control-Custom.txt\"&gt;&lt;\/script&gt;\n\n&lt;!-- FONT AWESOME CDN --&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"&gt;\n\n&lt;\/head&gt;\n\n&lt;style&gt;\n\n&lt;\/style&gt;\n\n&lt;body&gt;\n\t&lt;div id=\"mapid3\" style=\"height:600px;\"&gt;&lt;\/div&gt; &lt;! fixed size set as a style property &gt;\n&lt;\/body&gt;\n\n&lt;script&gt;\n\n\/\/leaflet map object\nvar map = L.map('mapid3',{\n\tzoomControl:false,\n\tmaxBounds:&#91;&#91;-90,-180],&#91;90,180]],\n});\nmap.setView(&#91;30, 0], 3);\n\n\/\/Define ESRI maps\nvar natgeomap = L.esri.basemapLayer(\"NationalGeographic\");\nvar graymap = L.esri.basemapLayer(\"Terrain\");\n\n\/\/Add unlabeled layer to map\ngraymap.addTo(map);\n\n\n\/\/Set map style\nvar layerstyle = {\n\tweight: 0.5,\n\tcolor: \"grey\",\n\tdashArray: \"5\",\n\tfillOpacity: 0,\n\t};\n\n\nfunction mouseOver(feature, layer, e){\n\tlayer.on({\n\t\tmouseover: highlight,\n\t\tmouseout: restore,\n\t\tclick: focus,\n\t});\n} \n\nfunction highlight(e){\n\tvar layer = e.target;\n\n\tlayer.setStyle({\n\tcolor:\"red\",\n\tweight: 2,\n\t});\n\n\tcoords=layer.getBounds().getCenter();\n\tcountry=e.target.feature.properties.name;\n\t\n\t\/\/fix known issues with browsers\n    \t\n\tif (!L.Browser.ie &amp;&amp; !L.Browser.opera &amp;&amp; !L.Browser.edge) {\n\t\tlayer.bringToFront();\n    \t}\n}\n\nfunction restore(e){\n\tvar layer = e.target;\n\n\tlayer.setStyle(layerstyle);\n\t\n\t\/\/fix known issues with browsers\n    \t\n\tif (!L.Browser.ie &amp;&amp; !L.Browser.opera &amp;&amp; !L.Browser.edge) {\n\t\tlayer.bringToFront();\n    \t}\n}\n\n\/\/instantiate label object\nvar label;\n\nfunction focus(e){\n\tlabel = L.tooltip().setContent(country+\" !!\").setLatLng(coords);\n\tlabel.addTo(map);\n\tmap.fitBounds(e.target.getBounds());\n\/\/\tgraymap.remove;\n\tmap.removeLayer(graymap);\n\tnatgeomap.addTo(map);\n}\n\n\/\/Add home (reset) button\n\nL.control.custom({\n\tposition: 'topleft',\n\tcontent: '&lt;button type=\"button\" class=\"btn btn-default\"&gt;'+\n\t\t'\t&lt;i class=\"fa fa-home\"&gt;&lt;\/i&gt;'+\n\t\t'&lt;\/button&gt;',\n\tstyle:{\n\t\t\n\t\t},\n\tevents:{\n\t\tclick: function(){\n\t\t\tmap.setView(&#91;30, 0], 3);\n\t\t\tmap.removeLayer(natgeomap);\n\t\t\tgraymap.addTo(map);\n\t\t\tmap.removeLayer(label);\n\t\t\t}\n\t\t},\n\t}).addTo(map);\n\nL.control.zoom().addTo(map);\n\n\/\/Add geoJson layer\nL.geoJson(countries, {\n\tstyle: layerstyle,\n\tonEachFeature: mouseOver,\n\t}).addTo(map);\n\n&lt;\/script&gt;\n&lt;\/html&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Here I will be dropping a few samples of cool stuff that you can do with Leaflet JS. TIP! You can directly copy and paste the codes below in a text file with .html extension and preview locally in a browser. 1. World-wide greyscale locked header. Features: Free greyscale OSM mapping by ESRI. World-wide zoom [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":893,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[],"class_list":["post-356","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\/356","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=356"}],"version-history":[{"count":103,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/356\/revisions"}],"predecessor-version":[{"id":999,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/356\/revisions\/999"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media\/893"}],"wp:attachment":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media?parent=356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}