Cómo Subir Archivos GIS A Un Mapa Web Creado Con Leaflet

MappingGIS · Atención al cliente: (+34) 657 76 76 65 · formacion@mappinggis.
com
MappingGIS   Menú
Cómo subir archivos GIS a un mapa web creado con Leaflet

por Jose Luis García Grandes
Cada vez hay más dispositivos que llevan integrados un GPS. Esta tecnología se ha popularizado mucho entre las persona que
realizan deportes al aire libre, para grabar sus rutas y registrar su actividad. En consecuencia, el GPS se ha popularizado mucho,
siendo utilizado tanto para usos profesiones como de ocio. En paralelo ha surgido un ecosistema de software que permite su uso.
Si optamos por elegir software libre para visualizar los datos, una de las mejores elecciones es Leaflet. Esta librería de código
abierto permite visualizar archivos en varios formatos, pero además dispone de múltiples plugins o complementos para completar
sus funcionalidades. Uno de estos plugin es Leaflet Filelayer, que permite subir archivos GIS a un mapa web creado con Leaflet
y visualizarlos en el mapa.
El complemento Leaflet.FileLayer
El plugin Leaflet.FileLayer permite subir archivos a una aplicación creada con Leaflet, mediante el empleo de FileReader API. Para
esta operación no se necesita ningún servidor, se pueden subir los archivos directamente desde nuestro equipo. Su características
son:
Permite subir archivos GeoJSON, JSON, GPX y KML.

Crea un control para subir los archivos.
Los archivos se convierten a GeoJSON, que es un formato utilizado por Leaflet de forma nativa, por lo que podremos darle
estilos, hacer consultas… y en general realizar todas las operaciones que permite Leaflet.
Adicionalmente el archivo que hemos subido se puede añadir al control de capas del mapa.
Requisitos
El plugin FileLayer necesita evidentemente de Leaflet, por lo que tendremos que crear un mapa con esta herramienta.
Necesita también el empleo de togeojson, que realiza la conversión de KML y GPX a GeoJson.
En consecuencia necesitamos incluir en el código las librerías indicadas:
1.- En primer lugar Leaflet.js:
1 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"

2 integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
3 crossorigin=""/>
1 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
2 integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
3 Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar nuestros servicios. Si continua navegando,
crossorigin=""></script>
consideramos que acepta su uso. Puede cambiar la con guración u obtener más información aquí >> Más información Acepto No acepto
2.- A continuación togeojson.js:
1 <script src="https://unpkg.com/togeojson@0.16.0"></script>
3.- Por último Leaflet.Filelayer:
Creamos el mapa en Leaflet mediante una instancia a la clase L.map y añadimos una capa base de OpenStreetMap como mapa de
fondo.
1 var map = L.map('map').fitWorld();

2 var osm= L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
Crear un control con FileLayer
En esencia, el plugin Leaflet.FileLayer lo que hace es crear un nuevo control en Leaflet que nos permite subir un archivo con los
datos. Emplea la clase L.Control. leLayerLoad a la que podemos pasar varios parámetros:
En layer indicamos que estamos utilizando L.geoJson

LayerOptions nos permite de nir un estilo para la visualización de la capa añadida.
addToMap: si esta opción es true (opción por defecto) indica que el mapa es añadido al mapa.
leSizeLimit indica el tamaño que puede tener el archivo a subir. Por defecto es 1024 kb.
formats permite restringir el formato de los archivos que se pueden subir. El valor predeterminado es : geojson, json, kml y
gpx.
1 var control = L.Control.fileLayerLoad({

2
3 layer: L.geoJson,
4 layerOptions: {style: {color:'red'}},
5 addToMap: true,
6 fileSizeLimit: 1024,
7 formats: [
8 '.geojson',
9 '.gpx',
10 '.kml'
11 ]
12 }).addTo(map);
En el código anterior vemos un ejemplo de aplicación de las opciones de L.Control. leLayerLoad.
Este plugin también nos permite elegir un icono para el control. En el ejemplo siguiente utilizamos un icono svg con la imagen de
una carpeta, que añadimos con el método .LABEL
1 L.Control.FileLayerLoad.LABEL = '<img class="icon" src="folder.svg" alt="file icon"/>';
Debemos asignar un estilo a la clase icon que hemos de nido en la línea anterior, para lo cual incluimos en el apartado <style> del
html las reglas correspondientes:
1 .icon {
2 max-width: 70%;
3 max-height: 70%;
4 margin: 4px;
5 }
De esta forma tendremos un icono que nos abrirá la búsqueda de archivos.
Utilizamos Cookies propias y de terceros para realizar análisis de navegación de los usuarios y mejorar nuestros servicios. Si continua navegando,
Error / éxito de la operación
El plugin Leaflet.FileLayer nos permite evaluar el resultado de la subida de los archivos. Si la operación se ha completado con éxito
(data:loaded) podemos escribir una función que se producirá cuando el archivo se ha subido. En el ejemplo siguiente estamos
indicando que se añada una capa al control de capas mediante layerswitcher.addOverlay.
1 control.loader.on('data:loaded', function (event) {

2
3 layerswitcher.addOverlay(event.layer, event.filename);
4 });
Si, por el contrario se ha producido algún error al subir el archivo, obtendremos un mensaje de error que en el siguiente código
estamos indicando que se muestre en una alerta:
1 control.loader.on('data:error', function (error) {

2
3 alert(error.error.message);
4 });
En la imagen anterior vemos el mensaje de error que recibimos al intentar subir un archivo en un formato no admitido.
Vimos antes que en caso de que la subida del archivo se produzca satisfactoriamente añadíamos la capa al control de capas, por lo
tanto necesitamos crear el control en Leaflet. Lo hacemos de la siguiente forma:
1 var baseMaps = {
2 "OSM": osm,
3
4 };
5
6 var overlayMaps = {
7
8 };
9
10 var layerswitcher= L.control.layers(baseMaps, overlayMaps).addTo(map);
De nir un estilo
Como para cualquier capa de GeoJSON en Leaflet podemos de nir un estilo. Ese estilo será el que se muestre en la visualización
en el mapa del archivo con los datos. Creamos un estilo:
1 var style = {
2 color: 'red',
3 opacity: 1.0,
4 fillOpacity: 1.0,
5 weight: 2,
6 clickable: false
7 };
Ahora modi camos layerOptions para incluir el estilo que hemos creado. Además utilizamos la opción poinToLayer para crear los
marcadores y le asignamos el estilo:
1 layerOptions: {
2 style: style,
3 pointToLayer: function (data, latlng) {
4 return L.circleMarker(
5 latlng,
6 { style: style }
7 );
8 }
9 },
Código del ejemplo
El código al completo del ejemplo que hemos visto de cómo subir archivos GIS a un mapa web creado con Leaflet:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Leaflet FileLayer</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
8 integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
9 crossorigin=""/>
10
11 <style>
12 .icon {
13
consideramos que acepta su uso. Puede cambiar la con guración u obtener más información aquí >> Más información Acepto
max-width: 70%;
No acepto
14 max-height: 70%;
15 margin: 4px;
16 }
17
18 body {
19 padding: 0;
20 margin: 0;
21 }
22 html, body, #map {
23 height: 100%;
24 }
25
26 </style>
27 </head>
28 <body>
29 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
30 integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
31 crossorigin=""></script>
33 <script src="https://unpkg.com/leaflet-filelayer@1.2.0"></script>
34
35 <div id ="map"> </div>
36 <script>
37
38 var map = L.map('map').fitWorld();
39 var osm= L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
40
41 var style = {
42 color: 'red',
43 opacity: 1.0,
44 fillOpacity: 1.0,
45 weight: 2,
46 clickable: false
47 };
48 L.Control.FileLayerLoad.LABEL = '<img class="icon" src="folder.svg" alt="file icon"/>';
49 var control = L.Control.fileLayerLoad({
50
51 layer: L.geoJson,
52
53 layerOptions: {
54 style: style,
55 pointToLayer: function (data, latlng) {
56 return L.circleMarker(
57 latlng,
58 { style: style }
59 );
60 }
61 },
62
63 addToMap: true,
64
65 fileSizeLimit: 1024,
66
67 formats: [
68 '.geojson',
69 '.gpx',
70 '.kml'
71 ]
72 }).addTo(map);
73
74 var baseMaps = {
75 "OSM": osm,
76 };
77
78 var overlayMaps = {
79 };
80
81 var layerswitcher= L.control.layers(baseMaps, overlayMaps,{collapsed:false}).addTo(map);
82
83
84 control.loader.on('data:loaded', function (event) {
85 layerswitcher.addOverlay(event.layer, event.filename);
86 });
87
88
89 control.loader.on('data:error', function (error) {
90 alert(error.error.message);
91 });
92
93 </script>
94 </body>
95 </html>
Let’s connect!
Date de alta en nuestra newsletter
y recibe este ebook gratuito
Y una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos
 SUSCRÍBETE
Jose Luis García Grandes

Tutor del curso de visores webmapping con Leaflet. Ingeniero Agrónomo desarrollador de aplicaciones webmapping. Echa un vistazo
a todos nuestros cursos de SIG online.
GIS OpenCookies
 Utilizamos source, Programación,
propias Web
y de terceros paraMapping
realizar análisis de navegación de los usuarios y mejorar nuestros servicios. Si continua navegando,
formatos GIS,
 consideramos geoJSON,
que acepta su GPS, GPX, cambiar
uso. Puede kml, Leaflet
la con guración u obtener más información aquí >> Más información Acepto No acepto
 Cómo descargar e importar estilos desde QGIS.org
 Multimapas: página web para ver dos mapas a la vez
1 comentario en «Cómo subir archivos GIS a un mapa web creado con Leaflet»
Jose C. Maraver
19 enero, 2021 a las 11:49 am
Buenos días:
Ante todo comentar que tras varios cursos con Mapping Gis sigo pensando que sois referencia en el mercado y vuestra
formación muy buena y muy aprovechable para el trabajo diario. Enhorabuena.
En relación a este plugin quisiera comentar que lo he usado en bastantes ocasiones y he realizado algunas variaciones que
me han resultado útil aunque tiene la pega, aun sin resolver por mi parte y es lo que quiero exponer, que en el momento de
importar capas poligonales, con distintos colores en su archivo original, no toma los colores y tan sólo representa
tonalidades de grises.
Gracias a todos
Jose Maraver
Responder
Deja un comentario
Nombre *
Correo electrónico *
Web
Al realizar tu comentario aceptas la Política de privacidad *
Publicar comentario
Date de alta en nuestra newsletter y consigue la guía para impulsar tu per l GIS. Recibe información de los últimos artículos publicados y
de nuestros cursos.
Nombre:
Tu nombre
Email:
Tu email
He leído y acepto los términos y condiciones
Sí, quiero!
Etiquetas
3DArcGIS ArcGIS Pro ArcPy Carto CSS datos estilos GDAL geoJSON GeoPackage GeoServer google google earth google maps GRASS gvSIG habilidades
GIS JavaScript Leaflet libros LiDAR mapas Mapbox Novedades nube OpenGeo OpenLayers opensource OpenStreetMap OSM pdf plugins
PostGIS PyQGIS Python QGIS R raster shape le SHP SIG SLD wfs WMS
Imprescindibles
Tutoriales de SIG gratis

Lenguajes de programación para GIS
10 habilidades para usar e cazmente un SIG
8 buenas prácticas en nuestros proyectos GIS
10 pasos para encontrar un empleo en el sector GIS
¿Cuál es la situación del empleo GIS en España?
Ideas para regalar a un cartógrafo, gisero o amante de los mapas
Aplicaciones para publicar datos GIS en la nube
Cómo descargar
Utilizamos imágenes
Cookies propiasde Google,
y de Bing,
terceros paraetc
realizar análisis de navegación de los usuarios y mejorar nuestros servicios. Si continua navegando,
Cómo descargar que
consideramos imágenes
acepta Landsat GRATIS
su uso. Puede cambiar la con guración u obtener más información aquí >> Más información Acepto No acepto
Categorías
Bases de datos (32)

Clientes SIG (178)
ESRI (65)
Eventos (19)
Geoprocesamiento (29)
GIS en la nube (39)
GIS Open source (301)
Información corporativa (1)
Programación (80)
Recursos GIS (87)
Teledetección (18)
Tutoriales (81)
Web Mapping (156)
MappingGIS
C/ Turquesa, 12
Valladolid (España)
(+34) 657 76 76 65
formacion@mappinggis.com
    
Empresa
Quienes somos
Blog
Contacto
Ofertas de empleo
Formación
Todos los cursos

Máster SIG
Preguntas frecuentes
Opiniones
Campus online
Acceder
Suscripción a la lista de correo
Suscríbete
Aviso Legal | Política de privacidad | Términos y condiciones
2012 – 2021 MappingGIS SLU ©

Cómo Subir Archivos GIS A Un Mapa Web Creado Con Leaflet - MappingGIS

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cómo Subir Archivos GIS A Un Mapa Web Creado Con Leaflet - MappingGIS

Cargado por

Copyright:

Formatos disponibles

MappingGIS · Atención al cliente: (+34) 657 76 76 65 · formacion@mappinggis.

Permite subir archivos GeoJSON, JSON, GPX y KML.

En consecuencia necesitamos incluir en el código las librerías indicadas:

1.- En primer lugar Leaflet.js:

1 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"

3.- Por último Leaflet.Filelayer:

1 var map = L.map('map').fitWorld();

Crear un control con FileLayer

En layer indicamos que estamos utilizando L.geoJson

1 var control = L.Control.fileLayerLoad({

En el código anterior vemos un ejemplo de aplicación de las opciones de L.Control. leLayerLoad.

1 L.Control.FileLayerLoad.LABEL = '<img class="icon" src="folder.svg" alt="file icon"/>';

De esta forma tendremos un icono que nos abrirá la búsqueda de archivos.

1 control.loader.on('data:loaded', function (event) {

1 control.loader.on('data:error', function (error) {

Código del ejemplo

Jose Luis García Grandes

Al realizar tu comentario aceptas la Política de privacidad *

He leído y acepto los términos y condiciones

Tutoriales de SIG gratis

Bases de datos (32)

Todos los cursos

Suscripción a la lista de correo

Aviso Legal | Política de privacidad | Términos y condiciones

2012 – 2021 MappingGIS SLU ©

También podría gustarte