You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
437 lines
12 KiB
HTML
437 lines
12 KiB
HTML
8 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title></title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
|
|
<script src="/lib/leaflet-1.0.1/leaflet.js"></script>
|
||
|
|
<link href="/lib/leaflet-1.0.1/leaflet.css" rel="stylesheet" type="text/css">
|
||
|
|
<link href="styles.css" rel="stylesheet" type="text/css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="frame" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px">
|
||
|
|
<div id="map" style="width: 100%; height: 100%; background: black"></div>
|
||
|
|
<div id="text" style="position: absolute; left: 50px; top: 10px; width: auto; color: white">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
// warning CHANGES TO THIS CODE NEED TO BE ROLLED BACK INTO leaflet.py
|
||
|
|
var cell_layout, expandzoom, fourup, layoutxyz, render, split4, tiler, tiles_wrapper, zoom;
|
||
|
|
|
||
|
|
window.tiler = tiler = {};
|
||
|
|
|
||
|
|
tiler.tiles_wrapper = tiles_wrapper = function(path, ext) {
|
||
|
|
if (ext == null) { ext = "jpg"; }
|
||
|
|
var ret = {};
|
||
|
|
ret.get_tile_path = function(z, y, x) {
|
||
|
|
return path + ("/z"+z+"y"+y+"x"+x+"."+ext);
|
||
|
|
};
|
||
|
|
return ret;
|
||
|
|
};
|
||
|
|
|
||
|
|
tiler.zoom = zoom = function(tiles, caption, url, x, y, z, maxzoom) {
|
||
|
|
var c, i, k, kids, len, len1, node, r, ref, ref1;
|
||
|
|
if (x == null) {
|
||
|
|
x = 0;
|
||
|
|
}
|
||
|
|
if (y == null) {
|
||
|
|
y = 0;
|
||
|
|
}
|
||
|
|
if (z == null) {
|
||
|
|
z = 0;
|
||
|
|
}
|
||
|
|
if (maxzoom == null) {
|
||
|
|
maxzoom = 3;
|
||
|
|
}
|
||
|
|
node = {};
|
||
|
|
if (caption && x === 0 && y === 0) {
|
||
|
|
node['text'] = caption;
|
||
|
|
}
|
||
|
|
var lastc = Math.pow(2, z) - 1;
|
||
|
|
if (url && x === 0 && y === lastc) {
|
||
|
|
node['url'] = url
|
||
|
|
}
|
||
|
|
node['image'] = tiles.get_tile_path(z, y, x);
|
||
|
|
if (z < maxzoom) {
|
||
|
|
kids = [];
|
||
|
|
ref = [0, 1];
|
||
|
|
for (i = 0, len = ref.length; i < len; i++) {
|
||
|
|
r = ref[i];
|
||
|
|
ref1 = [0, 1];
|
||
|
|
for (k = 0, len1 = ref1.length; k < len1; k++) {
|
||
|
|
c = ref1[k];
|
||
|
|
kids.push(zoom(tiles, caption, url, (x * 2) + c, (y * 2) + r, z + 1, maxzoom));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
node['children'] = kids;
|
||
|
|
}
|
||
|
|
return node;
|
||
|
|
};
|
||
|
|
|
||
|
|
split4 = function(items) {
|
||
|
|
var c, el, i, l, len, p, ref, results, x;
|
||
|
|
l = items.length;
|
||
|
|
p = Math.ceil(Math.log(l) / Math.log(4));
|
||
|
|
c = Math.max(1, Math.pow(4, p) / 4);
|
||
|
|
el = function(x, c) {
|
||
|
|
while (x.length < c) {
|
||
|
|
x.push(null);
|
||
|
|
}
|
||
|
|
return x;
|
||
|
|
};
|
||
|
|
ref = [items.slice(0, c), items.slice(c, c * 2), items.slice(c * 2, c * 3), items.slice(c * 3)];
|
||
|
|
results = [];
|
||
|
|
for (i = 0, len = ref.length; i < len; i++) {
|
||
|
|
x = ref[i];
|
||
|
|
results.push(el(x, c));
|
||
|
|
}
|
||
|
|
return results;
|
||
|
|
};
|
||
|
|
|
||
|
|
cell_layout = function(items) {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
y: 0,
|
||
|
|
x: 0,
|
||
|
|
item: items[0]
|
||
|
|
}, {
|
||
|
|
y: 0,
|
||
|
|
x: 1,
|
||
|
|
item: items[1]
|
||
|
|
}, {
|
||
|
|
y: 1,
|
||
|
|
x: 0,
|
||
|
|
item: items[2]
|
||
|
|
}, {
|
||
|
|
y: 1,
|
||
|
|
x: 1,
|
||
|
|
item: items[3]
|
||
|
|
}
|
||
|
|
];
|
||
|
|
};
|
||
|
|
|
||
|
|
tiler.render = render = function(items, tilewidth, tileheight, z, y, x) {
|
||
|
|
var g, i, j, kids, len, node, ref;
|
||
|
|
if (tilewidth == null) {
|
||
|
|
tilewidth = 256;
|
||
|
|
}
|
||
|
|
if (tileheight == null) {
|
||
|
|
tileheight = 256;
|
||
|
|
}
|
||
|
|
if (z == null) {
|
||
|
|
z = 0;
|
||
|
|
}
|
||
|
|
if (y == null) {
|
||
|
|
y = 0;
|
||
|
|
}
|
||
|
|
if (x == null) {
|
||
|
|
x = 0;
|
||
|
|
}
|
||
|
|
if (items.length === 1) {
|
||
|
|
x = items[0];
|
||
|
|
if (x === null) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return zoom(x, '');
|
||
|
|
} else {
|
||
|
|
node = {};
|
||
|
|
node['text'] = '';
|
||
|
|
kids = [];
|
||
|
|
ref = cell_layout(split4(items));
|
||
|
|
for (i = 0, len = ref.length; i < len; i++) {
|
||
|
|
g = ref[i];
|
||
|
|
kids.push(render(g.item, tilewidth, tileheight, z + 1, (y * 2) + g.y, (x * 2) + g.x));
|
||
|
|
}
|
||
|
|
node.children = (function() {
|
||
|
|
var k, len1, results;
|
||
|
|
results = [];
|
||
|
|
for (k = 0, len1 = kids.length; k < len1; k++) {
|
||
|
|
j = kids[k];
|
||
|
|
if (j !== null) {
|
||
|
|
results.push(j);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return results;
|
||
|
|
})();
|
||
|
|
node.image = fourup((function() {
|
||
|
|
var k, len1, ref1, results;
|
||
|
|
ref1 = node.children;
|
||
|
|
results = [];
|
||
|
|
for (k = 0, len1 = ref1.length; k < len1; k++) {
|
||
|
|
j = ref1[k];
|
||
|
|
if (j !== null) {
|
||
|
|
results.push(j.image);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return results;
|
||
|
|
})(), tilewidth, tileheight);
|
||
|
|
return node;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
tiler.layoutxyz = layoutxyz = function(n, x, y, z, outnode) {
|
||
|
|
var g, i, len, ref;
|
||
|
|
if (x == null) {
|
||
|
|
x = 0;
|
||
|
|
}
|
||
|
|
if (y == null) {
|
||
|
|
y = 0;
|
||
|
|
}
|
||
|
|
if (z == null) {
|
||
|
|
z = 0;
|
||
|
|
}
|
||
|
|
if (outnode == null) {
|
||
|
|
outnode = {};
|
||
|
|
}
|
||
|
|
outnode[x + "," + y + "," + z] = n;
|
||
|
|
if (n.children) {
|
||
|
|
ref = cell_layout(n.children);
|
||
|
|
for (i = 0, len = ref.length; i < len; i++) {
|
||
|
|
g = ref[i];
|
||
|
|
if (g.item) {
|
||
|
|
layoutxyz(g.item, (x * 2) + g.x, (y * 2) + g.y, z + 1, outnode);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return outnode;
|
||
|
|
};
|
||
|
|
|
||
|
|
tiler.fourup = fourup = function(images, tilewidth, tileheight) {
|
||
|
|
if (tilewidth == null) {
|
||
|
|
tilewidth = 256;
|
||
|
|
}
|
||
|
|
if (tileheight == null) {
|
||
|
|
tileheight = 256;
|
||
|
|
}
|
||
|
|
return function(done) {
|
||
|
|
var i, img, imgelts, len, loadcount, results, src, x;
|
||
|
|
loadcount = 0;
|
||
|
|
images = (function() {
|
||
|
|
var i, len, results;
|
||
|
|
results = [];
|
||
|
|
for (i = 0, len = images.length; i < len; i++) {
|
||
|
|
x = images[i];
|
||
|
|
if (x !== null) {
|
||
|
|
results.push(x);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return results;
|
||
|
|
})();
|
||
|
|
imgelts = [];
|
||
|
|
results = [];
|
||
|
|
for (i = 0, len = images.length; i < len; i++) {
|
||
|
|
src = images[i];
|
||
|
|
img = new Image;
|
||
|
|
imgelts.push(img);
|
||
|
|
img.addEventListener("load", function() {
|
||
|
|
var canvas, ctx, g, hh, hw, k, len1, ref;
|
||
|
|
if (++loadcount >= images.length) {
|
||
|
|
canvas = document.createElement("canvas");
|
||
|
|
canvas.width = tilewidth;
|
||
|
|
canvas.height = tileheight;
|
||
|
|
ctx = canvas.getContext("2d");
|
||
|
|
hw = tilewidth / 2;
|
||
|
|
hh = tileheight / 2;
|
||
|
|
ref = cell_layout(imgelts);
|
||
|
|
for (k = 0, len1 = ref.length; k < len1; k++) {
|
||
|
|
g = ref[k];
|
||
|
|
if (g.item) {
|
||
|
|
ctx.drawImage(g.item, g.x * hw, g.y * hh, hw, hh);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return done(null, canvas.toDataURL());
|
||
|
|
}
|
||
|
|
}, false);
|
||
|
|
if (typeof src === "function") {
|
||
|
|
console.log("inside 4up, deferring");
|
||
|
|
results.push(src(function(err, data) {
|
||
|
|
console.log(" inside 4up, GOT DATA");
|
||
|
|
return img.src = data;
|
||
|
|
}));
|
||
|
|
} else {
|
||
|
|
results.push(img.src = src);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return results;
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
tiler.expandzoom = expandzoom = function(node) {
|
||
|
|
var c, ret, tilespath;
|
||
|
|
if (node.zoomable) {
|
||
|
|
tilespath = node.image.replace(/\/[^\/]+$/, "");
|
||
|
|
var ext = node.image.match(/\.([^\.]+)$/);
|
||
|
|
if (ext != null) { ext = ext[1] };
|
||
|
|
ret = zoom(tiles_wrapper(tilespath, ext), node.text, node.url);
|
||
|
|
return ret;
|
||
|
|
}
|
||
|
|
if (node.children) {
|
||
|
|
node.children = (function() {
|
||
|
|
var i, len, ref, results;
|
||
|
|
ref = node.children;
|
||
|
|
results = [];
|
||
|
|
for (i = 0, len = ref.length; i < len; i++) {
|
||
|
|
c = ref[i];
|
||
|
|
if (c != null) {
|
||
|
|
results.push(expandzoom(c));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return results;
|
||
|
|
})();
|
||
|
|
}
|
||
|
|
return node;
|
||
|
|
};
|
||
|
|
|
||
|
|
/* DynamicTiles */
|
||
|
|
/*
|
||
|
|
A simple GridLayer extension that takes an external "nodes" object as option,
|
||
|
|
Nodes are keyed [x,y,z]
|
||
|
|
and expected to be of the form:
|
||
|
|
{
|
||
|
|
text: "My text",
|
||
|
|
image" "imagepath.jpg"
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
L.GridLayer.DynamicTiles = L.GridLayer.extend({
|
||
|
|
createTile: function (coords, done) { // done = (err, tile)
|
||
|
|
// console.log("createTile", coords, this.options, this.options.nodes);
|
||
|
|
var tile = document.createElement('div'),
|
||
|
|
node = this.options.nodes[coords.x+","+coords.y+","+coords.z],
|
||
|
|
defer = false;
|
||
|
|
|
||
|
|
tile.classList.add("tile");
|
||
|
|
if (node != undefined) {
|
||
|
|
// console.log("NODE", node);
|
||
|
|
if (node.image) {
|
||
|
|
var img = document.createElement("img");
|
||
|
|
defer = true;
|
||
|
|
img.addEventListener("load", function () {
|
||
|
|
done(null, tile);
|
||
|
|
})
|
||
|
|
img.src = node.image;
|
||
|
|
tile.appendChild(img);
|
||
|
|
img.classList.add("imagetile");
|
||
|
|
}
|
||
|
|
if (node.text) {
|
||
|
|
//console.log("text", node.text);
|
||
|
|
var textdiv = document.createElement("div");
|
||
|
|
textdiv.innerHTML = node.text;
|
||
|
|
tile.appendChild(textdiv);
|
||
|
|
textdiv.classList.add("text");
|
||
|
|
}
|
||
|
|
// if (node.url) {
|
||
|
|
// console.log("NODE HAS URL!", node.url);
|
||
|
|
// var urldiv = document.createElement("div"),
|
||
|
|
// urllink = document.createElement("a"),
|
||
|
|
// m = node.url.search(/\/([^\/]+)$/);
|
||
|
|
// urllink.innerHTML = (m != null) ? m[1] : "LINK";
|
||
|
|
// urldiv.appendChild(urllink);
|
||
|
|
// urldiv.classList.add("url");
|
||
|
|
// tile.appendChild(urldiv);
|
||
|
|
// }
|
||
|
|
if (node.background) {
|
||
|
|
tile.style.color = node.background;
|
||
|
|
}
|
||
|
|
if (node.class) {
|
||
|
|
tile.classList.add(node.class);
|
||
|
|
}
|
||
|
|
tile.classList.add("z"+coords.z);
|
||
|
|
} else {
|
||
|
|
tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
|
||
|
|
tile.classList.add("coords");
|
||
|
|
}
|
||
|
|
// tile.style.outline = '1px solid red';
|
||
|
|
if (!defer) {
|
||
|
|
window.setTimeout(function () {
|
||
|
|
done(null, tile);
|
||
|
|
}, 250);
|
||
|
|
}
|
||
|
|
return tile;
|
||
|
|
}
|
||
|
|
});""
|
||
|
|
|
||
|
|
L.gridLayer.dynamicTiles = function(opts) {
|
||
|
|
return new L.GridLayer.DynamicTiles(opts);
|
||
|
|
};
|
||
|
|
|
||
|
|
}).call(this);
|
||
|
|
|
||
|
|
(function () {
|
||
|
|
|
||
|
|
|
||
|
|
function getjson (url, callback) {
|
||
|
|
var request = new XMLHttpRequest();
|
||
|
|
request.open('GET', url, true);
|
||
|
|
request.onload = function() {
|
||
|
|
if (request.readyState == XMLHttpRequest.DONE && request.status >= 200 && request.status < 400) {
|
||
|
|
callback(null, JSON.parse(request.responseText));
|
||
|
|
} else {
|
||
|
|
callback("server error");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
request.onerror = function() {
|
||
|
|
callback("connection error");
|
||
|
|
};
|
||
|
|
request.send();
|
||
|
|
}
|
||
|
|
|
||
|
|
var map = L.map('map', {
|
||
|
|
editable: true,
|
||
|
|
maxZoom: 100,
|
||
|
|
minZoom: 0,
|
||
|
|
zoom: 0,
|
||
|
|
crs: L.CRS.Simple,
|
||
|
|
center: new L.LatLng(0,0),
|
||
|
|
});
|
||
|
|
|
||
|
|
getjson("index.json", function (err, data) {
|
||
|
|
var nodes = (tiler.layoutxyz(tiler.expandzoom(data)));
|
||
|
|
map.addLayer( L.gridLayer.dynamicTiles({
|
||
|
|
minZoom: 0,
|
||
|
|
nodes: nodes
|
||
|
|
}) );
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
var yx = L.latLng,
|
||
|
|
xy = function(x, y) {
|
||
|
|
if (L.Util.isArray(x)) { // When doing xy([x, y]);
|
||
|
|
return yx(x[1], x[0]);
|
||
|
|
}
|
||
|
|
return yx(y, x); // When doing xy(x, y);
|
||
|
|
};
|
||
|
|
|
||
|
|
function absolutize (coords, scale, x, y) {
|
||
|
|
// turns inkscape x,y relative path coords into absolute
|
||
|
|
// nb flips the direction of the y axis as well
|
||
|
|
if (scale == null) { scale = 1.0 }
|
||
|
|
if (x == null) { x = 0.0 }
|
||
|
|
if (y == null) { y = 0.0 }
|
||
|
|
var c,
|
||
|
|
out = [];
|
||
|
|
for (var i=0, l=coords.length; i<l; i++) {
|
||
|
|
c = coords[i];
|
||
|
|
x += c[0]*scale; y -= c[1]*scale;
|
||
|
|
out.push([x, y]);
|
||
|
|
}
|
||
|
|
return out;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
var xpath = [[0,0], [-7.89063,-10.6836], [7.40235,0], [4.47265,6.48438], [4.53125,-6.48438], [7.40235,0], [-7.89063,10.64453], [8.28125,11.23047], [-7.40234,0], [-4.92188,-6.91406], [-4.86328,6.91406], [-7.40234,0], [8.28125,-11.1914]];
|
||
|
|
xpath = absolutize(xpath, 10.3, 87, -128.5);
|
||
|
|
// flip it
|
||
|
|
xpath = xpath.map(function (x) { return [x[1], x[0]] });
|
||
|
|
// x = x.map(function (x) { return yx(x) });
|
||
|
|
var polyline = L.polyline(xpath, {color: '#ed4e47'}).addTo(map);
|
||
|
|
|
||
|
|
map.setView(xy(0.5 * 256, -0.5 * 256), 0);
|
||
|
|
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|