My Map

index.html

<div class="map-legend" id="map-legend"></div>
<div id='map'></div>

my-map.markdown

My Map

Mapbox map with locations loaded in legend. Clicking a location will pan the map to that location and open its popup.

Location title will open google map directions.

See full version here: http://pollardld.com/map.html

A Pen by pollardld on CodePen.

License.

script.js

//========== Mapbox
var map = L.mapbox.map('map', 'diccfish.map-fwz7rlzv')
  .setView( [30, -30], 2);
 
map.scrollWheelZoom.disable();
    
// Link Address to Google Map Directions
function popupLink() {
    $('.marker-title').on('click', function() { 
        window.open( 'http://maps.google.com/?q=' + $(this).html() );    
    });
}

// Link sidebar with map locations
map.markerLayer.on('ready', function(e) {

  // Grab the Legend
  var legend = document.getElementById('map-legend');

  // Prepend each location under the legend div
  var allPoints = map.markerLayer.eachLayer( function(e) { 
    $(legend).prepend('<section class="poi">' + e.feature.properties.title + '</section>'); 
  });

  // Attach click event to new sections
  $('.poi').on('click', function() {
        
    $title = $(this).html();

    map.markerLayer.eachLayer( function(marker) {
      if (marker.feature.properties.title === $title ) {
        marker.openPopup();
        map.panTo(marker.getLatLng());
        popupLink();
      }
    });
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js"></script>

style.scss

body { 
  margin: 0; 
  padding: 0; 
}

#map { 
  bottom: 0;
  left: 0;
  position: absolute; 
  right: 0;
  top: 0; 
  width: 100%; 
}

.map-legend {
  background: rgba(11,130,135,0.9);
  box-sizing: border-box;
  font-family: 'Roboto Slab', serif;
  height: 100%;
  overflow: scroll;
  padding: 2.5% 0;
  position: absolute;
  top: 0;
  width: 35%;
  z-index: 6;

  section {
    border-bottom: 1px dashed #13caba;
    color: #1de79d;
    cursor: pointer;
    display: block;
    font-size: .9125rem;
    position: relative;
		padding: 1rem 5% 1rem 15%;
		text-rendering: geometricPrecision;
    transition: 0.3s background ease;
		width: 80%;
    
    &:hover {
      background: rgba(255,255,255,0.2);
      transition: 0.3s background ease;
    }
	}
}

.marker-title {
  color: #0b8287; 
  cursor: pointer;
  font-family: 'Roboto Slab', serif;
  font-size: .9125rem;
}

.marker-description {
  color: #3f3f11; 
  font-family: 'Roboto Slab', serif;
  font-size: .8125rem;
}

.leaflet-left {
  right: 0; 
}

.leaflet-control {
  float: right;
  margin-right: 10px;
}

styles

<link href="//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css" rel="stylesheet" />