mejackreed/app.js

## app.js
var map = L.map('map');

L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
}).addTo(map);

var template = '<div style="min-height: 340px;"><h2>{title}</h2><div><a href="{url}" target=_blank><img src="{thumbnail}" style="max-width: 300px;"/></a></div>'

function onEach(feature, layer) {
  layer.on('click', function() {
    $.getJSON(feature.properties.purl.replace('http://', 'https://') + '/iiif/manifest.json', function(info) {
      var popup = L.popup({
        keepInView: true
      })
        .setContent(L.Util.template(template, {
          title: feature.properties.title,
          thumbnail: info.thumbnail['@id'],
          url: feature.properties.purl
        })
      );
      layer.bindPopup(popup).openPopup();
    })
  })
}

$.getJSON('stanford-ph028ym3863-geojson.json', function(data) {
  console.log(data);
  var indexMap = L.geoJson(data, {
    onEachFeature: onEach,
    style: function(feature) {
      return {
        weight: 1
      }
    }
  }).addTo(map);
  map.fitBounds(indexMap.getBounds());
});

## index.html
<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <link rel="stylesheet" href="styles.css">
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <script src="app.js"></script>
  </body>
</html>

## stanford-ph028ym3863-geojson.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              stanford-ph028ym3863-geojson.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## styles.css

      
    Raw
  

              styles.css
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
	var map = L.map('map');

	L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
	}).addTo(map);

	var template = '<div style="min-height: 340px;"><h2>{title}</h2><div><a href="{url}" target=_blank><img src="{thumbnail}" style="max-width: 300px;"/></a></div>'

	function onEach(feature, layer) {
	layer.on('click', function() {
	$.getJSON(feature.properties.purl.replace('http://', 'https://') + '/iiif/manifest.json', function(info) {
	var popup = L.popup({
	keepInView: true
	})
	.setContent(L.Util.template(template, {
	title: feature.properties.title,
	thumbnail: info.thumbnail['@id'],
	url: feature.properties.purl
	})
	);
	layer.bindPopup(popup).openPopup();
	})
	})
	}

	$.getJSON('stanford-ph028ym3863-geojson.json', function(data) {
	console.log(data);
	var indexMap = L.geoJson(data, {
	onEachFeature: onEach,
	style: function(feature) {
	return {
	weight: 1
	}
	}
	}).addTo(map);
	map.fitBounds(indexMap.getBounds());
	});
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
	<link rel="stylesheet" href="styles.css">
	<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	</head>
	<body>
	<div id="map"></div>
	<script src="app.js"></script>
	</body>
	</html>