From da14c7098ae0480ace40cd8fc66a43482dc6b059 Mon Sep 17 00:00:00 2001 From: Michael Murtaugh Date: Fri, 17 Mar 2017 11:34:38 +0100 Subject: [PATCH] added textonimage class --- index.html | 282 +---------------------------------------------------- map.js | 271 ++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 3 + 3 files changed, 275 insertions(+), 281 deletions(-) create mode 100644 map.js diff --git a/index.html b/index.html index c5f3b51..4c26e19 100644 --- a/index.html +++ b/index.html @@ -14,287 +14,7 @@
- - + diff --git a/map.js b/map.js new file mode 100644 index 0000000..e341b3c --- /dev/null +++ b/map.js @@ -0,0 +1,271 @@ +(function() { + // warning CHANGES TO THIS CODE NEED TO BE ROLLED BACK INTO leaflet.py + var expandzoom, cell_layout, layoutxyz, tiler, tiles_wrapper, zoom; + + window.tiler = tiler = {}; + + 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.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); + node['class'] = "iz"+z; + 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; + }; + + 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.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.image) { + textdiv.classList.add("textonimage"); + } + } + 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 TILESIZE = 256; +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, + tileSize: TILESIZE, + 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