Skip to content

Instantly share code, notes, and snippets.

@edukoski

edukoski/index.html

Created February 27, 2019 16:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save edukoski/2f423b0b68ba71b9cd3fceb169cd027a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save edukoski/2f423b0b68ba71b9cd3fceb169cd027a to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet, button in popup to fill sidebar
Raw
index.html
<div id="page-content">
<section class="main-content">
<div class="container-wide">
<div style="height: 575px;">
<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-pencil"></i></a></li>
<!--<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></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">
Sidebar
<span class="sidebar-close"><i class="fa fa-caret-right"></i></span>
</h1>
<p id="sidebar-text"></p>
</div>
</div> <!--end div classs="sidebar-content"-->
</div>
<div id='map' class="sidebar-map"></div>
</div>
</div>
</section>
</div>
Raw
leaflet-button-in-popup-to-fill-sidebar.markdown

Leaflet, button in popup to fill sidebar

If you only want to show a little content in the popup for brevity, but have a lot more to show, the user can click the More button and the sidebar will fill in with all the content.

A Pen by Tim Lohnes on CodePen.

License.

Raw
script.js
var results = [];
//open sidebar and more content when clicking button in popup
var thisResult;
function openSidebar(ID) {
if ($('#sidebar-text').text().length > 0) {
$("#sidebar-text").removeText();
}
for (var i = 0, len = results.length; i < len; i++) {
if (results[i].OBJECTID === parseInt(ID)) {
thisResult = (results[i]);
}
}
sidebar.open('home');
var divToAddContent = document.getElementById('home');
divToAddContent.innerHTML = "Name:</br>" + thisResult.Name + "</br>Address:</br>" + thisResult.Address + "</br>Category:</br>" + thisResult.Category;
}
// create gray basemap
var Stamen_Terrain = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 18,
ext: 'png'
});
var map = L.map('map', {
center: [37.65, -122.1],
zoom: 13,
layers: [Stamen_Terrain]
});
$.getJSON("https://codepen.io/timlohnes/pen/mmegGW.js", function (data) {
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
L.geoJSON(data, {
pointToLayer: function (feature, latlng) {
var marker = L.circleMarker(latlng, geojsonMarkerOptions);
marker.bindPopup(feature.properties.Name +
'<br/><button type="button" class="btn btn-primary sidebar-open-button" data = "' + feature.properties.OBJECTID + '" ' + '>Click for more</button>');
results.push(feature.properties);
return marker;
}
}).addTo(map);
});
$("div").on("click", '.sidebar-open-button', function () {
var ID = $(this).attr("data");
openSidebar(ID);
});
//add sidebar panel to map
var sidebar = L.control.sidebar('sidebar', { position: 'right' });
map.addControl(sidebar);
Raw
scripts
<script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.3/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.2/esri-leaflet.js"></script>
<script src="https://codepen.io/timlohnes/pen/KmdwNe"></script>
Raw
style.css
.leaflet-popup {
margin-right: 17px;
}
.scroll-bar-wrap:hover .cover-bar {
opacity: 0;
-webkit-transition: all .5s;
}
.leaflet-popup-content {
max-width: 300px;
height: 100px;
margin-right: 17px;
overflow: auto;
}
#map {
position: absolute;
top:0px; bottom:0; right:0; left:0;
}
#info-pane {
position: absolute;
height: 550px;
top: 0px;
right: 10px;
z-index: 400;
padding: 1em;
background: white;
text-align: right;
}
#sidebar {
position: absolute;
height: 650px;
top: 10px;
right: 10px;
z-index: 1000;
padding: 1em;
background: white;
}
.sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
z-index: 2000; }
.sidebar.collapsed {
width: 40px; }
@media (max-width: 767px) {
.sidebar {
width: 250px; } }
@media (min-width: 768px) {
.sidebar {
top: 10px;
bottom: 10px;
transition: width 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar {
width: 305px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar {
width: 350px; } }
@media (min-width: 1200px) {
.sidebar {
width: 300px; } }
.sidebar-left {
left: 0; }
@media (min-width: 768px) {
.sidebar-left {
left: 10px; } }
.sidebar-right {
right: 0; }
@media (min-width: 768px) {
.sidebar-right {
right: 10px; } }
.sidebar-tabs {
top: 0;
bottom: 0;
height: 100%;
background-color: #fff; }
.sidebar-left .sidebar-tabs {
left: 0; }
.sidebar-right .sidebar-tabs {
right: 0; }
.sidebar-tabs, .sidebar-tabs > ul {
position: absolute;
width: 40px;
margin: 0;
padding: 0; }
.sidebar-tabs > li, .sidebar-tabs > ul > li {
width: 100%;
height: 40px;
color: #47a23d;
font-size: 12pt;
overflow: hidden;
transition: all 80ms; }
.sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
color: #000;
background-color: #eee; }
.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
color: #fff;
background-color: #47a23d; }
.sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
color: rgba(51, 51, 51, 0.4); }
.sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
background: transparent; }
.sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
cursor: default; }
.sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
color: inherit;
text-decoration: none;
text-align: center; }
.sidebar-tabs > ul + ul {
bottom: 0; }
.sidebar-content {
position: absolute;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.95);
overflow-x: hidden;
overflow-y: auto; }
.sidebar-left .sidebar-content {
left: 40px;
right: 0; }
.sidebar-right .sidebar-content {
left: 0;
right: 40px; }
.sidebar.collapsed > .sidebar-content {
overflow-y: hidden; }
.sidebar-pane {
display: none;
left: 0;
right: 0;
box-sizing: border-box;
padding: 10px 20px; }
.sidebar-pane.active {
display: block; }
@media (max-width: 767px){
.sidebar-pane {
min-width: 385px; }
}
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-pane {
min-width: 305px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-pane {
min-width: 350px; } }
@media (min-width: 1200px) {
.sidebar-pane {
min-width: 340px; } }
.sidebar-header {
margin: -10px -20px 0;
height: 40px;
padding: 0 20px;
line-height: 40px;
font-size: 14.4pt;
color: #fff;
background-color: #47a23d; }
.sidebar-right .sidebar-header {
padding-left: 40px; }
@media (max-width: 767px){
.sidebar-header {
font-size: 12pt;
}
}
.sidebar-close {
position: absolute;
top: 0;
width: 40px;
height: 40px;
text-align: center;
cursor: pointer; }
.sidebar-left .sidebar-close {
right: 0; }
.sidebar-right .sidebar-close {
left: 0; }
.sidebar-left ~ .sidebar-map {
margin-left: 40px; }
@media (min-width: 768px) {
.sidebar-left ~ .sidebar-map {
margin-left: 0; } }
.sidebar-right ~ .sidebar-map {
margin-right: 40px; }
@media (max-width: 767px) {
.sidebar-right ~ .sidebar-map {
margin-right: 0; }
}
@media (min-width: 768px) {
.sidebar-right ~ .sidebar-map {
margin-right: 0; } }
.sidebar {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); }
.sidebar.leaflet-touch {
box-shadow: none;
border-right: 2px solid rgba(0, 0, 0, 0.2); }
@media (min-width: 768px) {
.sidebar {
border-radius: 4px; }
.sidebar.leaflet-touch {
border: 2px solid rgba(0, 0, 0, 0.2); } }
@media (min-width: 768px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
transition: left 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
left: 315px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
left: 400px; } }
@media (min-width: 1200px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
left: 470px; } }
@media (min-width: 768px) {
.sidebar-left.collapsed ~ .sidebar-map .leaflet-left {
left: 50px; } }
@media (min-width: 768px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
transition: right 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
right: 315px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
right: 400px; } }
@media (min-width: 1200px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
right: 315px; } }
@media (min-width: 768px) {
.sidebar-right.collapsed ~ .sidebar-map .leaflet-right {
right: 50px; } }
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.3/leaflet.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment