added scripts
parent
2dab1b336a
commit
2ca36bf6c7
@ -0,0 +1 @@
|
||||
scripts/images/*
|
||||
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ST01</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="lib/leaflet/leaflet.js"></script>
|
||||
<link href="lib/leaflet/leaflet.css" rel="stylesheet" type="text/css">
|
||||
<script src="lib/leaflet-hash/leaflet-hash.js"></script>
|
||||
<style>
|
||||
div.leaflet-tile {
|
||||
color: white;
|
||||
position: absolute;
|
||||
pointer-events: auto; /* this enables links */
|
||||
}
|
||||
div.leaflet-tile a {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
z-index: 1;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-shadow: 1px 1px 2px black;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
display: none; /* none - to hide, block - to show filenames */
|
||||
}
|
||||
div.leaflet-control-attribution {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: #C7C7C7"></div>
|
||||
<script type="text/javascript">
|
||||
var map = L.map('map', {
|
||||
maxZoom: 9,
|
||||
minZoom: 0,
|
||||
zoom: 0,
|
||||
crs: L.CRS.Simple,
|
||||
center: new L.LatLng(0,0)
|
||||
});
|
||||
var layer = L.tileLayer('images/tiles/page-15.jpg/z{z}y{y}x{x}.png');
|
||||
map.addLayer(layer);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.1 MiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,74 @@
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
#content {
|
||||
position: absolute;
|
||||
left: 0; top: 0; right: 0; bottom: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 20px 1fr 512px 512px 20px;
|
||||
grid-template-rows: 80px 1fr 288px 20px;
|
||||
}
|
||||
#scansdiv {
|
||||
grid-column: 1 / span 5;
|
||||
grid-row: 1 / span 4;
|
||||
z-index: 1;
|
||||
}
|
||||
#titlesdiv {
|
||||
grid-column: 3;
|
||||
grid-row: 3;
|
||||
z-index: 2;
|
||||
/*background: white;*/
|
||||
box-sizing: border-box;
|
||||
/*display: none;*/
|
||||
}
|
||||
#titlesdiv.hidden {
|
||||
/*display: none;*/
|
||||
z-index: 0;
|
||||
}
|
||||
#videodiv {
|
||||
grid-column: 4;
|
||||
grid-row: 3;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
#textcontroldiv {
|
||||
grid-column: 4;
|
||||
grid-row: 4;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
#textcontroldiv img {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
left: -54px;
|
||||
top: -40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (orientation: portrait) {
|
||||
#content {
|
||||
grid-template-columns: 20px 1fr 512px 20px;
|
||||
grid-template-rows: 80px 1fr 288px 288px 20px;
|
||||
}
|
||||
#scansdiv {
|
||||
grid-column: 1 / span 4;
|
||||
grid-row: 1 / span 5;
|
||||
z-index: 1;
|
||||
}
|
||||
#titlesdiv {
|
||||
grid-column: 3;
|
||||
grid-row: 3;
|
||||
}
|
||||
#videodiv {
|
||||
grid-column: 3;
|
||||
grid-row: 4;
|
||||
}
|
||||
}
|
||||
|
||||
#videodiv video {}
|
||||
.fill {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
// console.log("ccplayer", ccplayer);
|
||||
(function () {
|
||||
var ccp = ccplayer.ccplayer ({
|
||||
titles: "#titles",
|
||||
frames: {
|
||||
"video": "#video",
|
||||
"scans": "#scans"
|
||||
}
|
||||
});
|
||||
var titlesdiv = document.getElementById("titlesdiv"),
|
||||
textcontroldiv = document.getElementById("textcontroldiv");
|
||||
textcontroldiv.addEventListener("click", function () {
|
||||
titlesdiv.classList.toggle("hidden");
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,47 @@
|
||||
function _log () {
|
||||
return;
|
||||
var msg = "";
|
||||
for (var i=0, l=arguments.length; i<l; i++) {
|
||||
msg += arguments[i];
|
||||
}
|
||||
var mdiv = document.createElement("div");
|
||||
mdiv.textContent = msg;
|
||||
document.getElementById("debug").appendChild(mdiv, 0);
|
||||
}
|
||||
_log("page loading...");
|
||||
var frame = document.getElementById("fs");
|
||||
function fschange (e) {
|
||||
_log("fullscreenchange", document.mozFullScreen, document.webkitIsFullScreen, document.fullscreen);
|
||||
if (document.fullscreen === false || document.mozFullScreen === false || document.webkitIsFullScreen === false) {
|
||||
// console.log("leaving fullscreen");
|
||||
// frame.style.display = "none";
|
||||
frame.style.visibility = "hidden";
|
||||
}
|
||||
}
|
||||
function toggleFullScreen() {
|
||||
if (!document.fullscreen && !document.mozFullScreen && !document.webkitIsFullScreen) {
|
||||
// frame.style.display = "block";
|
||||
frame.style.visibility = "visible";
|
||||
if (frame.mozRequestFullScreen) {
|
||||
frame.mozRequestFullScreen();
|
||||
} else {
|
||||
frame.webkitRequestFullScreen();
|
||||
}
|
||||
} else {
|
||||
// frame.style.display = "none";
|
||||
frame.style.visibility = "hidden";
|
||||
if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else {
|
||||
document.webkitCancelFullScreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("mozfullscreenchange", fschange, false);
|
||||
document.addEventListener("webkitfullscreenchange", fschange, false);
|
||||
document.getElementById("link").addEventListener("click", function (e) {
|
||||
toggleFullScreen();
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}, false);
|
||||
@ -0,0 +1 @@
|
||||
Subproject commit a53ed49c92ce88e2cbfdcadfbec3cf039366bd8f
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
@ -0,0 +1,636 @@
|
||||
/* required styles */
|
||||
|
||||
.leaflet-pane,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-tile-container,
|
||||
.leaflet-pane > svg,
|
||||
.leaflet-pane > canvas,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
|
||||
.leaflet-safari .leaflet-tile {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
/* hack that prevents hw layers "stretching" when loading new tiles */
|
||||
.leaflet-safari .leaflet-tile-container {
|
||||
width: 1600px;
|
||||
height: 1600px;
|
||||
-webkit-transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
display: block;
|
||||
}
|
||||
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
|
||||
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
|
||||
.leaflet-container .leaflet-overlay-pane svg,
|
||||
.leaflet-container .leaflet-marker-pane img,
|
||||
.leaflet-container .leaflet-shadow-pane img,
|
||||
.leaflet-container .leaflet-tile-pane img,
|
||||
.leaflet-container img.leaflet-image-layer {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
.leaflet-container.leaflet-touch-zoom {
|
||||
-ms-touch-action: pan-x pan-y;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag {
|
||||
-ms-touch-action: pinch-zoom;
|
||||
/* Fallback for FF which doesn't support pinch-zoom */
|
||||
touch-action: none;
|
||||
touch-action: pinch-zoom;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.leaflet-container {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.leaflet-container a {
|
||||
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
|
||||
}
|
||||
.leaflet-tile {
|
||||
filter: inherit;
|
||||
visibility: hidden;
|
||||
}
|
||||
.leaflet-tile-loaded {
|
||||
visibility: inherit;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
width: 0;
|
||||
height: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 800;
|
||||
}
|
||||
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
|
||||
.leaflet-overlay-pane svg {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.leaflet-pane { z-index: 400; }
|
||||
|
||||
.leaflet-tile-pane { z-index: 200; }
|
||||
.leaflet-overlay-pane { z-index: 400; }
|
||||
.leaflet-shadow-pane { z-index: 500; }
|
||||
.leaflet-marker-pane { z-index: 600; }
|
||||
.leaflet-tooltip-pane { z-index: 650; }
|
||||
.leaflet-popup-pane { z-index: 700; }
|
||||
|
||||
.leaflet-map-pane canvas { z-index: 100; }
|
||||
.leaflet-map-pane svg { z-index: 200; }
|
||||
|
||||
.leaflet-vml-shape {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
.lvml {
|
||||
behavior: url(#default#VML);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
/* control positioning */
|
||||
|
||||
.leaflet-control {
|
||||
position: relative;
|
||||
z-index: 800;
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-top,
|
||||
.leaflet-bottom {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-top {
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-right {
|
||||
right: 0;
|
||||
}
|
||||
.leaflet-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
.leaflet-left {
|
||||
left: 0;
|
||||
}
|
||||
.leaflet-control {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
float: right;
|
||||
}
|
||||
.leaflet-top .leaflet-control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom and fade animations */
|
||||
|
||||
.leaflet-fade-anim .leaflet-tile {
|
||||
will-change: opacity;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-popup {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
-o-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
|
||||
opacity: 1;
|
||||
}
|
||||
.leaflet-zoom-animated {
|
||||
-webkit-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
will-change: transform;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-tile,
|
||||
.leaflet-pan-anim .leaflet-tile {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* cursors */
|
||||
|
||||
.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
.leaflet-grab {
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
}
|
||||
.leaflet-crosshair,
|
||||
.leaflet-crosshair .leaflet-interactive {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-control {
|
||||
cursor: auto;
|
||||
}
|
||||
.leaflet-dragging .leaflet-grab,
|
||||
.leaflet-dragging .leaflet-grab .leaflet-interactive,
|
||||
.leaflet-dragging .leaflet-marker-draggable {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
}
|
||||
|
||||
/* marker & overlays interactivity */
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-pane > svg path,
|
||||
.leaflet-tile-container {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-marker-icon.leaflet-interactive,
|
||||
.leaflet-image-layer.leaflet-interactive,
|
||||
.leaflet-pane > svg path.leaflet-interactive {
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* visual tweaks */
|
||||
|
||||
.leaflet-container {
|
||||
background: #ddd;
|
||||
outline: 0;
|
||||
}
|
||||
.leaflet-container a {
|
||||
color: #0078A8;
|
||||
}
|
||||
.leaflet-container a.leaflet-active {
|
||||
outline: 2px solid orange;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
border: 2px dotted #38f;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
|
||||
/* general typography */
|
||||
.leaflet-container {
|
||||
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* general toolbar styles */
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ccc;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-control-layers-toggle {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.leaflet-bar a:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.leaflet-bar a.leaflet-disabled {
|
||||
cursor: default;
|
||||
background-color: #f4f4f4;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
/* zoom control */
|
||||
|
||||
.leaflet-control-zoom-in,
|
||||
.leaflet-control-zoom-out {
|
||||
font: bold 18px 'Lucida Console', Monaco, monospace;
|
||||
text-indent: 1px;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
|
||||
/* layers control */
|
||||
|
||||
.leaflet-control-layers {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers.png);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.leaflet-retina .leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers-2x.png);
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers-toggle {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.leaflet-control-layers .leaflet-control-layers-list,
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-list {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 6px 10px 6px 6px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
.leaflet-control-layers-scrollbar {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.leaflet-control-layers-selector {
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.leaflet-control-layers label {
|
||||
display: block;
|
||||
}
|
||||
.leaflet-control-layers-separator {
|
||||
height: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 5px -10px 5px -6px;
|
||||
}
|
||||
|
||||
/* Default icon URLs */
|
||||
.leaflet-default-icon-path {
|
||||
background-image: url(images/marker-icon.png);
|
||||
}
|
||||
|
||||
|
||||
/* attribution and scale controls */
|
||||
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
.leaflet-control-attribution,
|
||||
.leaflet-control-scale-line {
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
}
|
||||
.leaflet-control-attribution a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.leaflet-control-attribution a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution,
|
||||
.leaflet-container .leaflet-control-scale {
|
||||
font-size: 11px;
|
||||
}
|
||||
.leaflet-left .leaflet-control-scale {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control-scale {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.leaflet-control-scale-line {
|
||||
border: 2px solid #777;
|
||||
border-top: none;
|
||||
line-height: 1.1;
|
||||
padding: 2px 5px 1px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child) {
|
||||
border-top: 2px solid #777;
|
||||
border-bottom: none;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
|
||||
border-bottom: 2px solid #777;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-attribution,
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
border: 2px solid rgba(0,0,0,0.2);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
||||
/* popup */
|
||||
|
||||
.leaflet-popup {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 13px 19px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 18px 0;
|
||||
}
|
||||
.leaflet-popup-tip-container {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-popup-tip {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
padding: 1px;
|
||||
|
||||
margin: -10px auto 0;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.leaflet-popup-content-wrapper,
|
||||
.leaflet-popup-tip {
|
||||
background: white;
|
||||
color: #333;
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 4px 4px 0 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
font: 16px/14px Tahoma, Verdana, sans-serif;
|
||||
color: #c3c3c3;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover {
|
||||
color: #999;
|
||||
}
|
||||
.leaflet-popup-scrolled {
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper {
|
||||
zoom: 1;
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
width: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip-container {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-control-zoom,
|
||||
.leaflet-oldie .leaflet-control-layers,
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper,
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
|
||||
/* div icon */
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: #fff;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
|
||||
/* Tooltip */
|
||||
/* Base styles for the element that has a tooltip */
|
||||
.leaflet-tooltip {
|
||||
position: absolute;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
white-space: nowrap;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-tooltip.leaflet-clickable {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-tooltip-top:before,
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 6px solid transparent;
|
||||
background: transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Directions */
|
||||
|
||||
.leaflet-tooltip-bottom {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.leaflet-tooltip-top {
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-top:before {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-top:before {
|
||||
bottom: 0;
|
||||
margin-bottom: -12px;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before {
|
||||
top: 0;
|
||||
margin-top: -12px;
|
||||
margin-left: -6px;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-left {
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before {
|
||||
right: 0;
|
||||
margin-right: -12px;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-right:before {
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1 @@
|
||||
.DS_Store
|
||||
@ -0,0 +1,7 @@
|
||||
Copyright (c) 2013 Michael Lawrence Evans
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@ -0,0 +1,41 @@
|
||||
# Leaflet-hash
|
||||
|
||||
Leaflet-hash lets you to add dynamic URL hashes to web pages with Leaflet maps. You can easily
|
||||
link users to specific map views.
|
||||
|
||||
|
||||
|
||||
### Demo
|
||||
You can view a demo of leaflet-hash at [mlevans.github.io/leaflet-hash/map.html](http://mlevans.github.io/leaflet-hash/map.html).
|
||||
|
||||
### Getting started
|
||||
|
||||
1. Prepare a basic leaflet map. You can find instructions on [Leaflet's quick-start guide](http://leaflet.cloudmade.com/examples/quick-start.html).
|
||||
|
||||
2. Include [leaflet-hash.js](https://github.com/mlevans/leaflet-hash/blob/master/leaflet-hash.js).
|
||||
|
||||
3. Once you have initialized the map (an instance of [L.Map](http://leaflet.cloudmade.com/reference.html#map-usage)), add the following code:
|
||||
|
||||
```javascript
|
||||
// Assuming your map instance is in a variable called map
|
||||
var hash = new L.Hash(map);
|
||||
```
|
||||
|
||||
### Author
|
||||
[@mlevans](http://github.com/mlevans)
|
||||
|
||||
### Contributors
|
||||
[@calvinmetcalf](http://github.com/calvinmetcalf)
|
||||
|
||||
[@jfirebaugh](http://github.com/jfirebaugh)
|
||||
|
||||
[@rsudekum](http://github.com/rsudekum)
|
||||
|
||||
[@tmcw](http://github.com/tmcw)
|
||||
|
||||
[@yohanboniface](http://github.com/yohanboniface)
|
||||
|
||||
|
||||
### License
|
||||
|
||||
MIT License. See [LICENSE](https://github.com/mlevans/leaflet-hash/blob/master/LICENSE.md) for details.
|
||||
@ -0,0 +1,162 @@
|
||||
(function(window) {
|
||||
var HAS_HASHCHANGE = (function() {
|
||||
var doc_mode = window.documentMode;
|
||||
return ('onhashchange' in window) &&
|
||||
(doc_mode === undefined || doc_mode > 7);
|
||||
})();
|
||||
|
||||
L.Hash = function(map) {
|
||||
this.onHashChange = L.Util.bind(this.onHashChange, this);
|
||||
|
||||
if (map) {
|
||||
this.init(map);
|
||||
}
|
||||
};
|
||||
|
||||
L.Hash.parseHash = function(hash) {
|
||||
if(hash.indexOf('#') === 0) {
|
||||
hash = hash.substr(1);
|
||||
}
|
||||
var args = hash.split("/");
|
||||
if (args.length == 3) {
|
||||
var zoom = parseInt(args[0], 10),
|
||||
lat = parseFloat(args[1]),
|
||||
lon = parseFloat(args[2]);
|
||||
if (isNaN(zoom) || isNaN(lat) || isNaN(lon)) {
|
||||
return false;
|
||||
} else {
|
||||
return {
|
||||
center: new L.LatLng(lat, lon),
|
||||
zoom: zoom
|
||||
};
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
L.Hash.formatHash = function(map) {
|
||||
var center = map.getCenter(),
|
||||
zoom = map.getZoom(),
|
||||
precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2));
|
||||
|
||||
return "#" + [zoom,
|
||||
center.lat.toFixed(precision),
|
||||
center.lng.toFixed(precision)
|
||||
].join("/");
|
||||
},
|
||||
|
||||
L.Hash.prototype = {
|
||||
map: null,
|
||||
lastHash: null,
|
||||
|
||||
parseHash: L.Hash.parseHash,
|
||||
formatHash: L.Hash.formatHash,
|
||||
|
||||
init: function(map) {
|
||||
this.map = map;
|
||||
|
||||
// reset the hash
|
||||
this.lastHash = null;
|
||||
this.onHashChange();
|
||||
|
||||
if (!this.isListening) {
|
||||
this.startListening();
|
||||
}
|
||||
},
|
||||
|
||||
removeFrom: function(map) {
|
||||
if (this.changeTimeout) {
|
||||
clearTimeout(this.changeTimeout);
|
||||
}
|
||||
|
||||
if (this.isListening) {
|
||||
this.stopListening();
|
||||
}
|
||||
|
||||
this.map = null;
|
||||
},
|
||||
|
||||
onMapMove: function() {
|
||||
// bail if we're moving the map (updating from a hash),
|
||||
// or if the map is not yet loaded
|
||||
|
||||
if (this.movingMap || !this.map._loaded) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var hash = this.formatHash(this.map);
|
||||
if (this.lastHash != hash) {
|
||||
location.replace(hash);
|
||||
this.lastHash = hash;
|
||||
}
|
||||
},
|
||||
|
||||
movingMap: false,
|
||||
update: function() {
|
||||
var hash = location.hash;
|
||||
if (hash === this.lastHash) {
|
||||
return;
|
||||
}
|
||||
var parsed = this.parseHash(hash);
|
||||
if (parsed) {
|
||||
this.movingMap = true;
|
||||
|
||||
this.map.setView(parsed.center, parsed.zoom);
|
||||
|
||||
this.movingMap = false;
|
||||
} else {
|
||||
this.onMapMove(this.map);
|
||||
}
|
||||
},
|
||||
|
||||
// defer hash change updates every 100ms
|
||||
changeDefer: 100,
|
||||
changeTimeout: null,
|
||||
onHashChange: function() {
|
||||
// throttle calls to update() so that they only happen every
|
||||
// `changeDefer` ms
|
||||
if (!this.changeTimeout) {
|
||||
var that = this;
|
||||
this.changeTimeout = setTimeout(function() {
|
||||
that.update();
|
||||
that.changeTimeout = null;
|
||||
}, this.changeDefer);
|
||||
}
|
||||
},
|
||||
|
||||
isListening: false,
|
||||
hashChangeInterval: null,
|
||||
startListening: function() {
|
||||
this.map.on("moveend", this.onMapMove, this);
|
||||
|
||||
if (HAS_HASHCHANGE) {
|
||||
L.DomEvent.addListener(window, "hashchange", this.onHashChange);
|
||||
} else {
|
||||
clearInterval(this.hashChangeInterval);
|
||||
this.hashChangeInterval = setInterval(this.onHashChange, 50);
|
||||
}
|
||||
this.isListening = true;
|
||||
},
|
||||
|
||||
stopListening: function() {
|
||||
this.map.off("moveend", this.onMapMove, this);
|
||||
|
||||
if (HAS_HASHCHANGE) {
|
||||
L.DomEvent.removeListener(window, "hashchange", this.onHashChange);
|
||||
} else {
|
||||
clearInterval(this.hashChangeInterval);
|
||||
}
|
||||
this.isListening = false;
|
||||
}
|
||||
};
|
||||
L.hash = function(map) {
|
||||
return new L.Hash(map);
|
||||
};
|
||||
L.Map.prototype.addHash = function() {
|
||||
this._hash = L.hash(this);
|
||||
};
|
||||
L.Map.prototype.removeHash = function() {
|
||||
this._hash.removeFrom();
|
||||
};
|
||||
})(window);
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,20 @@
|
||||
{
|
||||
"author": "Michael Lawrence Evans",
|
||||
"name": "leaflet-hash",
|
||||
"description": "linkable location hashes for leaflet",
|
||||
"version": "0.2.1",
|
||||
"homepage": "https://github.com/mlevans/leaflet-hash",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/mlevans/leaflet-hash.git"
|
||||
},
|
||||
"devDependencies": {
|
||||
"mocha": "~1.8",
|
||||
"expect.js": "~0.2.0"
|
||||
},
|
||||
"main": "leaflet-hash.js",
|
||||
"optionalDependencies": {},
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 465 KiB |
@ -0,0 +1,24 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Mocha Tests</title>
|
||||
<link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="mocha"></div>
|
||||
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
|
||||
<script src="../node_modules/expect.js/expect.js"></script>
|
||||
<script src="../node_modules/mocha/mocha.js"></script>
|
||||
|
||||
<script src="../lib/leaflet-src.js"></script>
|
||||
<script src="../leaflet-hash.js"></script>
|
||||
|
||||
<script>mocha.setup('bdd')</script>
|
||||
|
||||
<script src="spec/hash.js"></script>
|
||||
|
||||
<script>
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,68 @@
|
||||
describe("L.Hash", function() {
|
||||
|
||||
var map;
|
||||
|
||||
mocha.ignoreLeaks();
|
||||
|
||||
beforeEach(function() {
|
||||
map = new L.Map(document.createElement('div'));
|
||||
});
|
||||
|
||||
it('sets a hash when the map is moved', function() {
|
||||
var hash = L.hash(map);
|
||||
map.setView([51.505, -0.09], 13);
|
||||
expect(location.hash).to.be('#13/51.5050/-0.0900');
|
||||
});
|
||||
|
||||
it('uses a hash set initially on the page', function(done) {
|
||||
location.hash = '#13/10/40';
|
||||
var hash = L.hash(map);
|
||||
window.setTimeout(function() {
|
||||
expect(Math.round(map.getCenter().lat)).to.be(10);
|
||||
expect(Math.round(map.getCenter().lng)).to.be(40);
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
|
||||
it('responds to a hash change after an initial hash is set', function(done) {
|
||||
map.setView([51.505, -0.09], 13);
|
||||
location.hash = '#13/20/40';
|
||||
var hash = L.hash(map);
|
||||
window.setTimeout(function() {
|
||||
expect(Math.round(map.getCenter().lat)).to.be(20);
|
||||
expect(Math.round(map.getCenter().lng)).to.be(40);
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
|
||||
it('does not acknowledge a junk hash', function(done) {
|
||||
var hash = L.hash(map);
|
||||
map.setView([51, 2], 13);
|
||||
location.hash = '#foo';
|
||||
window.setTimeout(function() {
|
||||
expect(Math.round(map.getCenter().lat)).to.eql(51);
|
||||
expect(Math.round(map.getCenter().lng)).to.eql(2);
|
||||
done();
|
||||
}, 200);
|
||||
});
|
||||
|
||||
it('unbinds events when removed', function() {
|
||||
location.hash = '';
|
||||
var hash = L.hash(map);
|
||||
map.removeControl(hash);
|
||||
map.setView([51.505, -0.09], 13);
|
||||
expect(location.hash).to.be('');
|
||||
});
|
||||
|
||||
it('parses a hash', function() {
|
||||
var parsed = L.Hash.parseHash('#13/20/40');
|
||||
expect(parsed.zoom).to.be(13);
|
||||
expect(parsed.center).to.be.a(L.LatLng);
|
||||
expect(parsed.center).to.eql({lat: 20, lng: 40});
|
||||
});
|
||||
|
||||
it('formats a hash', function() {
|
||||
map.setView([51, 2], 13);
|
||||
expect(L.Hash.formatHash(map)).to.be('#13/51.0000/2.0000');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,41 @@
|
||||
body {
|
||||
color: gray;
|
||||
background: white;
|
||||
}
|
||||
body.subtitle > * {
|
||||
display: none;
|
||||
}
|
||||
body.subtitle .title {
|
||||
display: none;
|
||||
}
|
||||
body.subtitle .title.active {
|
||||
display: block;
|
||||
}
|
||||
.title.active {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
display: block;
|
||||
color: black;
|
||||
/*background: white;*/
|
||||
}
|
||||
#controls {
|
||||
position: absolute;
|
||||
right: 0; top: 0;
|
||||
}
|
||||
body.subtitle #controls {
|
||||
display: block;
|
||||
}
|
||||
/*
|
||||
a.symbol {
|
||||
display: inline-block;
|
||||
width: 19px;
|
||||
height: 30px;
|
||||
|
||||
}
|
||||
a.symbol.video {
|
||||
background-image: url(/icons/playsymbol.png);
|
||||
}
|
||||
a.symbol.scans {
|
||||
background-image: url(/icons/leafletmarker.png);
|
||||
}
|
||||
*/
|
||||
@ -0,0 +1,15 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// subtitles
|
||||
var b = document.createElement("button"),
|
||||
c = document.createElement("div");
|
||||
c.appendChild(b);
|
||||
b.innerHTML = "toggle";
|
||||
b.addEventListener("click", function () {
|
||||
document.body.classList.toggle("subtitle");
|
||||
});
|
||||
|
||||
document.body.append(c);
|
||||
c.id = "controls";
|
||||
|
||||
|
||||
})
|
||||
@ -0,0 +1,266 @@
|
||||
function init_map (max_zoom, abovepages, layoutpages) {
|
||||
|
||||
var cell_width = 320,
|
||||
cell_height = 209;
|
||||
|
||||
if (abovepages === undefined) { abovepages = [] }
|
||||
|
||||
var map = L.map('map', {
|
||||
maxZoom: max_zoom || 9,
|
||||
minZoom: 0,
|
||||
zoom: 0,
|
||||
crs: L.CRS.Simple,
|
||||
center: new L.LatLng(0,0)
|
||||
});
|
||||
|
||||
|
||||
var markers = [
|
||||
{
|
||||
"id": "t1",
|
||||
"y": -23.0,
|
||||
"zoom": 2,
|
||||
"x": 156.3
|
||||
},
|
||||
{
|
||||
"id": "t13",
|
||||
"y": -9.938,
|
||||
"zoom": 7,
|
||||
"x": 7.078
|
||||
},
|
||||
{
|
||||
"id": "t24",
|
||||
"y": -10.016,
|
||||
"zoom": 6,
|
||||
"x": 312.891
|
||||
},
|
||||
{
|
||||
"id": "t25",
|
||||
"y": -9.922,
|
||||
"zoom": 6,
|
||||
"x": 17.156
|
||||
},
|
||||
{
|
||||
"id": "t27",
|
||||
"y": -9.891,
|
||||
"zoom": 6,
|
||||
"x": 25.078
|
||||
},
|
||||
{
|
||||
"id": "t30",
|
||||
"y": -10.031,
|
||||
"zoom": 6,
|
||||
"x": 44.969
|
||||
},
|
||||
{
|
||||
"id": "t31",
|
||||
"y": -10.094,
|
||||
"zoom": 6,
|
||||
"x": 52.719
|
||||
},
|
||||
{
|
||||
"id": "t34",
|
||||
"y": -9.906,
|
||||
"zoom": 6,
|
||||
"x": 94.922
|
||||
},
|
||||
{
|
||||
"id": "t36",
|
||||
"y": -9.859,
|
||||
"zoom": 6,
|
||||
"x": 117.063
|
||||
},
|
||||
{
|
||||
"id": "t37",
|
||||
"y": -9.859,
|
||||
"zoom": 6,
|
||||
"x": 134.938
|
||||
},
|
||||
{
|
||||
"id": "t38",
|
||||
"y": -9.859,
|
||||
"zoom": 6,
|
||||
"x": 137.359
|
||||
},
|
||||
{
|
||||
"id": "t39",
|
||||
"y": -9.938,
|
||||
"zoom": 6,
|
||||
"x": 145.047
|
||||
},
|
||||
{
|
||||
"id": "t41",
|
||||
"y": -9.859,
|
||||
"zoom": 6,
|
||||
"x": 155.0
|
||||
},
|
||||
{
|
||||
"id": "t42",
|
||||
"y": -9.969,
|
||||
"zoom": 6,
|
||||
"x": 172.578
|
||||
},
|
||||
{
|
||||
"id": "t43",
|
||||
"y": -9.953,
|
||||
"zoom": 6,
|
||||
"x": 176.906
|
||||
},
|
||||
{
|
||||
"id": "t44",
|
||||
"y": -3.484,
|
||||
"zoom": 6,
|
||||
"x": 174.953
|
||||
},
|
||||
{
|
||||
"id": "t45",
|
||||
"y": -10.063,
|
||||
"zoom": 6,
|
||||
"x": 185.156
|
||||
},
|
||||
{
|
||||
"id": "t47",
|
||||
"y": -11.438,
|
||||
"zoom": 6,
|
||||
"x": 195.953
|
||||
},
|
||||
{
|
||||
"id": "t48",
|
||||
"y": -10.188,
|
||||
"zoom": 6,
|
||||
"x": 204.969
|
||||
},
|
||||
{
|
||||
"id": "t50",
|
||||
"y": -9.938,
|
||||
"zoom": 6,
|
||||
"x": 217.156
|
||||
},
|
||||
{
|
||||
"id": "t51",
|
||||
"y": -9.922,
|
||||
"zoom": 6,
|
||||
"x": 223.094
|
||||
},
|
||||
{
|
||||
"id": "t52",
|
||||
"y": -9.984,
|
||||
"zoom": 6,
|
||||
"x": 242.922
|
||||
},
|
||||
{
|
||||
"id": "t53",
|
||||
"y": -9.984,
|
||||
"zoom": 6,
|
||||
"x": 246.875
|
||||
},
|
||||
{
|
||||
"id": "t54",
|
||||
"y": -9.984,
|
||||
"zoom": 6,
|
||||
"x": 297.094
|
||||
},
|
||||
{
|
||||
"id": "t55",
|
||||
"y": -9.875,
|
||||
"zoom": 6,
|
||||
"x": 302.813
|
||||
},
|
||||
{
|
||||
"id": "t56",
|
||||
"y": -9.844,
|
||||
"zoom": 6,
|
||||
"x": 307.094
|
||||
},
|
||||
{
|
||||
"id": "t57",
|
||||
"y": -12.0,
|
||||
"zoom": 9,
|
||||
"x": 308.0391
|
||||
},
|
||||
{
|
||||
"id": "t62",
|
||||
"y": -10.328,
|
||||
"zoom": 6,
|
||||
"x": 313.219
|
||||
}
|
||||
];
|
||||
// console.log("[map].markers", markers);
|
||||
var allmarkers = [];
|
||||
markers.forEach(function (m) {
|
||||
var marker = L.marker([m.y, m.x]).on("click", function (e) {
|
||||
//console.log("marker click", m.id, e, this)
|
||||
window.parent.postMessage({msg: "mapclick", id: m.id}, "*")
|
||||
});
|
||||
allmarkers.push(marker);
|
||||
})
|
||||
var markers_layer = L.layerGroup(allmarkers);
|
||||
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('GET', 'tiles.json', true);
|
||||
|
||||
var hash = new L.Hash(map);
|
||||
|
||||
function is_above_page (item) {
|
||||
var m = /^_DSC(\d+)\.png/.exec(item.name);
|
||||
if (m) {
|
||||
var pn = parseInt(m[1]),
|
||||
pni = abovepages.indexOf(pn);
|
||||
// console.log("AP", pn, pni);
|
||||
return (abovepages.indexOf(pn) != -1)
|
||||
}
|
||||
}
|
||||
|
||||
request.onload = function() {
|
||||
if (request.status >= 200 && request.status < 400) {
|
||||
// Success!
|
||||
var data = JSON.parse(request.responseText);
|
||||
// console.log("data", data);
|
||||
var pelts = [];
|
||||
var above_spread = false;
|
||||
var x = 0,
|
||||
y = 0,
|
||||
items = data['@graph'];
|
||||
for (var i=0, l=items.length; i<l; i++) {
|
||||
var item = items[i],
|
||||
m = /^_DSC(\d+)\.png/.exec(item.name),
|
||||
itemname = m ? m[1] : '';
|
||||
|
||||
if (layoutpages && layoutpages[itemname]) {
|
||||
x = layoutpages[itemname].x;
|
||||
y = layoutpages[itemname].y;
|
||||
// console.log("using layoutpages, placing", items[i].name, "at", x, y);
|
||||
pelts.push({x: x, y: y, item: items[i]});
|
||||
continue
|
||||
}
|
||||
if (is_above_page(items[i])) {
|
||||
// above_spread = true;
|
||||
y = 0;
|
||||
x -= 1;
|
||||
} else {
|
||||
y = 1;
|
||||
}
|
||||
// pelts.push({x: i, y: 0, item: items[i]});
|
||||
// console.log("placing", items[i].name, "at", x, y);
|
||||
pelts.push({x: x, y: y, item: items[i]});
|
||||
x += 1;
|
||||
// if (i == 1) break;
|
||||
}
|
||||
var vt = leafygal.layout(pelts, undefined, undefined, undefined, undefined, undefined, cell_width, cell_height),
|
||||
layer = leafygal.gridlayer(L, vt, {tileSize: L.point(cell_width, cell_height)});
|
||||
map.addLayer(layer);
|
||||
|
||||
map.addLayer(markers_layer);
|
||||
L.control.layers(null, { "Show links": markers_layer }).addTo(map);
|
||||
|
||||
|
||||
} else {
|
||||
console.log("server ERROR");
|
||||
}
|
||||
};
|
||||
request.onerror = function() {
|
||||
console.log("connection ERROR");
|
||||
};
|
||||
request.send();
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ST01</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="../lib/leaflet/leaflet.js"></script>
|
||||
<link href="../lib/leaflet/leaflet.css" rel="stylesheet" type="text/css">
|
||||
<script src="../lib/leaflet-hash/leaflet-hash.js"></script>
|
||||
<script src="../lib/leafygal.js"></script>
|
||||
<style>
|
||||
div.leaflet-tile {
|
||||
color: white;
|
||||
position: absolute;
|
||||
pointer-events: auto; /* this enables links */
|
||||
}
|
||||
div.leaflet-tile a {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
z-index: 1;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-shadow: 1px 1px 2px black;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
display: none; /* none - to hide, block - to show filenames */
|
||||
}
|
||||
div.leaflet-control-attribution {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: #C7C7C7"></div>
|
||||
<script src="map.js"></script>
|
||||
<script type="text/javascript">
|
||||
var abovepages = [1751];
|
||||
init_map(9, abovepages);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,118 @@
|
||||
#!/usr/bin/env python
|
||||
from __future__ import print_function
|
||||
from PIL import Image
|
||||
import re, sys, json, os
|
||||
|
||||
try:
|
||||
from urllib import quote as urlquote # Python 2.X
|
||||
except ImportError:
|
||||
from urllib.parse import quote as urlquote # Python 3+
|
||||
|
||||
|
||||
def fitbox (boxw, boxh, w, h):
|
||||
rw = boxw
|
||||
rh = int(rw * (float(h) / w))
|
||||
if (rh >= boxh):
|
||||
rh = boxh
|
||||
rw = int(rh * (float(w) / h))
|
||||
return rw, rh
|
||||
|
||||
def tile_image (im, maxz=0, tilew=256, tileh=256, base=".", template="z{0[z]}y{0[y]}x{0[x]}.jpg", bgcolor=(0,0,0), margin_right=0, margin_bottom=0):
|
||||
z = 0
|
||||
boxw, boxh = tilew, tileh
|
||||
|
||||
alpha = bgcolor != None # not template.endswith("jpg")
|
||||
|
||||
while True:
|
||||
rw, rh = fitbox(boxw, boxh, im.size[0], im.size[1])
|
||||
rim = im.resize((rw-margin_right, rh-margin_bottom), Image.ANTIALIAS)
|
||||
if bgcolor:
|
||||
tim = Image.new("RGB", (boxw, boxh), bgcolor)
|
||||
tim.paste(rim, (0, 0))
|
||||
else:
|
||||
tim = Image.new("RGBA", (boxw, boxh))
|
||||
tim.paste(rim, (0, 0))
|
||||
|
||||
rows, cols = 2**z, 2**z
|
||||
for r in range(rows):
|
||||
for c in range(cols):
|
||||
ix = c*tilew
|
||||
iy = r*tileh
|
||||
cim = tim.crop((ix, iy, ix+tilew, iy+tileh))
|
||||
op = base + template.format({'z':z, 'x':c, 'y':r})
|
||||
# if not alpha:
|
||||
# cim = cim.convert("RGB")
|
||||
cim.save(op)
|
||||
|
||||
z += 1
|
||||
if z>maxz:
|
||||
break
|
||||
boxw *= 2
|
||||
boxh *= 2
|
||||
|
||||
def expand_template (x):
|
||||
return re.sub(r"{(\w+?)}", "{0[\\1]}", x)
|
||||
|
||||
if __name__ == "__main__":
|
||||
from argparse import ArgumentParser
|
||||
|
||||
ap = ArgumentParser("Generate image tiles and output JSON for a collection of images")
|
||||
ap.add_argument("input", nargs="+")
|
||||
|
||||
ap.add_argument("--basepath", default=".")
|
||||
ap.add_argument("--baseuri", default="")
|
||||
|
||||
ap.add_argument("--tilespath", default="tiles", help="name of path to create in the same folder as the original")
|
||||
ap.add_argument("--tilewidth", type=int, default=256)
|
||||
ap.add_argument("--tileheight", type=int, default=256)
|
||||
ap.add_argument("--zoom", type=int, default=3)
|
||||
ap.add_argument("--tilename", default="z{z}y{y}x{x}.png")
|
||||
ap.add_argument("--force", default=False, action="store_true")
|
||||
|
||||
args = ap.parse_args()
|
||||
|
||||
"""
|
||||
leafygal format: {id: original, tiles: "template", name: filename}
|
||||
"""
|
||||
|
||||
tilenamex = expand_template(args.tilename)
|
||||
#bgcolor = (0, 0, 0)
|
||||
bgcolor = None
|
||||
items = []
|
||||
|
||||
for imgpath in args.input:
|
||||
parent = os.path.split(imgpath)[0]
|
||||
basename = os.path.basename(imgpath)
|
||||
path = os.path.join(parent, args.tilespath, basename)
|
||||
item = {
|
||||
'id': urlquote(imgpath),
|
||||
'name': basename,
|
||||
'tiles': os.path.join(path, args.tilename)
|
||||
}
|
||||
tile0 = os.path.join(path, tilenamex.format({'x': 0, 'y': 0, 'z': 0}))
|
||||
items.append(item)
|
||||
if not os.path.exists(tile0) or args.force:
|
||||
print ("Tiling {0}".format(imgpath), file=sys.stderr)
|
||||
try:
|
||||
im = Image.open(imgpath)
|
||||
try:
|
||||
os.makedirs(path)
|
||||
except OSError:
|
||||
pass
|
||||
tile_image(im, args.zoom, args.tilewidth, args.tileheight, path+"/", tilenamex, bgcolor)
|
||||
# tiles.append(t)
|
||||
|
||||
except IOError as e:
|
||||
print ("Missing {0}, skipping".format(n), file=sys.stderr)
|
||||
items = items[:-1]
|
||||
|
||||
data = {
|
||||
'@context': {
|
||||
'id': '@id',
|
||||
'aa': 'http://activearchives.org/terms',
|
||||
'name': 'aa:filename',
|
||||
'tiles': 'aa:tiles'
|
||||
},
|
||||
'@graph': items
|
||||
}
|
||||
print (json.dumps(data, indent=2))
|
||||
@ -0,0 +1,165 @@
|
||||
{
|
||||
"@context": {
|
||||
"id": "@id",
|
||||
"aa": "http://activearchives.org/terms",
|
||||
"name": "aa:filename",
|
||||
"tiles": "aa:tiles"
|
||||
},
|
||||
"@graph": [
|
||||
{
|
||||
"id": "images/page-0.jpg",
|
||||
"name": "page-0.jpg",
|
||||
"tiles": "images/tiles/page-0.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-10.jpg",
|
||||
"name": "page-10.jpg",
|
||||
"tiles": "images/tiles/page-10.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-11.jpg",
|
||||
"name": "page-11.jpg",
|
||||
"tiles": "images/tiles/page-11.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-12.jpg",
|
||||
"name": "page-12.jpg",
|
||||
"tiles": "images/tiles/page-12.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-13.jpg",
|
||||
"name": "page-13.jpg",
|
||||
"tiles": "images/tiles/page-13.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-14.jpg",
|
||||
"name": "page-14.jpg",
|
||||
"tiles": "images/tiles/page-14.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-15.jpg",
|
||||
"name": "page-15.jpg",
|
||||
"tiles": "images/tiles/page-15.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-16.jpg",
|
||||
"name": "page-16.jpg",
|
||||
"tiles": "images/tiles/page-16.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-17.jpg",
|
||||
"name": "page-17.jpg",
|
||||
"tiles": "images/tiles/page-17.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-18.jpg",
|
||||
"name": "page-18.jpg",
|
||||
"tiles": "images/tiles/page-18.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-19.jpg",
|
||||
"name": "page-19.jpg",
|
||||
"tiles": "images/tiles/page-19.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-1.jpg",
|
||||
"name": "page-1.jpg",
|
||||
"tiles": "images/tiles/page-1.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-20.jpg",
|
||||
"name": "page-20.jpg",
|
||||
"tiles": "images/tiles/page-20.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-21.jpg",
|
||||
"name": "page-21.jpg",
|
||||
"tiles": "images/tiles/page-21.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-22.jpg",
|
||||
"name": "page-22.jpg",
|
||||
"tiles": "images/tiles/page-22.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-23.jpg",
|
||||
"name": "page-23.jpg",
|
||||
"tiles": "images/tiles/page-23.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-24.jpg",
|
||||
"name": "page-24.jpg",
|
||||
"tiles": "images/tiles/page-24.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-25.jpg",
|
||||
"name": "page-25.jpg",
|
||||
"tiles": "images/tiles/page-25.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-26.jpg",
|
||||
"name": "page-26.jpg",
|
||||
"tiles": "images/tiles/page-26.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-27.jpg",
|
||||
"name": "page-27.jpg",
|
||||
"tiles": "images/tiles/page-27.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-28.jpg",
|
||||
"name": "page-28.jpg",
|
||||
"tiles": "images/tiles/page-28.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-29.jpg",
|
||||
"name": "page-29.jpg",
|
||||
"tiles": "images/tiles/page-29.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-2.jpg",
|
||||
"name": "page-2.jpg",
|
||||
"tiles": "images/tiles/page-2.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-30.jpg",
|
||||
"name": "page-30.jpg",
|
||||
"tiles": "images/tiles/page-30.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-3.jpg",
|
||||
"name": "page-3.jpg",
|
||||
"tiles": "images/tiles/page-3.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-4.jpg",
|
||||
"name": "page-4.jpg",
|
||||
"tiles": "images/tiles/page-4.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-5.jpg",
|
||||
"name": "page-5.jpg",
|
||||
"tiles": "images/tiles/page-5.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-6.jpg",
|
||||
"name": "page-6.jpg",
|
||||
"tiles": "images/tiles/page-6.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-7.jpg",
|
||||
"name": "page-7.jpg",
|
||||
"tiles": "images/tiles/page-7.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-8.jpg",
|
||||
"name": "page-8.jpg",
|
||||
"tiles": "images/tiles/page-8.jpg/z{z}y{y}x{x}.png"
|
||||
},
|
||||
{
|
||||
"id": "images/page-9.jpg",
|
||||
"name": "page-9.jpg",
|
||||
"tiles": "images/tiles/page-9.jpg/z{z}y{y}x{x}.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue