side menu for leaflet map, populated with geoJSON

index.html

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>


<div id="mapwrap">
  <div id="toolbar">
    <div class="hamburger">
      <span>Tour&nbsp;Stops</span>
    </div>
    <div id="tourstops">
      <h2>Tour Stops</h2>
      <ul>
      </ul>
    </div>
  </div>
  <div id="leafletmap"></div>
</div>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67683/ccbuildings.js"></script>

script.js

$('#toolbar .hamburger').on('click', function() {
  $(this).parent().toggleClass('open');
});

var mymap = L.map('leafletmap', {
  zoomControl: false
});
var mapTiles = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

mapTiles.addTo(mymap);
mymap.setView([38.8486555, -104.824], 17);
new L.Control.Zoom({
  position: 'topright'
}).addTo(mymap);

var buildingLayers = L.layerGroup().addTo(mymap);

L.geoJson(bldgData, {
  onEachFeature: function(feature, layer) {
    var thisLayer = layer;
    // layer.bindPopup(feature.properties.NAME);
    var $listItem = $('<li>').html(feature.properties.NAME).appendTo('#toolbar ul');
    $listItem.on('click', function(){
      buildingLayers.clearLayers(); // remove existing markers
      var thisLat = thisLayer.feature.geometry.coordinates[1];
      var thisLon = thisLayer.feature.geometry.coordinates[0];
      mymap.panTo([thisLat,thisLon]);
      //thisLayer.addTo(mymap);
      buildingLayers.addLayer(thisLayer);
      var notifyIcon = L.divIcon({
        className: 'notify-icon',
        iconSize: [25, 25],
        html: '<span></span>'
	    });
      var notifyMarker = L.marker([thisLat,thisLon], {icon: notifyIcon});
      buildingLayers.addLayer(notifyMarker);
      
      if(mymap.getSize().x < 768){
        $('#toolbar').removeClass('open');
      }
      thisLayer.on('click', function(){alert(thisLayer.feature.properties.NAME + " :: " + thisLayer.feature.properties.BODY);});
    });
  }
});




/*
var gjFeatures = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": "1234",
      "properties": {
        "name": "Sonderman Park",
        "img": "",
        "desc":"An oasis of wilderness within the city limits of Colorado Springs, Sondermann Park provides an outstanding opportunity for wildlife viewing or just a refreshing walk along a small creek located on Colorado Springs’ west side. This park is a great place to look for foothills breeding birds. Trails access good foothills scrub and some riparian growth, with species such as Lazuli Bunting, Black-chinned Hummingbird, Black-headed Grosbeak, and others. Directions: Take I-25 to Fontanero Street (exit 144) and head west. Take your first right, which is Chestnut Street. Then watch for a small sign on the left for the entrance. This should be Caramillo Street.", 
        "markerType": "",
        "weight": ""
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -104.840011,
          38.856837
        ]
      }
    },
  {
      "type": "Feature",
      "id": "1234",
      "properties": {
        "name": "Williams Canyon",
        "img": "",
        "desc":"*CURRENTLY CLOSED DUE TO FLOODING* a 3.1 mile trail just north of Manitou Springs, Williams Canyon perfect for hikers looking to briefly escape urban life. The large limestone walls of Williams Canyon provide a shady environment that eventually transitions into the larger Waldo Canyon area. The Williams Canyon limestone formation was formed around 315 million years ago, and is considered a significant geological feature of the area. Park in downtown Manitou Springs, and take Canyon Avenue North to the trailhead.", 
        "markerType": "",
        "weight": ""
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -104.917262,
          38.860395
        ]
      }
    }
  
  ]};
var myStyle2 = {
    "color": "#f00",
    "weight": 4,
    "opacity": 0.85,
  	"lineCap": "round"
};
*/

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

side-menu-for-leaflet-map-populated-with-geojson.markdown

side menu for leaflet map, populated with geoJSON

A Pen by weedkiller on CodePen.

License.

style.css

body {
  margin: 0;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  font-size: 90%;
}

#mapwrap {
  width: 100%;
  height: 600px;
  height: 100vh;
  border: 1px solid #333;
  position: relative;
  overflow: hidden;
}

#leafletmap {
  width: 100%;
  height: 600px;
  height: 100vh;
}

#toolbar {
  background: rgba(255, 255, 255, 1);
  opacity: .6;
  width: 200px;
  height: 600px;
  height: 100vh;
  position: absolute;
  left: -200px;
  z-index: 1;
  transition: .5s left;
  padding: 20px;
  box-sizing: border-box;
}

#toolbar.open {
  left: 0;
  opacity: .95;
}

#toolbar .hamburger {
  height: 100px;
  width: 25px;
  background: #000;
  box-shadow: 1px 0 2px rgba(0, 0, 0, .3);
  position: absolute;
  right: -25px;
  top: 40%;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border: 1px solid #333;
  cursor: pointer;
}

.hamburger span {
  color: #fff;
  display: inline-block;
  position: relative;
  transform: rotate(90deg);
  top: 39px;
  left: -21px;
}

#tourstops {
  overflow-y: scroll;
  max-height: 95vh;
}

#toolbar ul {
  margin: 0;
  padding: 0;
}

#toolbar li {
  list-style-type: none;
  border-bottom: 1px solid #ccc;
  padding: 6px 3px;
  cursor: pointer;
}

#toolbar li:hover {
  color: #666;
}

.notify-icon span{
  display: inline-block;
  border: 1px solid orange;
  border-radius: 50%;
  height: 24px; 
  width: 24px;
  animation: pulse .6s 4 forwards;
  transform-origin: center center;
}
@keyframes pulse{
  0%{
    transform: scale(5.5);
    opacity: .2;
  }
  50%{
    opacity: .8;
  }
  100%{
    transform: scale(.1);
    opacity: 1;
  }
}