Leaflet Demo

index.html

<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>

leaflet-demo.markdown

Leaflet Demo

Leaflet Demo of unResumeMe

A Pen by Carl V Lewis on CodePen.

License.

script.js

//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();
  }
});

scripts

<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>

style.css

.map-container {
  margin: 0 auto;
  width: 85%;
}

#map { 
  height: 500px;
}

styles

<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" />