(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[50593],{73525:function(e,a,t){Promise.resolve().then(t.bind(t,71138))},51465:function(e,a,t){"use strict";var n=t(57437),o=t(19571),r=t(78236),i=t(33968);a.Z=e=>{let{content:a}=e,t={blogContent:{fontFamily:"Roboto, Arial, sans-serif",lineHeight:1.6,fontSize:"16px",maxWidth:"1200px",margin:"auto",padding:"10px"},codeBlock:{background:"#f5f5f5",borderRadius:"5px",padding:"5px"},syntaxHighlighter:{background:"#282c34",padding:"10px",borderRadius:"5px",overflowX:"auto"},image:{maxWidth:"100%",maxHeight:"600px",width:"auto",height:"auto",display:"block",margin:"auto",marginTop:"20px",marginBottom:"20px",borderRadius:"8px"},blockquote:{padding:"10px 20px",margin:"20px 0",backgroundColor:"#f9f9f9",borderRadius:"8px"},a:{textDecoration:"none"}};return(0,n.jsx)("div",{style:t.blogContent,children:(0,n.jsx)(o.U,{components:{code(e){let{node:a,inline:o,className:s,children:l,...d}=e,c=/language-(\w+)/.exec(s||"");return!o&&c?(0,n.jsx)(r.Z,{style:{...i.Z,...t.syntaxHighlighter},language:c[1],PreTag:"div",...d,children:String(l).replace(/\n$/,"")}):(0,n.jsx)("code",{style:t.codeBlock,className:s,...d,children:l})},img:e=>{let{node:a,...o}=e;return(0,n.jsx)("img",{style:t.image,...o})},blockquote:e=>{let{node:a,...o}=e;return(0,n.jsx)("blockquote",{style:t.blockquote,...o})},a:e=>{let{node:a,...o}=e;return(0,n.jsx)("a",{style:t.a,...o})}},children:a})})}},50534:function(e,a,t){"use strict";var n=t(57437),o=t(60759),r=t.n(o),i=t(2265);t(35046);var s=t(90832),l=t.n(s);a.Z=()=>{let e=(0,i.useRef)(null);return(0,i.useEffect)(()=>{if(!e.current)return;let a=r().map(e.current).setView([40.452173,-3.690662],15);return r().tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(a),()=>{a.remove()}},[]),(0,n.jsx)("div",{className:l().map,ref:e,style:{}})}},48951:function(e,a,t){"use strict";var n=t(57437),o=t(26225),r=t.n(o),i=t(2265),s=t(16449);let l=(0,i.forwardRef)((e,a)=>{let{children:t,title:o="",meta:i,...l}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(r(),{children:[(0,n.jsx)("title",{children:"".concat(o," | Geopois: Geospatial React UI and Maps Tools")}),(0,n.jsx)("meta",{name:"description",content:"Integrate maps and geospatial data into your React or Next.js apps easily with geopois. Perfect for developers looking to enhance spatial data visualization."},"desc"),(0,n.jsx)("meta",{property:"og:title",content:"Geopois: Geospatial React UI and Maps Tools"}),(0,n.jsx)("meta",{property:"og:description",content:"Integrate maps and geospatial data into your React or Next.js apps easily with geopois. Perfect for developers looking to enhance spatial data visualization."}),(0,n.jsx)("meta",{property:"og:image",content:"https://geopois.com/favicon/geopois.png"}),i]}),(0,n.jsx)(s.Z,{ref:a,...l,children:t})]})});a.Z=l},18810:function(e,a,t){"use strict";var n=t(57437),o=t(2265),r=t(16449),i=t(67208),s=t(97260),l=t(5002),d=t(8350),c=t(36137),p=t(31691);let m={"& .MuiCardHeader-action":{mr:0}},u=o.forwardRef((e,a)=>{let{border:t=!1,boxShadow:o,children:u,content:g=!0,contentClass:f="",contentSX:h={},darkTitle:x,secondary:b,shadow:y,sx:j={},title:v,...Z}=e,k=(0,p.Z)();return(0,n.jsx)(r.Z,{sx:{[k.breakpoints.down("sm")]:{marginLeft:0,marginRight:0,paddingLeft:0,paddingRight:0}},children:(0,n.jsxs)(i.Z,{ref:a,...Z,sx:{border:t?"1px solid":"none",borderColor:"dark"===k.palette.mode?k.palette.background.default:k.palette.grey[300]+98,":hover":{boxShadow:o?y||("dark"===k.palette.mode?"0 2px 14px 0 rgb(33 150 243 / 10%)":"0 2px 14px 0 rgb(32 40 45 / 8%)"):"inherit"},[k.breakpoints.down("sm")]:{marginLeft:0,marginRight:0,paddingLeft:0,paddingRight:0,boxShadow:"none",border:"none"},...j},children:[!x&&v&&(0,n.jsx)(s.Z,{sx:m,title:v,action:b}),x&&v&&(0,n.jsx)(s.Z,{sx:m,title:(0,n.jsx)(l.Z,{variant:"h3",children:v}),action:b}),v&&(0,n.jsx)(d.Z,{}),g&&(0,n.jsx)(c.Z,{sx:{[k.breakpoints.down("sm")]:{paddingLeft:0,paddingRight:0},...h},className:f,children:u}),!g&&u]})})});a.Z=u},2466:function(e,a,t){"use strict";t.d(a,{Z:function(){return c}});var n=t(57437),o=t(67116),r=t(16449),i=t(94013),s=t(8350),l=t(97312),d=t(5002);function c(e){let{name:a,title:t,imageUrl:c,linkedInUrl:p}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("br",{}),(0,n.jsx)(s.Z,{variant:"middle",style:{maxWidth:"80%",textAlign:"center",margin:"auto"}}),(0,n.jsxs)(r.Z,{sx:{display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",py:4,color:"text.primary"},children:[(0,n.jsx)(o.Z,{alt:a,src:c,sx:{width:90,height:90,mb:2}}),(0,n.jsx)(d.Z,{variant:"h4",sx:{fontWeight:"bold",mb:1},children:a.toUpperCase()}),(0,n.jsx)(d.Z,{variant:"subtitle1",sx:{mb:2},children:t}),(0,n.jsx)(i.Z,{component:l.Z,href:p,target:"_blank",rel:"noopener noreferrer",sx:{textTransform:"none",fontWeight:"bold",color:"primary.main",display:"flex",alignItems:"center",gap:.5},children:"Follow me on LinkedIn"})]})]})}},53239:function(e,a,t){"use strict";t.d(a,{RK:function(){return o},dv:function(){return n}});let n=3,o=260},71138:function(e,a,t){"use strict";t.d(a,{default:function(){return p}});var n=t(57437),o=t(89414),r=t(48951),i=t(53239),s=t(18810),l=t(50534),d=t(51465),c=t(2466),p=()=>(0,n.jsx)(r.Z,{title:"C\xf3mo aplicar un filtro de escala de grises a las teselas de Leaflet",children:(0,n.jsx)(s.Z,{title:"C\xf3mo aplicar un filtro de escala de grises a las teselas de Leaflet",children:(0,n.jsxs)(o.ZP,{container:!0,spacing:i.dv,children:[(0,n.jsx)(o.ZP,{item:!0,xs:12,md:12,children:(0,n.jsx)("div",{children:(0,n.jsx)(l.Z,{})})}),(0,n.jsx)(o.ZP,{item:!0,xs:12,md:12,children:(0,n.jsx)(d.Z,{content:'\n# C\xf3mo aplicar un filtro de escala de grises a las teselas de Leaflet\n\n### En este tutorial veremos c\xf3mo aplicar un filtro de escala de grises a las teselas de Leaflet Modificando el CSS.\n\nEl c\xf3digo completo para visualizar el mapa a pantalla competa en formato HTML lo ten\xe9is a continuaci\xf3n, para los que no est\xe9n familiarizados con el lenguaje HTML, solo ten\xe9is que copiar y pegar en un editor de texto y guardarlo con la extensi\xf3n .html\n\nFinalmente, una vez guardado pod\xe9is abrirlo con cualquier navegador.\n\n~~~html\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n      <title>Leaflet-Grayscale</title>\n      <meta charset="utf-8" />\n      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>\n      <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>\n      <style type="text/css">\n      .leaflet-tile-loaded {\n          filter: brightness(1) invert(1) grayscale(10);\n      }\n      .leaflet-container a {\n        color: #000000;\n      }\n      .leaflet-container .leaflet-control-attribution {\n        background: none;\n        background-color: #fff;\n      }\n      body { margin:0; padding:0; }\n      #map { position:absolute; top:0; bottom:0; width:100%; }\n      </style>\n  </head>\n  <body>\n    <div id="map"></div>\n    <script>\n      var map = L.map(\'map\').\n      setView([40.452173, -3.690662], \n      15);\n      L.tileLayer(\'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\', {\n          attribution: \'Map data \xa9 <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>\',\n          maxZoom: 18\n      }).addTo(map);\n      </script>\n  </body>\n</html>\n~~~\n\nVamos a mostraros un poco de magia CSS y explicaros el c\xf3digo.\n\nLa primera parte del c\xf3digo se inserta en la cabecera o head, en ella aparecen dos enlaces una es los estilos o CSS y otra es el JavaScript de Leaflet necesarios para que el mapa sea interactivo.\n\n~~~html\n<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>\n<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>\n~~~     \n\nLa segunda parte del c\xf3digo que tambi\xe9n se incluye en el head, hace referencia a los estilos de este mapa en particular, aqu\xed es donde vamos a cambiarle el aspecto grafico del mapa, para ello aplicaremos los estilos directamente sobre las teselas de Leaflet.\n\nSi nos fijamos en cualquier mapa de Leaflet, al cargar las teselas, estas aparecen etiquetadas en la clase _leaflet-tile-loaded_, as\xed que debemos aplicar el filtro sobre esa clase, de la siguiente manera:\n\n~~~html\n.leaflet-tile-loaded {\n    filter: brightness(1) invert(1) grayscale(10);\n}\n~~~\n\nDonde _brightness_ es el brillo, _invert_ se utiliza para invertir las muestras de color, y _grayscale_ para cambiar las im\xe1genes a una escala de grises.\n\nTambi\xe9n hemos querido darle un aspecto atractivo a la parte inferior del mapa, donde se insertan las atribuciones, d\xe1ndoles un color acorde al mapa de la siguiente manera:\n\n~~~html\n.leaflet-container a {\n  color: #000000;\n}\n.leaflet-container .leaflet-control-attribution {\n  background: none;\n  background-color: #fff;\n}\n~~~         \n\nY para finalizar con el apartado de estilos, le damos el tama\xf1o apropiado al contenedor del mapa, de la siguiente manera:\n\n~~~html\nbody { margin:0; padding:0; }\n#map { position:absolute; top:0; bottom:0; width:100%; }\n~~~       \n\nLa tercera parte del c\xf3digo y una vez dentro del cuerpo o body, corresponde al contenedor, ver\xe9is que est\xe1 directamente relacionado con los estilos (#map), ya que tiene un identificador id=map.\n\n~~~html\n<div id="map"></div>\n~~~          \n\nFinalmente, la parte del script est\xe1 dividida en 3 partes importantes:\n\nLa parte que hace referencia a las coordenadas geogr\xe1ficas del punto central del mapa en grados decimales, donde la primera coordenadas es la Latitud y la segunda coordenada es la Longitud.\n\nEl n\xfamero que aparece a continuaci\xf3n es el factor de escala del mapa, donde 1 es escala peque\xf1a y los siguientes n\xfameros escalas m\xe1s grandes.\n\nEn el apartado atribuci\xf3n se identifica a los creadores del c\xf3digo Javascript, como [Leaflet](https://leafletjs.com/) y la fuente de la base de datos como [OpenStreetMap](https://www.openstreetmap.org/) as\xed como la licencia, en este caso [CC BY-SA](https://creativecommons.org/licenses/by-sa/3.0/es/).\n\nY para cerrar la parte del Script podemos a\xf1adir el zoom m\xe1ximo del mapa (maxZoom: 18).\n\n~~~js\n<script>\n  var map = L.map(\'map\').\n  setView([40.452173, -3.690662], \n  15);\n  L.tileLayer(\'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\', {\n      attribution: \'Map data \xa9 <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>\',\n      maxZoom: 18\n  }).addTo(map);\n</script>\n~~~        \n\nModificando el filter podemos hacer muchos tipos de mapas diferentes, por ejemplo, cambiando el tono, la saturaci\xf3n o el brillo.\n\n\xbfAlguna pregunta? \xbfQuieres realizar sinergias o colaboraciones? \xbfTe gustar\xeda enviarnos feedback sobre el tutorial? No dudes en contactar a jgabas@geopois.com.\n'})}),(0,n.jsx)(o.ZP,{item:!0,xs:12,md:12,children:(0,n.jsx)(c.Z,{name:"Javier Gab\xe1s Jim\xe9nez",title:"Geodesic Engineer and Founder at geopois.com",imageUrl:"/assets/images/team/Javier_Gabas.jpg",linkedInUrl:"https://www.linkedin.com/in/jgabas/"})})]})})})},35046:function(){},90832:function(e){e.exports={map:"Map_map__0Df9y"}}},function(e){e.O(0,[4731,84212,41868,2657,19472,44584,66751,26379,67116,74691,92971,52117,1744],function(){return e(e.s=73525)}),_N_E=e.O()}]);