Skip to content

Instantly share code, notes, and snippets.

@gravesm

gravesm/app.js

Created February 23, 2016 21:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gravesm/0ce8ef001cdf05ca170b to your computer and use it in GitHub Desktop.
Save gravesm/0ce8ef001cdf05ca170b to your computer and use it in GitHub Desktop.
Download ZIP
iiif
Raw
app.js
$(function() {
var map = L.map('map', {
center: [42.3, -72],
zoom: 8
});
var image = L.map('image', {
center: [0, 0],
crs: L.CRS.Simple,
zoom: 0
});
L.tileLayer(
'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
maxZoom: 18,
worldCopyJump: true,
detectRetina: true
}
).addTo(map);
// L.tileLayer.iiif('http://104.236.120.92:8182/iiif/2/connick1.jpg/info.json').addTo(image);
L.tileLayer.iiif('http://159.203.99.95/loris/172195_sv.jpg/info.json').addTo(image);
L.marker([42.3, -72]).addTo(map);
$("#map-toggle").on("click", function() {
var mapZ = $("#map").css('z-index'),
imgZ = $('#image').css('z-index');
if (mapZ == 0) {
$("#image").css('z-index', 0);
$('#map').css('z-index', 10);
} else {
$('#image').css('z-index', 10);
$('#map').css('z-index', 0);
}
});
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Frames</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link href="style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">
Connick
</a>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="maps">
<button id="map-toggle" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-globe"></span>
</button>
<div id="image"></div>
<div id="map"></div>
</div>
</div>
<div>
<div class="col-md-4">
<ul class="media-list">
<li class="media">
<div class="media-left">
<img class="media-object"
src="https://placebear.com/g/64/64">
</div>
<div class="media-body">
<h4>It's a bear!</h4>
<p>Holy shit!</p>
</div>
</li>
<li class="media">
<div class="media-left">
<img class="media-object"
src="https://placebear.com/64/64">
</div>
<div class="media-body">
<h4>Bear In Water</h4>
<p>This bear is enjoying a bath.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="https://raw.githubusercontent.com/mejackreed/Leaflet-IIIF/master/leaflet-iiif.js"></script>
<script src="app.js"></script>
</body>
</html>
Raw
style.css
.container-fluid {
margin-top: 70px;
}
.maps {
height: calc(100vh - 70px);
width: 100%;
position: relative;
}
#map, #image {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#image {
z-index: 10;
}
@media (max-width: 992px) {
.maps {
height: 300px;
bottom: 20px;
left: 0px;
}
}
#map {
z-index: 0;
}
#map-toggle {
position: absolute;
top: 10px;
right: 10px;
z-index: 20;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment