Cómo añadir un Sidebar a nuestro proyecto en Leaflet


En este tutorial veremos cómo añadir un Sidebar a nuestro proyecto en Leaflet.js.

Un plugin muy útil para mejorar la visualización de la información que queremos mostrar en nuestro mapa es sidebar-v2. Este plugin añade una barra de navegación lateral a nuestro mapa. Es muy fácil de utilizar y es una muy buena idea de implementarlo cuando tenemos una buena cantidad de datos asociados a nuestros objetos georreferenciados

Para añadir el plugin sidebar tenemos que agregar los archivos leaflet-sidebar.css y leaflet-sidebar.js que podemos encontrar en el github del proyecto.

					
<link rel="stylesheet" href="css/leaflet-sidebar.css"/>
<script src="js/leaflet-sidebar.js"></script>
					
				

Para añadir la barra de navegación lateral en nuestro archivo HTML tenemos que crear primero un contenedor que contenga la clase sidebar. Dentro de este contenedor irán dos divs hijo. Un sidebar-tabs contendrá los íconos de los apartados que dispongas, dispuestos en forma de lista desordenada. Otro con clase sidebar-content contendrá la info referida a cada apartado.

					
<div id="sidebar" class="sidebar collapsed">
<!-- Nav tabs -->
<div class="sidebar-tabs">
    <ul role="tablist">
        <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
        <li><a href="#leyenda" role="tab"><i class="fa fa-photo"></i></a></li>
        <li><a href="#info" role="tab"><i class="fa fa-info-circle"></i></a></li>
        <li><a href="#github" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
    </ul>

    <ul role="tablist">
        <li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
    </ul>
</div>

<!-- Tab panes -->
<div class="sidebar-content">
    <div class="sidebar-pane" id="home">
        <h1 class="sidebar-header">Capas<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
        <div class="" id="control-capas">
        </div>
    </div>

    <div class="sidebar-pane" id="leyenda">
        <h1 class="sidebar-header">Leyenda<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
        <div class="" id="control-leyenda">
        </div>
    </div>

    <div class="sidebar-pane" id="info">
        <h1 class="sidebar-header">Información<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>

        <p>A responsive sidebar for mapping libraries like <a href="https://leafletjs.com/">Leaflet</a> or <a href="https://openlayers.org/">OpenLayers</a>.</p>

        <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>

    <div class="sidebar-pane" id="settings">
        <h1 class="sidebar-header">Ajustes<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
    </div>
</div>
</div>
<div class="sidebar-map" id="map"></div>
					
				

En el archivo .js. Creamos un objeto al que hemos llamado sidebar, al objeto map mediante el comando:

					
var sidebar = L.control.sidebar(‘sidebar’).addTo(map).
					
				

El objeto sidebar admite las propiedades:

					
position(left o right).closeButton(true o false). autoPan(true o false).
					
				

También admite los siguientes métodos:

					
sidebar.show(); sidebar.hide(); sidebar.toggle();
sidebar.isVisible();
					
				

					
<script>
	var map = L.map('map');
	map.setView([-31.62433294, -60.6920008], 12.8);
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: 'Map data © OpenStreetMap contributors'
	}).addTo(map);
	var markerCultu = L.AwesomeMarkers.icon({
		icon: 'users',
		prefix:'fa',
		markerColor: 'purple'
	});
	var marker = L.marker([-31.6380294, -60.726508],{icon:
		markerCultu}).addTo(map).bindPopup('A pretty CSS3 popup.<br> Easilycustomizable.');
	var sidebar = L.control.sidebar('sidebar', {
		position: 'left'
	}).addTo(map);
</script>
					
				

Si tenemos por ejemplo un objeto .geojson y queremos visualizar sus propiedades en los diferentes apartados de nuestra sidebar podemos hacer algo parecido a esto:

					

var layerCultural = L.geoJson(cultural, {
	onEachFeature: function(feature, layer) {
		layer.bindPopup("<h5 class='infoHeader'><strong>" + feature.properties.nombre);
		layer.on('click', function(e) {
			$('.sidebar-header').html(e.target.feature.properties.nombre);
			$('#historiaparrafo').html(e.target.feature.properties.historia);
			$('#gastronomiaparrafo').html(e.target.feature.properties.gastronomia);
		});
		// $('.sidebar-header').html(feature.properties.nombre);
	}
}).addTo(map);

					
				


Finalmente os dejo todo el código:

					
<div class="sidebar collapsed" id="sidebar">
	<div class="sidebar-tabs">
		<ul role="tablist">
			<li>
				<a href="#historia" role="tab"><i class="fa fa-book"></i></a>
			</li>
			<li>
				<a href="#gastronomia" role="tab"><i class="fa fa-utensils"></i></a>
			</li>
		</ul>
		<ul role="tablist">
			<li>
				<a href="#settings" role="tab"><i class="fa fa-gear"></i></a>
			</li>
		</ul>
	</div>
	<div class="sidebar-content">
		<div class="sidebar-pane" id="historia">
			<h3 class="sidebar-header text-center"><span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h3><br>
			<h3 class="text-center">HISTORIA</h3>
			<hr>
			<p class="lorem text-justify" id="historiaparrafo"></p>
		</div>
		<div class="sidebar-pane" id="gastronomia">
			<h3 class="sidebar-header text-center"><span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h3><br>
			<h3 class="text-center">GASTRONOMÍA</h3>
			<hr>
			<p class="lorem text-justify" id="gastronomiaparrafo"></p>
		</div>
	</div>
</div>
<div class="sidebar-map" id="map"></div>
<script src="/data/geojson/cultural.js"></script>
<script>
	var map1 = L.map('map1');
	map1.setView([-31.62433294, -60.6920008], 12.8);
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: 'Map data © OpenStreetMap contributors'
	}).addTo(map1);
	var markerCultu = L.AwesomeMarkers.icon({
		icon: 'users',
		prefix:'fa',
		markerColor: 'purple'
	});
	var layerCultural = L.geoJson(cultural, {
		onEachFeature: function(feature, layer) {
			layer.bindPopup("<h5 class='infoHeader'><strong>" + feature.properties.nombre);
			
			layer.on('click', function(e) {
				$('.sidebar-header').html(e.target.feature.properties.nombre);
				$('#historiaparrafo').html(e.target.feature.properties.historia);
				$('#gastronomiaparrafo').html(e.target.feature.properties.gastronomia);
			});
			// $('.sidebar-header').html(feature.properties.nombre);
		},
		pointToLayer: function(feature, latlng) {
	        return L.marker(latlng, {icon: markerCultu});
	    }
	}).addTo(map1);
	var sidebar = L.control.sidebar('sidebar1', {position: 'left'}).addTo(map1);
</script>
					
				



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