3f:null 40:["$","title",null,{"children":"WMS Services with Leaflet | Carmen Torrecillas | Observable"}] 46:[] 44:{"id":"470635179c16565a","slug":"servicios-wms-con-leaflet","title":"WMS Services with Leaflet","thumbnail":"35ebb65285e850fc378ffbf42ffb2688b784744b8130f70b507890183bf76efc","access_level":"public","create_time":"$D2021-07-19T08:55:26.312Z","update_time":"$D2021-07-28T18:01:50.556Z","view_time":null,"first_public_time":"$D2021-07-28T18:02:01.541Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a262e760e83526f4","login":"carmen-tm","name":"Carmen Torrecillas","avatar_url":"https://avatars-next.observableusercontent.com/6166cc1d0d1b54f27c95caecb76fb456af5de2933e87f457e55d4d06b1973062","tier":"starter_2024","bio":"Data visualisation at @civio, a non-profit journalism organisation specialising in public data and access to information. ","following":false},"version":324,"publish_version":324,"role":null,"authored":false,"authors":[{"type":"individual","id":"8b6befb4233b6103","login":"carmen-tm","name":"Carmen Torrecillas","avatar_url":"https://avatars-next.observableusercontent.com/6166cc1d0d1b54f27c95caecb76fb456af5de2933e87f457e55d4d06b1973062","tier":null,"bio":"Data visualisation at @civio, a non-profit journalism organisation specialising in public data and access to information. ","following":false}],"members":[{"type":"individual","id":"8b6befb4233b6103","login":"carmen-tm","name":"Carmen Torrecillas","avatar_url":"https://avatars-next.observableusercontent.com/6166cc1d0d1b54f27c95caecb76fb456af5de2933e87f457e55d4d06b1973062","tier":null,"role":"editor"}],"comments":[{"id":"2dce7fc7df758638","reply_to_id":null,"content":"Buen trabajo!","create_time":"$D2024-06-13T10:03:05.438Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"fc40b9c6da01768d","slug":"learning-mapboxgl","title":"## Learning - MapboxGL / Leaflet","owner":{"id":"a262e760e83526f4","login":"carmen-tm","name":"Carmen Torrecillas"}},"type":"notebook","body":{"titling":"auto","title":"WMS Services with Leaflet","cells":[{"id":0,"value":"md`# WMS Services with Leaflet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"md`\nSome examples painting **WMS services** layers with **Leaflet.js**.\n\nTo know about the WMS parameters (such us layer name, CRS/SRS, or image format) just query GetCapabilities like this: \\`request=GetCapabilities&service=WMS\\` to see the XML response.\n\n- More info about[ WMS services (Spanish)](https://mappinggis.com/2018/01/accediendo-a-los-datos-de-un-servicio-wms-con-leaflet/\n).\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`\n** New Jersey Office of GIS** ([link](https://newjersey.maps.arcgis.com/home/webmap/viewer.html?layers=3c1090054fee4a498514659d57bfe4ae))\n\n- WMS Service: https://img.nj.gov/imagerywms/Natural2015\n- Parameters: https://img.nj.gov/imagerywms/Natural2015?request=GetCapabilities&service=WMS\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"map6 = {\n const container = html`

`;\n yield container;\n\n let map = L.map(container).setView([40.6892, -74.5447], 6);\n let osmLayer = L.tileLayer(\n 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',\n {\n attribution:\n '© OpenStreetMap contributors'\n }\n ).addTo(map);\n\n let rdtr = L.tileLayer\n .wms('https://img.nj.gov/imagerywms/Natural2015', {\n layers: 'Natural2015',\n format: 'image/png',\n transparent: 'true'\n })\n .addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`\n\n**Spanish Catastro** (land registry) ([link](http://www.catastro.meh.es/esp/sede.asp))\n\n- WMS Service: http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?\n\n- Parameters:\nhttp://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?request=GetCapabilities&service=WMS\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"mapCatastro1 = {\n const container = html`

`;\n yield container;\n\n let map = L.map(container).setView([40.42, -3.7], 16);\n let osmLayer = L.tileLayer(\n 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',\n {\n attribution:\n '© OpenStreetMap contributors'\n }\n ).addTo(map);\n\n // Catastro!\n // http://www.catastro.minhap.gob.es/esp/wms.asp\n var catastro = L.tileLayer\n .wms(\"https://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?\", {\n layers: \"PARCELA\", //nombre de la capa (ver get capabilities)\n format: 'image/png',\n transparent: true,\n version: '1.1.1', //wms version (ver get capabilities)\n attribution: \"DIRECCION GENERAL DEL CATASTRO\"\n })\n .addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"mapCatastro2 = {\n const container = html`

`;\n yield container;\n\n let map = L.map(container).setView([40.42, -3.7], 15);\n let osmLayer = L.tileLayer(\n 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',\n {\n attribution:\n '© OpenStreetMap contributors'\n }\n ).addTo(map);\n\n // Catastro!\n // http://www.catastro.minhap.gob.es/esp/wms.asp\n var pnoa = L.tileLayer\n .wms(\"https://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?\", {\n layers: \"CATASTRO\", //nombre de la capa (ver get capabilities)\n format: 'image/jpg',\n transparent: true,\n version: '1.1.1', //wms version (ver get capabilities)\n attribution: \"DIRECCION GENERAL DEL CATASTRO\"\n })\n .addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"md`\n**Junta Andalucía** ([link](https://www.juntadeandalucia.es/medioambiente/portal/datos-ambientales))\n- WMS Service:\nhttp://www.juntadeandalucia.es/medioambiente/mapwms/REDIAM_Ortofoto_Andalucia_1956?\n\n- Parameters:\nhttp://www.juntadeandalucia.es/medioambiente/mapwms/REDIAM_Ortofoto_Andalucia_1956?request=GetCapabilities&service=WMS\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"mapJunta2 = {\n const container = html`

`;\n yield container;\n\n let map = L.map(container).setView([37.9, -4.5], 10);\n let osmLayer = L.tileLayer(\n 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',\n {\n attribution:\n '© OpenStreetMap contributors'\n }\n ).addTo(map);\n\n var rediam = L.tileLayer\n .wms(\n \"https://www.juntadeandalucia.es/medioambiente/mapwms/REDIAM_Ortofoto_Andalucia_1956?\",\n {\n layers: \"REDIAM\", //nombre de la capa (ver get capabilities)\n format: 'image/png',\n transparent: true,\n version: '1.3.0', //wms version (ver get capabilities)\n attribution: \"Junta de Andalucía\"\n }\n )\n .addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"md`\n**IGN PNOA Orthophotos** (National Centre for Geographic Information) ([link](https://www.ign.es/web/ign/portal/inicio))\n\n- WMS Service:\nhttp://www.ign.es/wms-inspire/pnoa-ma\n\n- Parameters:\nhttp://www.ign.es/wms-inspire/pnoa-ma?request=GetCapabilities&service=WMS&VERSION=1.3.0\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"map5 = {\n const container = html`

`;\n yield container;\n\n let map = L.map(container).setView([40.42, -3.7], 13);\n let osmLayer = L.tileLayer(\n 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',\n {\n attribution:\n '© OpenStreetMap contributors'\n }\n ).addTo(map);\n\n // IGN\n // http://www.ign.es/wms-inspire/pnoa-ma?request=GetCapabilities&service=WMS&VERSION=1.3.0\n var geoportal = L.tileLayer\n .wms(\"https://www.ign.es/wms-inspire/pnoa-ma?\", {\n layers: \"OI.OrthoimageCoverage\", //nombre de la capa (ver get capabilities)\n format: 'image/png',\n transparent: true,\n version: '1.3.0', //wms version (ver get capabilities)\n attribution: \"IGN\"\n })\n .addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`\n**Madrid geoportal** ([link](https://geoportal.madrid.es/IDEAM_WBGEOPORTAL/index.iam))\n- WMS Service:\nhttps://sigma.madrid.es/arcgismalla/services/SIGMA/MPCARTO2D_FONDO/MapServer/WMSServer?\n\n- Parameters:\n https://sigma.madrid.es/arcgismalla/services/SIGMA/MPCARTO2D_FONDO/MapServer/WMSServer?request=GetCapabilities&service=WMS\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md`Ex.01: painting just 1 layer (layer 04: Vegetacion Arb Urbano):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"map3 = {\n const container = html`

`;\n yield container;\n\n let map = L.map(container).setView([40.42, -3.7], 12);\n let osmLayer = L.tileLayer(\n 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',\n {\n attribution:\n '© OpenStreetMap contributors'\n }\n ).addTo(map);\n\n // Geoportal Madrid\n // https://geoportal.madrid.es/IDEAM_WBGEOPORTAL/dataset.iam?id=0b9aae3c-5a0a-11e9-a3f2-ecb1d752b636\n var geoportal = L.tileLayer\n .wms(\n \"https://sigma.madrid.es/arcgismalla/services/SIGMA/MPCARTO2D_FONDO/MapServer/WMSServer?\",\n {\n layers: \"4\", //nombre de la capa (ver get capabilities)\n format: 'image/png',\n transparent: true,\n version: '1.3.0', //wms version (ver get capabilities)\n attribution: \"Ayuntamiento de Madrid\"\n }\n )\n .addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"md`Ex.02: painting all (layers 01-110):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"map4 = {\n const container = html`

`;\n yield container;\n\n let map = L.map(container).setView([40.42, -3.7], 13);\n let osmLayer = L.tileLayer(\n 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',\n {\n attribution:\n '© OpenStreetMap contributors'\n }\n ).addTo(map);\n\n // Geoportal Madrid\n // https://geoportal.madrid.es/IDEAM_WBGEOPORTAL/dataset.iam?id=0b9aae3c-5a0a-11e9-a3f2-ecb1d752b636\n var geoportal = L.tileLayer\n .wms(\n \"https://sigma.madrid.es/arcgismalla/services/SIGMA/MPCARTO2D_FONDO/MapServer/WMSServer?\",\n {\n layers: catastroLayers, //nombre de la capa (ver get capabilities)\n format: 'image/png',\n transparent: true,\n version: '1.3.0', //wms version (ver get capabilities)\n attribution: \"Ayuntamiento de Madrid\"\n }\n )\n .addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"catastroLayers = d3.range(1, 110).map(String)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"