67 lines
1.8 KiB
Vue
67 lines
1.8 KiB
Vue
<template>
|
|
<div id="sidebar" class="leaflet-sidebar collapsed">
|
|
<div class="leaflet-sidebar-tabs">
|
|
<ul role="tablist"> <!-- top aligned tabs -->
|
|
<li><a href="#search" role="tab"><i class="fa fa-search"></i></a></li>
|
|
<li><a href="#all" role="tab"><i class="fa fa-bars"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="leaflet-sidebar-content">
|
|
<div class="leaflet-sidebar-pane" id="search">
|
|
<h1 class="leaflet-sidebar-header">Search<div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div></h1>
|
|
<Search/>
|
|
</div>
|
|
<div class="leaflet-sidebar-pane" id="all">
|
|
<h1 class="leaflet-sidebar-header">All locations<div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div></h1>
|
|
<ListAll></ListAll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as _ from 'leaflet-sidebar-v2';
|
|
|
|
import Search from './Search';
|
|
import ListAll from './ListAll';
|
|
|
|
export default {
|
|
name: "sidebar",
|
|
components: {
|
|
Search,
|
|
ListAll,
|
|
},
|
|
mounted() {
|
|
this.mapObject = L.control.sidebar({
|
|
autopan: true,
|
|
closeButton: true,
|
|
container: 'sidebar',
|
|
position: 'left',
|
|
});
|
|
|
|
let parentContainer = this.$parent;
|
|
while (typeof parentContainer.mapObject === 'undefined') {
|
|
parentContainer = parentContainer.$parent;
|
|
}
|
|
|
|
this.mapObject.addTo(parentContainer.mapObject);
|
|
},
|
|
beforeDestroy() {
|
|
this.mapObject.remove();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style src="leaflet-sidebar-v2/css/leaflet-sidebar.min.css"></style>
|
|
|
|
<style>
|
|
.leaflet-sidebar-content {
|
|
text-align: left;
|
|
font-size: 1.7em;
|
|
}
|
|
|
|
.leaflet-sidebar-pane h1 + * {
|
|
margin-top: 18px;
|
|
}
|
|
</style>
|