{"id":873,"date":"2022-07-27T16:33:00","date_gmt":"2022-07-27T15:33:00","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=873"},"modified":"2022-08-04T16:55:23","modified_gmt":"2022-08-04T15:55:23","slug":"servicios-wms-de-teselado-web-gratuitos-para-leafletjs","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/873\/servicios-wms-de-teselado-web-gratuitos-para-leafletjs\/","title":{"rendered":"Servicios Web Map (WMS) y demos gratuitas para LeafletJS"},"content":{"rendered":"\n<p id=\"block-d3921699-ca95-48a0-82d6-dd55fb7b6b56\">Aqu\u00ed ir\u00e9 volcando algunos ejemplos molones que se pueden conseguir con Leaflet JS.<\/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;\">Contenido<\/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);\n}\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=\"mundo-escala-grises\">1. Encabezado bloqueado del mundo en escala de grises.<\/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 id=\"block-29883cf4-be45-4b74-81dc-35345b110b17\">Caracter\u00edsticas:<\/p>\n\n\n\n<ul class=\"wp-block-list\" id=\"block-4b9edb54-4c05-4ab9-8bc7-3701e530f0d6\"><li>Mapa de ESRI-OSM gratuito en escala de grises.<\/li><li>Nivel de zoom a escala global: L.map zoom level definido en 0.<\/li><li>Deshabilitados controles de usuario, creando una vista bloqueada.<\/li><li>Altura fija definida en el estilo del elemento.<\/li><li>Texto de atribuciones personalizado y con hiperv\u00ednculo.<\/li><\/ul>\n\n\n\n<p id=\"block-ebad3446-5652-4bb4-914a-321d8b0b2cd7\">El c\u00f3digo fuente detallado a continuaci\u00f3n:<\/p>\n\n\n\n<pre id=\"block-9fdd6edf-6a34-4bde-b16d-bc620fa8fc7f\" class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br><br>&lt;head&gt;<br>&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"&gt;<br><br>&lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\"<br>  integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6\/keqq\/sMZMZ19scR4PsZChSR7A==\"<br>  crossorigin=\"\"\/&gt;<br>&lt;script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"<br>  integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\"<br>  crossorigin=\"\"&gt;&lt;\/script&gt;<br><br>&lt;\/head&gt;<br><br>&lt;style&gt;<br><br>&lt;\/style&gt;<br><br>&lt;body&gt;<br>\t&lt;div id=\"mapid2\" style=\"height:100px;\"&gt;&lt;\/div&gt; &lt;! fixed height set as a style property &gt;<br>&lt;\/body&gt;<br><br>&lt;script&gt;<br><br>\/\/leaflet map object<br>var map = L.map('mapid2',{<br>\tzoomControl:false,\/\/disabling interaction<br>\tdragging:false,\/\/disabling interaction<br>\tmaxZoom:0,\/\/disabling interaction<br>\tminZoom:0,\/\/disabling interaction<br>\tdoubleClickZoom:false,\/\/disabling interaction<br>}).setView(&#91;20, -40], 0);\/\/initial zoom level to 0<br><br>\/\/tiled basemap object<br>var googleMaps = L.tileLayer(\"https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/Canvas\/World_Dark_Gray_Base\/MapServer\/tile\/{z}\/{y}\/{x}\", {<br>\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.',<br>}).addTo(map); \/\/custom attribution text with hyperlink<br><br>&lt;\/script&gt;<br>&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"esri-national-geographic\">2. Identificador de paises interactivo con ESRI+National Geographic.<\/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 id=\"block-a157ec07-2b56-4339-9da1-a65cace9321c\"><br>Caracter\u00edsticas:<\/p>\n\n\n\n<ul class=\"wp-block-list\" id=\"block-8c6c6937-fe4d-4112-b3d2-86aa78d2ad92\"><li>Mapa educativo de ESRI y National Geographic, inclu\u00eddo en la <a rel=\"noreferrer noopener\" href=\"http:\/\/esri.github.io\/esri-leaflet\/\" target=\"_blank\">librer\u00eda de ESRI para Leaflet<\/a>.<\/li><li>Capa vectorial de pa\u00edses ultraligera y superpuesta en formato GeoJSON, cortes\u00eda de <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/johan\/world.geo.json\" target=\"_blank\">world.geo.json<\/a><\/li><li>Selecci\u00f3n de pa\u00edses y etiquetado interactivos, siguiendo el <a rel=\"noreferrer noopener\" href=\"https:\/\/leafletjs.com\/examples\/choropleth\/\" target=\"_blank\">tutorial de Leaflet<\/a>.<\/li><li>Bot\u00f3n personalizado de reinicio usando el plugin <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/yigityuce\/Leaflet.Control.Custom\" target=\"_blank\">Leaflet.Control.Custom<\/a> de yigityuce.<\/li><\/ul>\n\n\n\n<p id=\"block-24347210-cbef-4ee2-bc1b-4bc1a8806f1a\">El c\u00f3digo fuente detallado a continuaci\u00f3n:<\/p>\n\n\n\n<pre id=\"block-eb6eeefe-88ba-4a1a-bd0f-77fe43df49b6\" class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br><br>&lt;head&gt;<br>&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"&gt;<br><br>&lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\"<br>  integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6\/keqq\/sMZMZ19scR4PsZChSR7A==\"<br>  crossorigin=\"\"\/&gt;<br>&lt;script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"<br>  integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\"<br>  crossorigin=\"\"&gt;&lt;\/script&gt;<br><br>&lt;!-- Load Esri Leaflet from CDN --&gt;<br>&lt;script src=\"https:\/\/unpkg.com\/esri-leaflet\/dist\/esri-leaflet.js\"&gt;&lt;\/script&gt;<br>&lt;script src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2021\/08\/countries.txt\"&gt;&lt;\/script&gt;<br><br>&lt;!-- Load Lealeft Control Custom by yigityuce --&gt;<br>&lt;script src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2021\/08\/Leaflet-Control-Custom.txt\"&gt;&lt;\/script&gt;<br><br>&lt;!-- FONT AWESOME CDN --&gt;<br>&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"&gt;<br><br>&lt;\/head&gt;<br><br>&lt;style&gt;<br><br>&lt;\/style&gt;<br><br>&lt;body&gt;<br>\t&lt;div id=\"mapid3\" style=\"height:600px;\"&gt;&lt;\/div&gt; &lt;! fixed size set as a style property &gt;<br>&lt;\/body&gt;<br><br>&lt;script&gt;<br><br>\/\/leaflet map object<br>var map = L.map('mapid3',{<br>\tzoomControl:false,<br>\tmaxBounds:&#91;&#91;-90,-180],&#91;90,180]],<br>});<br>map.setView(&#91;30, 0], 3);<br><br>\/\/Define ESRI maps<br>var natgeomap = L.esri.basemapLayer(\"NationalGeographic\");<br>var graymap = L.esri.basemapLayer(\"Terrain\");<br><br>\/\/Add unlabeled layer to map<br>graymap.addTo(map);<br><br><br>\/\/Set map style<br>var layerstyle = {<br>\tweight: 0.5,<br>\tcolor: \"grey\",<br>\tdashArray: \"5\",<br>\tfillOpacity: 0,<br>\t};<br><br><br>function mouseOver(feature, layer, e){<br>\tlayer.on({<br>\t\tmouseover: highlight,<br>\t\tmouseout: restore,<br>\t\tclick: focus,<br>\t});<br>} <br><br>function highlight(e){<br>\tvar layer = e.target;<br><br>\tlayer.setStyle({<br>\tcolor:\"red\",<br>\tweight: 2,<br>\t});<br><br>\tcoords=layer.getBounds().getCenter();<br>\tcountry=e.target.feature.properties.name;<br>\t<br>\t\/\/fix known issues with browsers<br>    \t<br>\tif (!L.Browser.ie &amp;&amp; !L.Browser.opera &amp;&amp; !L.Browser.edge) {<br>\t\tlayer.bringToFront();<br>    \t}<br>}<br><br>function restore(e){<br>\tvar layer = e.target;<br><br>\tlayer.setStyle(layerstyle);<br>\t<br>\t\/\/fix known issues with browsers<br>    \t<br>\tif (!L.Browser.ie &amp;&amp; !L.Browser.opera &amp;&amp; !L.Browser.edge) {<br>\t\tlayer.bringToFront();<br>    \t}<br>}<br><br>\/\/instantiate label object<br>var label;<br><br>function focus(e){<br>\tlabel = L.tooltip().setContent(country+\" !!\").setLatLng(coords);<br>\tlabel.addTo(map);<br>\tmap.fitBounds(e.target.getBounds());<br>\/\/\tgraymap.remove;<br>\tmap.removeLayer(graymap);<br>\tnatgeomap.addTo(map);<br>}<br><br>\/\/Add home (reset) button<br><br>L.control.custom({<br>\tposition: 'topleft',<br>\tcontent: '&lt;button type=\"button\" class=\"btn btn-default\"&gt;'+<br>\t\t'\t&lt;i class=\"fa fa-home\"&gt;&lt;\/i&gt;'+<br>\t\t'&lt;\/button&gt;',<br>\tstyle:{<br>\t\t<br>\t\t},<br>\tevents:{<br>\t\tclick: function(){<br>\t\t\tmap.setView(&#91;30, 0], 3);<br>\t\t\tmap.removeLayer(natgeomap);<br>\t\t\tgraymap.addTo(map);<br>\t\t\tmap.removeLayer(label);<br>\t\t\t}<br>\t\t},<br>\t}).addTo(map);<br><br>L.control.zoom().addTo(map);<br><br>\/\/Add geoJson layer<br>L.geoJson(countries, {<br>\tstyle: layerstyle,<br>\tonEachFeature: mouseOver,<br>\t}).addTo(map);<br><br>&lt;\/script&gt;<br>&lt;\/html&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Aqu\u00ed ir\u00e9 volcando algunos ejemplos molones que se pueden conseguir con Leaflet JS. 1. Encabezado bloqueado del mundo en escala de grises. Caracter\u00edsticas: Mapa de ESRI-OSM gratuito en escala de grises. Nivel de zoom a escala global: L.map zoom level definido en 0. Deshabilitados controles de usuario, creando una vista bloqueada. Altura fija definida en [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":893,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-873","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-map-es","post-preview"],"_links":{"self":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/873","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=873"}],"version-history":[{"count":5,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/873\/revisions"}],"predecessor-version":[{"id":1077,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/873\/revisions\/1077"}],"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=873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}