Leaflet.label

by Kyle Pennell

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="http://leaflet.github.io/Leaflet.label/leaflet.label-src.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.label/leaflet.label.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://watson.lennardvoogdt.nl/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css">
<script src="http://watson.lennardvoogdt.nl/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">

<div class="col-md-12">
    <div id="map-container">
      <div id="map"></div>

      <!-- inner mapping shadow -->
      <i class="map-top"></i>
      <!-- <i class="map-left"></i> -->
    </div>
    <div class="row">
      <div class="col-md-4 col-md-offset-1 side-list">
     
        <div class="list-group" id="listings">
          <div class="list-group-container">
       

            <button class="list-group-item" data-target="#{{count}}">title <p class="address">address</p></button>
            <div id="{{count}}" class="collapse">
              <div class="details">
                <a href="{{ page.url }}" class="pull-right"><strong>More Info ></strong></a>
                
              </div>
            </div>

       
    </div>
      </div>

    </div>

CSS

#map {
    height: 500px;  
}

/* 0.1 */

.leaflet-popup-content-wrapper {
	box-shadow: none;
	-webkit-border-radius: 0px;
	border-radius: 5px;
	padding: 0px;
}

.leaflet-popup-content {
	margin: 0px;
	box-shadow: 0 3px 14px rgba(0,0,0,0.3);
}

.popHead {
	color: #ffffff;
	background-color: #428bca;
	padding: 20px 10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	text-align: center;
}

div.metadata {
	padding: 20px 10px 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	color: #555;
	font-size: 11px;
}

div.leaflet-popup-content .btn-xs {
	color: #555;
	font-size: 11px;
	margin-bottom: 10px;
}

.collapsing {
}


/****** NEW NAVBAR ******/




div.reveal {
	padding: 10px;
	margin-bottom: -1px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
	background: #FAF7F5;
}

div.flag {
	z-index: 2;
}

div.flag.fixed {
	position: fixed;
}

div.flag > .point-counter {
	background: #000;
	border: none;
	border-top: 1px solid #222;
	color: #eee;
	font-size: 10px;
	font-weight: normal;
}











/**** The above is strictly for mapping ***/
.col-md-3, .col-md-12 {
	padding: 0px;
}

.row {
	margin: 0px;
}



h2.home {
	padding-left: 15px;
}


.details {
	padding: 15px;
}

div.details {
	background-color: #fff;
	font-size: 12px;
}

.info {
	float: right;
}

.details:last-child {
}

.main-content .col-md-3.revealed {
	padding: 0 15px;
}





img.sidebar {
	max-width: 15%;
	height: auto;
	border-radius: 5px;
	border: 1px solid #fefefe;
}



html, body {
    height: 100%;
}
body {
	padding-top: 5px;
}

.col-md-12 {
	min-width: 100px;
	width: 25%;
}

#map-container {
	min-height: 100%;
	height: 100%;
	overflow: visible;
	position: fixed;
	z-index: 1;
	width: 100%;
}
#map {
    min-height: 100%;
    position: relative;
}

div.side-list {
	position: relative;
	z-index: 2;
	padding: 0;
}


.list-group {
	margin-bottom: 0px;
	padding: 5px;
	background: #eee;
	background: rgba(0, 0, 0, 0.2);
}

.heading-content...

JavaScript

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
    cloudmade = new L.TileLayer(cloudmadeUrl, {
        maxZoom: 18
    }),
    map = new L.Map('map', {
        layers: [cloudmade],
        center: new L.LatLng(17.059417, -96.721622),
        zoom: 9
    });

var data = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": ["-96.7587967", "17.1174164"]
        },
        "properties": {
            "Date": "Nov 1",
            "Location": "Oaxaca Panteon",
            "Terrain": "City",
            "Difficulty": "Easy"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": ["-97.1377792", "17.6514606"]
        },
        "properties": {
            "Date": "3/4/2014",
            "Location": "Apoala",
            "Terrain": "Countryside",
            "Difficulty": "Difficult"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": ["-96.7701721", "17.0921402"]
        },
        "properties": {
            "Date": "Dec 13",
            "Location": "Atzompa",
            "Terrain": "Archeological",
            "Difficulty": "Moderate"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": ["-97.6729431", "16.2861195"]
        },
        "properties": {
            "Date": "Dec 20",
            "Location": "La Cumbre",
            "Terrain": "Mountain",
            "Difficulty": "Moderate"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": ["-95.4574127", "16.4325542"]
        },
        "properties": {
            "Date": "Dec 27",
            "Location": "Jalapa del Valle ",
            "Terrain": "Countryside",
           ...