Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Leaflet Demo
<header class="container-fluid">
<div class="text-center">
<h1 class="title">Savannah/Chatham SLR Vulnerability Hyperlocal Playbooks</h1>
</div>
</header>
<section class="container-fluid">
<article class="map-container">
<div id="map"></div>
<div id="sidebar">
<h1 class="location">Chatham County is in an area of immediate risk for frequent flooding, esepcially as seas continue to rise, storm surges worsen, and the global climate crises becomes more pronounced</h1>
<p class="lorem description">Click a location, I dare you...</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>
<article>
</section>
//Load Map
var map = L.map('map', { zoomControl:false, scrollWheelZoom: false }).setView([25.7617, -80.1], 8);
//Mapbox Tile
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.outdoors',
accessToken: 'pk.eyJ1IjoiYW50aGFtMjIiLCJhIjoiY2lxMnFzb254MDE2N2Zsbm9rMm9teTVpayJ9.kwXPfIma3_KhvJt_I9IDvg'
}).addTo(map);
//Markers
//Miami
var miami = L.marker([25.7617, -80.1918]).addTo(map).on('click', function () {
$('.location').text("Miami");
$('.description').text("This is where I was born n raised!");
sidebar.show();
});
//Tallahassee
var tallahassee = L.marker([30.4383, -84.2807]).addTo(map).on('click', function () {
$('.location').text("Tallahassee");
$('.description').text("This is where I went to college!!");
sidebar.show();
});
//Havana
var havana = L.marker([23.1136, -82.3666]).addTo(map).on('click', function () {
$('.location').text("Havana");
$('.description').text("This is where my people are from!!!");
sidebar.show();
});
//Barcelona
var barcelona = L.marker([41.3851, -2.1734]).addTo(map).on('click', function () {
$('.location').text("Barcelona");
$('.description').text("This is one of my favorite cities!!");
sidebar.show();
});
//Sidebar Plugin
var sidebar = L.control.sidebar('sidebar', {
position: 'left'
});
map.addControl(sidebar);
setTimeout(function () {
sidebar.show();
}, 500);
// map.on('click', function () {
// sidebar.hide();
// });
//LocationList Plugin
var llist = L.control.locationlist({ locationsList : [ {title: 'Miami', latlng: [25.7617, -80.1], zoom: 8},
{title: 'Tallahassee', latlng: [30.4383, -84.2807], zoom: 8},
{title: 'Havana', latlng: [23.1136, -82.3666], zoom: 8},
{title: 'Barcelona', latlng: [41.3851, -2.1734], zoom: 8}],
nextText : '->',
nextTitle : 'Next',
prevText : '<-',
prevTitle : 'Previous',
showList : false });
map.addControl(llist);
//on next
llist.on('next', function(event) {
var currentLocation = event.target._currentLocation_index
sidebar.hide();
if (currentLocation == 0) {
$('.location').text("Miami");
$('.description').text("This is where I was born n raised!");
sidebar.show();
} else if (currentLocation == 1) {
$('.location').text("Tallahassee");
$('.description').text("This is where I went to college!!");
sidebar.show();
} else if (currentLocation == 2) {
$('.location').text("Havana");
$('.description').text("This is where my people are from!!!");
sidebar.show();
} else if (currentLocation == 3) {
$('.location').text("Barcelona");
$('.description').text("This is one of my favorite cities!!");
sidebar.show();
}
});
//on prev
llist.on('prev', function(event) {
var currentLocation = event.target._currentLocation_index
sidebar.hide();
if (currentLocation == 0) {
$('.location').text("Miami");
$('.description').text("This is where I was born n raised!");
sidebar.show();
} else if (currentLocation == 1) {
$('.location').text("Tallahassee");
$('.description').text("This is where I went to college!!");
sidebar.show();
} else if (currentLocation == 2) {
$('.location').text("Havana");
$('.description').text("This is where my people are from!!!");
sidebar.show();
} else if (currentLocation == 3) {
$('.location').text("Barcelona");
$('.description').text("This is one of my favorite cities!!");
sidebar.show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.js"></script>
<script src="https://codepen.io/antham22/pen/JROGQy"></script>
<script src="https://codepen.io/antham22/pen/BLmKqN"></script>
.map-container {
margin: 0 auto;
width: 85%;
}
#map {
height: 500px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet" />
<link href="https://codepen.io/antham22/pen/NRwxVk" rel="stylesheet" />
<link href="https://codepen.io/antham22/pen/BLmKPN" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.