Muchas gracias! Muy claros y didácticos tus videos, sería interesante también alguna guía especial para wordpress, hay algunos plugins (como leaflet-map y extensions-leaflet-map) que me parece podrían simplificar varios pasos del proceso de instalación, para enfocarse más en el diseño en sí del mapa, sería interesante si conoces algunos tips de como sacarles provecho, considerando que tmbn permiten integrar GeoJSON hasta donde entiendo; de antemano muchas gracias, saludos.
Hola una consulta, se puede conectar a una bd postgis para traer poligonos al mapa de leafleat ?? por ejemplo : un usuario selecciona un departamento , ir a la bd buscar ese departamento y cargarle el poligono del departamento
Hola Alan! Gracias por esa pregunta tan interesante. Si es posible, pero no de forma directa. Leaflet, al ser una librería de JavaScript que corre en el navegador, no puede conectarse directamente a una base de datos como PostGIS, basicamente por temas de seguridad, protocolos de comunicacion y procesamiento de los datos. Sin embargo es posible visualizar informacion de una base de datos PostGIS usando un desarrollo backend con Node.js/Express, Flask o Django. De esta manera Leaflet le hace la petición a este backend que funciona como API y el backend se comunica con la base de datos. De esta manera es posible hacer lo que planteas en el ejemplo de consultar departamentos. Espero que la información te sea de utilidad y muchas gracias por tu apoyo al canal 🎉🥳
saludos ingeniero, una pregunta, cómo hago para poder obtener la información de un polígono catastral al hacerle click, que me muestre su clave, área, zona, etc etc
Hola Edmundo, gracias por tu comentario. En el minuto 30 explico como usar un PopUp que muestre información. Debes tener la información de clave, área, zona y demás en tu GeoJSON poligonal y configurar el PopUp. Espero que la información te sea de utilidad 😀
@@GeoCositasParaDummies si ingeniero muchas gracias, quizá me faltó preguntar algo más, o sea quiero que sea interactiva la consulta, es decir que venga anclada a una base de datos en la que se van haciendo cambios diarios, y esos cambios se vayan reflejando en el mapa al hacer click, sería algo así como cuando llamamos un servicio desde geoserver. Espero haberme hecho entender ingeniero, muchas gracias
Hola profesor muchas gracias por compartir sus conocimientos. Tengo una consulta, estoy intentando cargar un layer que tiene un aproximado de 45mil puntos, es muy densa y al momento de cargar el geoportal esta siendo muy lento y aun le falta agregar otras layer, tiene alguna sugerencia que pueda aplicar para que el cargado sea un poco mas rápido ?
Hola Daniel, gracias por tu apoyo y comentario 😊. En cuanto a tu pregunta, necesito un poco más de contexto. Por ejemplo la capa que estas leyendo donde está alojada? en que formato está? es un servicio de un tercero? que tecnologías estás utilizando?. Sin embargo trataré de comentarte algunos detalles generales: 1. Puedes usar plugins como Leaflet.markercluster que permiten agrupan puntos cercanos y reducir la cantidad de elementos renderizados. 2. Si no necesitas mucha precision, puedes simplificar los poligonos usando Mapshaper. 3. Trata de usar datos en formato GeoJSON comprimido para reducir el tamaño de los archivos. 4. SI hay muchas capas, considera cargar datos adicionales solo cuando el usuario activa una capa específica. 5. Verifica el rendimiento del servidor, puedes configurar temas de caché, compresión de datos o configuración a nivel de servidor Estas son algunas de las opciones, sin embargo depende mucho de cada caso particular. Espero que esta información te sea de utilidad y de nuevo muchas gracias por tu apoyo! 🎉🥳
Hola profesor@@GeoCositasParaDummies, se trata de un visor que estoy construyendo. Son capas que estoy transformando a formato geojson para poder cargar al visor. De hecho la solución que encontré fue usar el plugins de leaflet.marketcluster pero me sería más útil tener los puntos de los abiertos mientras el usuario del visor vaya haciendo zoom es algo que aún estoy intentando modelar. Al final mi intención es cargar mi visor en github para consultar en la web. Si cuenta con otra recomendación sería muy valiosa. Saludos
Muy buen video, ya se ganó un suscriptor, una consulta como puedo simular un auto avanzando en una avenida en la mapa? espero que lo hagas ese video. gracias
Hola Cesar, muchas gracias por tu apoyo 🥳🎉. En cuanto a tu pregunta, hay varias formas de hacerlo. Usando Leaflet con algunas librerias de realtime o jugando un poco con intervalos y arrays para cambiar las coordenadas de un marcador. Tambien está Mapbox que ofrece una implementación un poco más interesante. Es un tema que si me han solicitado y posiblemente cubra más adelante en un video. Gracias! 🙂
Hola Martin, me alegra mucho que hayas encontrado lo que buscabas en mi canal 🎉. Me puedes escribir tu duda acá en un comentario, o si prefieres, mis redes y correo están en mi perfil. Por cualquiera de ellas me puedes escribir tu duda. Gracias!
@GeoCositasParaDummies Hola Juan Manuel no me permitió ver tu dirección de correo así te que te pregunto por aquí, tengo una base de datos de estaciones meteorológicas y quiero mostrar los últimos reportes de las tablas en esos puntos, como podría hacer? Saludos desde Argentina y muchísimas gracias por tu aporte!
@@mluduenia Si deseas leer data de una base de datos, se necesita algo intermedio que haga la consulta en base de datos y retorne la data en formato JSON que es compatible con Leaflet y JavaScript. Es como si desde Leaflet le hicieras la petición a ese algo intermedio (algo así como una API) y ese algo se comunica con la base de datos. Puedes desarrollar esa API por ejemplo con Node.JS y desde Leaflet le haces una petición con fetch para obtener la data. Ya cuando la consulta esté, puedes afinarla con condicionales o filtros según tu necesidad. En mi canal tengo una lista de reproducción de APIS Geográficas, tal vez te pueda servir th-cam.com/play/PL_YyCdnLDJAir5HWyRrBje-nBFIFTfv7I.html. Gracias!
Hola IngJuanMaSaurez, place de saludarlo. Lo sigo desde hace un tiempo y le agradezco por el contenido que esta creando. Soy Ignacio de Uruguay. Estoy intentando crear un geoportal en leaflet aunque en mi caso intento importar datos desde Geoserver para luego desde un buscador mediante una consulta CQL_filter poder realizar la peticion y mostrarlo en el mapa. Agradezco su ayuda de ser posible. Saludos desde Uruguay
Hola Ignacio, gracias por el apoyo al contenido del canal 😄. En cuanto a tu duda lo primero es tener el servicio web geográfico en Geoserver. El atributo CQL_FILTER no es un parámetro estándar de un servicio web pero lo soporta GeoServer, por eso es importante primero tener los servicios allí. Luego desde Leaflet puedes usar la clase TileLayer.wms y enviarle como parámetro el atributo CQL_FILTER con la consulta que deseas realizar. Espero haberme hecho entender y haber respondido u orientado tu pregunta. Lastimosamente como no es algo nativo de Leaflet en su documentación no hay información clara relacionada sino que te redirecciona a Geoserver.
Hola JuanMa. Gracias por tus videos. Estoy aprendiendo un montón. Me queda una duda hasta ahora y es como visualizar puntos que no tengan la forma de pin o marcador. Quisiera, por ejemplo, que se muestren como un punto, como un cuadradito o como un triángulo. Tengo unos datos de prueba que me los entregaron en shp y los convertí a geoJSON usando QGIS, pero Leaflet los visualiza como pin y son un poco molestos al verlos como una nube super densa de pines. Revisé la documentación de geoJSON para ver si hay una opción de cambiar el simbolo por defecto, pero no conseguí nada. Cualquier sugerencia es bienvenida. Gracias y saludos
Hola Gustavo 😀. Leaflet permite cambiar ese pin, te comparto dos opciones: 1. Puedes usar clases como Polygon, Marker o CircleMarker para crear triangulos, cuadraos o circulos y que esos sean tu nueva simbologia. El problema es que debes definir las coordenadas de cada uno de los vertices a partir del punto central que es donde estaría el dato, esto hace que sea algo tedioso. Te daré un ejemplo de código para que sean círculos, allí uso precisamente circleMarker con las coordenadas de cada punto y la configuracion de la simbologia: L.geoJSON(puntosDeInteresGeoJSON, { pointToLayer: function (feature, latlng) { let opciones = { radius: 8, // Tamaño del círculo fillColor: "#ff7800", // Color de relleno color: "#000", // Color del borde weight: 1, // Grosor del borde opacity: 1, // Opacidad del borde fillOpacity: 0.8 // Opacidad del relleno }; return L.circleMarker(latlng, opciones); } }).addTo(mapa); 2. Puedes usar un ícono personalizado, incluso puede ser un triangulo o cuadrado y sería mucho más sencillo. Para esto te sirven las clases Marker en conjunto con Icon. El código de ejemplo seria algo como: var miIconoPersonalizado = L.icon({ iconUrl: 'icono.png', // Path del icono iconSize: [24, 24], // Tamaño del icono }); L.geoJSON(puntosDeInteresGeoJSON, { pointToLayer: function(feature, latlng) { return L.marker(latlng, {icon: miIconoPersonalizado}); } }).addTo(mapa); Espero que la información te sea de utilidad y muchas gracias por tu apoyo al canal 🎉🎉
@@GeoCositasParaDummies Muchas gracias por tu respuesta. Noto que tomaste tiempo para buscar opciones y además es pensada. Eso lo valoro Te hago saber como me va. Un abrazo
Hola Davi! Gracias por tu comentario y tu pregunta. Si es posible, aunque es bastante complejo ya que no es algo de Leaflet sino de pura manejo de JavaScript. Seria necesario hacer una lista de distancias y otra de ángulos, usar funciones trigonométricas y ciclos para calcular las coordenadas obtenidas luego de aplicar la distancia y el ángulo de cada posición de la lista. Y con esto crear una lista de coordenadas calculadas a partir de lo anterior. Finalmente ya con estas coordenadas crear el polígono y agregarlo al mapa como cualquier capa convencional. Espero que la información te sea de utilidad 😀
@@GeoCositasParaDummies Hola, Juan, Vi tu respuesta ahora. Pregunto: ¿Estarías dispuesto a crear una pantalla simple con estos requisitos? Es para un trabajo académico que yo y otros estudiantes estamos tratando de desarrollar. Si puedes, cual es tu email de contacto? Me pasas tu propuesta. ¡Gracias otra vez!
solo voy hacer un poco de ruido entre el video 5 y este video lo que encontre un poco trabajar el geojson y a la vez leer directamente : fetch("data/aeropuertos.geojson") .then(function(response) { return response.json(); }) .then(function(data) { L.geoJSON(data).addTo(mapa); }); fetch("data/localidades.geojson") .then(function(response) { return response.json(); }) .then(function(data) { L.geoJSON(data,{ style:{ color:'green' } } ).addTo(mapa); }); solo tengo el detalle del icono y cuanta informacion me interesa leer por ejemplo Pais (provincia -->region-->comuna) , imagina cuantos puntos me aparecieron con el mismo icono jajaja
🤯 Excelente dato, lo probé y funciona bastante bien, no es necesario editar el geojson en el caso de Leaflet: Aunque siento que se demora un poco más en renderizar los datos. Muchas gracias por el aporte Fernando 🥳
"Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en file:///D:/Cursos/Geoportal/Geoportal%20copia/data/predio_loja_pol.kml (razón: la solicitud CORS no es http)". Saludos ingeniero, le comento que no me sale la información del archivo kml, me sale ese texto que le puse entre comillas en la consola. Cómo se soluciona? muchas gracias
Hola Edmundo. Gracias por tu pregunta y disculpa la demora en mi respuesta. Me alegra que lo hayas podido solucionar 😁. Podrias compartir la solución? Depronto otros estudiantes tienen el mismo problema. Gracias!
@@GeoCositasParaDummies Usando visual studio code, haciendo clic en la parte baja derecha "go live" para ejecutar un servidor en vivo, luego ello me permitió obtener una dirección ip la cual la ingresé como dirección local en el código
Muchas gracias! Muy claros y didácticos tus videos, sería interesante también alguna guía especial para wordpress, hay algunos plugins (como leaflet-map y extensions-leaflet-map) que me parece podrían simplificar varios pasos del proceso de instalación, para enfocarse más en el diseño en sí del mapa, sería interesante si conoces algunos tips de como sacarles provecho, considerando que tmbn permiten integrar GeoJSON hasta donde entiendo; de antemano muchas gracias, saludos.
Hola! 🥳🎉 Desconocía que existen plugins geográficos para Wordpress. Muchas gracias por el dato y la información 😊
Clase magistral!
🥳🎉 Gracias!
Hola una consulta, se puede conectar a una bd postgis para traer poligonos al mapa de leafleat ??
por ejemplo :
un usuario selecciona un departamento , ir a la bd buscar ese departamento y cargarle el poligono del departamento
Hola Alan! Gracias por esa pregunta tan interesante. Si es posible, pero no de forma directa.
Leaflet, al ser una librería de JavaScript que corre en el navegador, no puede conectarse directamente a una base de datos como PostGIS, basicamente por temas de seguridad, protocolos de comunicacion y procesamiento de los datos. Sin embargo es posible visualizar informacion de una base de datos PostGIS usando un desarrollo backend con Node.js/Express, Flask o Django. De esta manera Leaflet le hace la petición a este backend que funciona como API y el backend se comunica con la base de datos. De esta manera es posible hacer lo que planteas en el ejemplo de consultar departamentos.
Espero que la información te sea de utilidad y muchas gracias por tu apoyo al canal 🎉🥳
saludos ingeniero, una pregunta, cómo hago para poder obtener la información de un polígono catastral al hacerle click, que me muestre su clave, área, zona, etc etc
Hola Edmundo, gracias por tu comentario. En el minuto 30 explico como usar un PopUp que muestre información. Debes tener la información de clave, área, zona y demás en tu GeoJSON poligonal y configurar el PopUp. Espero que la información te sea de utilidad 😀
@@GeoCositasParaDummies si ingeniero muchas gracias, quizá me faltó preguntar algo más, o sea quiero que sea interactiva la consulta, es decir que venga anclada a una base de datos en la que se van haciendo cambios diarios, y esos cambios se vayan reflejando en el mapa al hacer click, sería algo así como cuando llamamos un servicio desde geoserver. Espero haberme hecho entender ingeniero, muchas gracias
Hola profesor muchas gracias por compartir sus conocimientos. Tengo una consulta, estoy intentando cargar un layer que tiene un aproximado de 45mil puntos, es muy densa y al momento de cargar el geoportal esta siendo muy lento y aun le falta agregar otras layer, tiene alguna sugerencia que pueda aplicar para que el cargado sea un poco mas rápido ?
Hola Daniel, gracias por tu apoyo y comentario 😊.
En cuanto a tu pregunta, necesito un poco más de contexto. Por ejemplo la capa que estas leyendo donde está alojada? en que formato está? es un servicio de un tercero? que tecnologías estás utilizando?.
Sin embargo trataré de comentarte algunos detalles generales: 1. Puedes usar plugins como Leaflet.markercluster que permiten agrupan puntos cercanos y reducir la cantidad de elementos renderizados. 2. Si no necesitas mucha precision, puedes simplificar los poligonos usando Mapshaper. 3. Trata de usar datos en formato GeoJSON comprimido para reducir el tamaño de los archivos. 4. SI hay muchas capas, considera cargar datos adicionales solo cuando el usuario activa una capa específica. 5. Verifica el rendimiento del servidor, puedes configurar temas de caché, compresión de datos o configuración a nivel de servidor
Estas son algunas de las opciones, sin embargo depende mucho de cada caso particular.
Espero que esta información te sea de utilidad y de nuevo muchas gracias por tu apoyo! 🎉🥳
Hola profesor@@GeoCositasParaDummies, se trata de un visor que estoy construyendo. Son capas que estoy transformando a formato geojson para poder cargar al visor. De hecho la solución que encontré fue usar el plugins de leaflet.marketcluster pero me sería más útil tener los puntos de los abiertos mientras el usuario del visor vaya haciendo zoom es algo que aún estoy intentando modelar. Al final mi intención es cargar mi visor en github para consultar en la web. Si cuenta con otra recomendación sería muy valiosa. Saludos
Muy buen video, ya se ganó un suscriptor, una consulta como puedo simular un auto avanzando en una avenida en la mapa? espero que lo hagas ese video. gracias
Hola Cesar, muchas gracias por tu apoyo 🥳🎉. En cuanto a tu pregunta, hay varias formas de hacerlo. Usando Leaflet con algunas librerias de realtime o jugando un poco con intervalos y arrays para cambiar las coordenadas de un marcador. Tambien está Mapbox que ofrece una implementación un poco más interesante.
Es un tema que si me han solicitado y posiblemente cubra más adelante en un video. Gracias! 🙂
Me interesaria mucho@@GeoCositasParaDummies
Exelente, hace mucho tiempo llevaba buscando algo asi y no lo encontraba, pero donde te puedo hacer una pequeña consulta?
Hola Martin, me alegra mucho que hayas encontrado lo que buscabas en mi canal 🎉. Me puedes escribir tu duda acá en un comentario, o si prefieres, mis redes y correo están en mi perfil. Por cualquiera de ellas me puedes escribir tu duda. Gracias!
@GeoCositasParaDummies Hola Juan Manuel no me permitió ver tu dirección de correo así te que te pregunto por aquí, tengo una base de datos de estaciones meteorológicas y quiero mostrar los últimos reportes de las tablas en esos puntos, como podría hacer? Saludos desde Argentina y muchísimas
gracias por tu aporte!
@@mluduenia Si deseas leer data de una base de datos, se necesita algo intermedio que haga la consulta en base de datos y retorne la data en formato JSON que es compatible con Leaflet y JavaScript.
Es como si desde Leaflet le hicieras la petición a ese algo intermedio (algo así como una API) y ese algo se comunica con la base de datos. Puedes desarrollar esa API por ejemplo con Node.JS y desde Leaflet le haces una petición con fetch para obtener la data. Ya cuando la consulta esté, puedes afinarla con condicionales o filtros según tu necesidad. En mi canal tengo una lista de reproducción de APIS Geográficas, tal vez te pueda servir th-cam.com/play/PL_YyCdnLDJAir5HWyRrBje-nBFIFTfv7I.html.
Gracias!
Hola IngJuanMaSaurez, place de saludarlo. Lo sigo desde hace un tiempo y le agradezco por el contenido que esta creando. Soy Ignacio de Uruguay. Estoy intentando crear un geoportal en leaflet aunque en mi caso intento importar datos desde Geoserver para luego desde un buscador mediante una consulta CQL_filter poder realizar la peticion y mostrarlo en el mapa. Agradezco su ayuda de ser posible. Saludos desde Uruguay
Hola Ignacio, gracias por el apoyo al contenido del canal 😄.
En cuanto a tu duda lo primero es tener el servicio web geográfico en Geoserver. El atributo CQL_FILTER no es un parámetro estándar de un servicio web pero lo soporta GeoServer, por eso es importante primero tener los servicios allí. Luego desde Leaflet puedes usar la clase TileLayer.wms y enviarle como parámetro el atributo CQL_FILTER con la consulta que deseas realizar.
Espero haberme hecho entender y haber respondido u orientado tu pregunta. Lastimosamente como no es algo nativo de Leaflet en su documentación no hay información clara relacionada sino que te redirecciona a Geoserver.
@@GeoCositasParaDummies Encontre la solucion, con gusto se la comparto. Saludos
Hola JuanMa. Gracias por tus videos. Estoy aprendiendo un montón. Me queda una duda hasta ahora y es como visualizar puntos que no tengan la forma de pin o marcador. Quisiera, por ejemplo, que se muestren como un punto, como un cuadradito o como un triángulo. Tengo unos datos de prueba que me los entregaron en shp y los convertí a geoJSON usando QGIS, pero Leaflet los visualiza como pin y son un poco molestos al verlos como una nube super densa de pines. Revisé la documentación de geoJSON para ver si hay una opción de cambiar el simbolo por defecto, pero no conseguí nada. Cualquier sugerencia es bienvenida. Gracias y saludos
Hola Gustavo 😀. Leaflet permite cambiar ese pin, te comparto dos opciones:
1. Puedes usar clases como Polygon, Marker o CircleMarker para crear triangulos, cuadraos o circulos y que esos sean tu nueva simbologia. El problema es que debes definir las coordenadas de cada uno de los vertices a partir del punto central que es donde estaría el dato, esto hace que sea algo tedioso. Te daré un ejemplo de código para que sean círculos, allí uso precisamente circleMarker con las coordenadas de cada punto y la configuracion de la simbologia:
L.geoJSON(puntosDeInteresGeoJSON, {
pointToLayer: function (feature, latlng) {
let opciones = {
radius: 8, // Tamaño del círculo
fillColor: "#ff7800", // Color de relleno
color: "#000", // Color del borde
weight: 1, // Grosor del borde
opacity: 1, // Opacidad del borde
fillOpacity: 0.8 // Opacidad del relleno
};
return L.circleMarker(latlng, opciones);
}
}).addTo(mapa);
2. Puedes usar un ícono personalizado, incluso puede ser un triangulo o cuadrado y sería mucho más sencillo. Para esto te sirven las clases Marker en conjunto con Icon. El código de ejemplo seria algo como:
var miIconoPersonalizado = L.icon({
iconUrl: 'icono.png', // Path del icono
iconSize: [24, 24], // Tamaño del icono
});
L.geoJSON(puntosDeInteresGeoJSON, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {icon: miIconoPersonalizado});
}
}).addTo(mapa);
Espero que la información te sea de utilidad y muchas gracias por tu apoyo al canal 🎉🎉
@@GeoCositasParaDummies Muchas gracias por tu respuesta. Noto que tomaste tiempo para buscar opciones y además es pensada. Eso lo valoro
Te hago saber como me va.
Un abrazo
hola, excelente video. ¿Es posible dibujar un polígono añadiendo medidas?
Hola Davi! Gracias por tu comentario y tu pregunta.
Si es posible, aunque es bastante complejo ya que no es algo de Leaflet sino de pura manejo de JavaScript. Seria necesario hacer una lista de distancias y otra de ángulos, usar funciones trigonométricas y ciclos para calcular las coordenadas obtenidas luego de aplicar la distancia y el ángulo de cada posición de la lista. Y con esto crear una lista de coordenadas calculadas a partir de lo anterior.
Finalmente ya con estas coordenadas crear el polígono y agregarlo al mapa como cualquier capa convencional. Espero que la información te sea de utilidad 😀
@@GeoCositasParaDummies Hola, Juan,
Vi tu respuesta ahora. Pregunto: ¿Estarías dispuesto a crear una pantalla simple con estos requisitos? Es para un trabajo académico que yo y otros estudiantes estamos tratando de desarrollar. Si puedes, cual es tu email de contacto? Me pasas tu propuesta. ¡Gracias otra vez!
solo voy hacer un poco de ruido entre el video 5 y este video lo que encontre un poco trabajar el geojson y a la vez leer directamente :
fetch("data/aeropuertos.geojson")
.then(function(response) {
return response.json();
})
.then(function(data) {
L.geoJSON(data).addTo(mapa);
});
fetch("data/localidades.geojson")
.then(function(response) {
return response.json();
})
.then(function(data) {
L.geoJSON(data,{
style:{
color:'green'
}
}
).addTo(mapa);
});
solo tengo el detalle del icono y cuanta informacion me interesa leer por ejemplo Pais (provincia -->region-->comuna) , imagina cuantos puntos me aparecieron con el mismo icono jajaja
🤯 Excelente dato, lo probé y funciona bastante bien, no es necesario editar el geojson en el caso de Leaflet: Aunque siento que se demora un poco más en renderizar los datos. Muchas gracias por el aporte Fernando 🥳
"Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en file:///D:/Cursos/Geoportal/Geoportal%20copia/data/predio_loja_pol.kml (razón: la solicitud CORS no es http)". Saludos ingeniero, le comento que no me sale la información del archivo kml, me sale ese texto que le puse entre comillas en la consola. Cómo se soluciona? muchas gracias
...ya hallé la solución ing. no se preocupe muchas gracias
Hola Edmundo. Gracias por tu pregunta y disculpa la demora en mi respuesta. Me alegra que lo hayas podido solucionar 😁. Podrias compartir la solución? Depronto otros estudiantes tienen el mismo problema. Gracias!
@@GeoCositasParaDummies Usando visual studio code, haciendo clic en la parte baja derecha "go live" para ejecutar un servidor en vivo, luego ello me permitió obtener una dirección ip la cual la ingresé como dirección local en el código