Cómo cargar un archivo .GeoJSON local en Leaflet


En este tutorial veremos cómo cargar un archivo .GeoJSON local a nuestro proyecto en Leaflet.js.

Según Wikipedia, GeoJSON es un formato estándar abierto diseñado para representar elementos geográficos sencillos, junto con sus atributos no espaciales, basado en JavaScript Object Notation. El formato es ampliamente utilizado en aplicaciones de cartografía en entornos web al permitir el intercambio de datos de manera rápida, ligera y sencilla.

Muchas veces queremos añadir un archivo .GeoJSON externo a nuestro proyecto directamente desde local. Se puede hacer de una forma muy sencilla.

Partimos de una archivo como este:

					
{"type":"FeatureCollection", "features": [
	{"type":"Feature","geometry":{"type":"Point","coordinates":[-60.69440315176775,-31.637602967743867]},"properties":{"id":1,"nombre":"Moda Shop Boulevard","id_escuela":1,"direccion":"Blvd. Galvez 1799"}},
	{"type":"Feature","geometry":{"type":"Point","coordinates":[-60.69419026517629,-31.63766801642459]},"properties":{"id":2,"nombre":"Banco Galicia","id_escuela":1,"direccion":"Blvd. Galvez 1769"}},
	{"type":"Feature","geometry":{"type":"Point","coordinates":[-60.69483483846711,-31.638717665590832]},"properties":{"id":3,"nombre":"Verdulería Guadalupe","id_escuela":1,"direccion":"Necoechea 3373"}},
]}
					
				

Simplemente declaramos una variable que contenga la información del archivo y guardamos el archivo con la extensión .js

					
var vecinos= {"type":"FeatureCollection", "features": [
	{"type":"Feature","geometry":{"type":"Point","coordinates":[-60.69440315176775,-31.637602967743867]},"properties":{"id":1,"nombre":"Moda Shop Boulevard","id_escuela":1,"direccion":"Blvd. Galvez 1799"}},
	{"type":"Feature","geometry":{"type":"Point","coordinates":[-60.69419026517629,-31.63766801642459]},"properties":{"id":2,"nombre":"Banco Galicia","id_escuela":1,"direccion":"Blvd. Galvez 1769"}},
	{"type":"Feature","geometry":{"type":"Point","coordinates":[-60.69483483846711,-31.638717665590832]},"properties":{"id":3,"nombre":"Verdulería Guadalupe","id_escuela":1,"direccion":"Necoechea 3373"}},
]}
					
				

Cargamos el archivo en nuestro archivo html:

					
<script src="js/vecinos.js"></script>
					
				

Y lo añadimos como objeto GeoJson en nuestro objeto map:

					
var vecinos = L.geoJson(vecinos).addTo(map);
					
				

Si queremos visualizar la información del GeoJSON debemos hacer la siguiente modificación, teniendo siempre en cuenta la estructura y los campos del GeoJSON:

					
var vecinos = L.geoJson(vecinos,{
	onEachFeature: function(feature, layer){
		layer.bindPopup(feature.properties["nombre"] + '<br>'+ '(' + feature.properties["direccion"] + ')')
	}
}).addTo(map);
					
				

Para finalizar os dejo todo el código fuente:

					
						
<!DOCTYPE html>
<meta charset="utf-8" />
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <script src="js/vecinos.js"></script>
    <style>
     body {margin:0; padding:0;}
     #map {position:absolute; top:0; bottom:0; width:100%;}
    </style>
  </head>
  <body>
   <div id="map"></div>
    <script>
	var map = L.map('map').
	setView([-31.637602967743867,-60.69440315176775], 
	18);
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
	    maxZoom: 18
	}).addTo(map);
	var vecinos = L.geoJson(vecinos,{
	   onEachFeature: function(feature, layer){
	      layer.bindPopup(feature.properties["nombre"] + '<br>'+ '(' + feature.properties["direccion"] + ')')
	   }
	}).addTo(map);
    </script>
  </body> 
 </html>
					
				


Sobre el Autor


Pedro Calás Blasco

Cartógrafo. Valenciano por el Mundo. He vivido en Mexico, Brasil y Argentina. Entusiasta de los mapas y las tecnologías Web Mapping. Fundador y coordinador de Mapearte. impulsamos y desarrollamos proyectos que contribuyan al desarrollo social a través de las tecnologías.


¿Eres desarrollador? Únete a la red