D3 Examples - Baltimore Civil Rights Activism: Walking Tour for NCPH 2016

Baltimore Civil Rights Activism: Walking Tour for NCPH 2016

This map is based on a series of walking tour Baltimore Heritage has developed around the west side of Downtown as part of our advocacy for the preservation of Read's Drug Store and other significant downtown buildings. A prior version of the notes for this tour are available through our Open Tours collection. Learn more about Baltimore's Civil Rights Heritage.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Civil Rights Activism Walking Tours Map &middot; NCPH 2016 Conference</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
​
​
<div id='map'></div>
​
<!-- jQuery is required for this example. -->
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiYmFsdGltb3JlaGVyaXRhZ2UiLCJhIjoiYWYwYjRkZTI3NjBkMmM0MjA2YjcxYWE3MzI2NmRmYmYifQ.9DwCW0w7rlxljgOi0IbD1A';
var url = 'https://gist.githubusercontent.com/elipousson/c23f7d9afe6163d68902/raw/47093e9351f9b76898bdd4d2b90b93be107d92a1/civil-rights-activism-tour-map.geojson';
​
var map = L.mapbox.map('map', 'mapbox.streets', {
    legendControl: {
        position: 'bottomright'
    }
  }).setView([39.290385, -76.612189], 15);
​
function load() {
  // Fetch just the contents of a .geojson file from GitHub by passing
  // `application/vnd.github.v3.raw` to the Accept header
  // As with any other AJAX request, this technique is subject to the Same Origin Policy:
  // https://en.wikipedia.org/wiki/Same_origin_policy the server delivering the request should support CORS.
  $.ajax({
    headers: {
      'Accept': 'application/vnd.github.v3.raw'
    },
    xhrFields: {
      withCredentials: false
    },
    dataType: 'json',
    url: url,
    success: function(geojson) {
        // On success add fetched data to the map.
        L.mapbox.featureLayer(geojson).addTo(map);
    }
  });
}
​
$(load);
​
</script>
​
​
</body>
</html>
    