Commit 05008f8a authored by Michael Murtaugh's avatar Michael Murtaugh

singleimage example

parent 1610ce9f
Collection of resources to tile images for use with [leaflet](
# Leafling
A collection of useful scripts, templates, and recipes for using the [leaflet]( map paradigm to create (non-) map based interfaces based on tiled images. The scripts are a mixture of python (for producing image tiles), and javascript to be used in the browser along with leaflet.
The *legacy* folder contains earlier versions of scripts.
## Install Leaflet
There is a package.json file with leaflet as a dependency, which means you can use *npm* + the command:
npm install
To install leaflet to the location that the templates expect. Or you could do it some other way :)
## Scripts
### tileimages-ld
Sample output for a single image:
"tilewidth": 256,
"tileheight": 256,
"minzoom": 0,
"maxzoom": 3,
"images": [
"tiles": "tiles/00080_WereldculturenRMV_RV-A45-74.o.jpg/z{z}y{y}x{x}.jpg",
"id": "00080_WereldculturenRMV_RV-A45-74.o.jpg",
"name": "00080_WereldculturenRMV_RV-A45-74.o.jpg"
## Cookbook
### Making a single image viewer
As a makefile:
%.json: %.jpg
$(SCRIPTS)tileimages $< > $@
%.html: %.jpg %.json ../templates/singleimage.html
$(SCRIPTS)jinjafy --data $*.json ../templates/singleimage.html > $@
#!/usr/bin/env python3
import argparse, sys, json, time, os
from jinja2 import Template, DictLoader, Environment, FileSystemLoader
ap = argparse.ArgumentParser("jinjafy")
ap.add_argument("--columns", type=int, default=None, help="treat incoming data as text in this many columns and not json (the default behaviour)")
ap.add_argument("--data", type=argparse.FileType('r'), default=sys.stdin)
ap.add_argument("--listkey", default="items", help="if incoming data is a list, give it this name for the template, default: items")
ap.add_argument("--output", type=argparse.FileType('w'), default=sys.stdout)
args = ap.parse_args()
if args.columns:
data = []
for line in
line = line.split(None, args.columns-1)
if line:
data = json.load(
tpath, tname = os.path.split(args.template)
env = Environment(loader=FileSystemLoader(tpath))
# import jinjafilters
# for name, fn in jinjafilters.all.items():
# env.filters[name] = fn
template = env.get_template(tname)
if type(data) == list:
# print ("Detected list, adding as {0}".format(args.listkey), file=sys.stderr)
data = {
args.listkey: data
print (template.render(**data), file=args.output)
......@@ -62,11 +62,13 @@ if __name__ == "__main__":
ap.add_argument("--basepath", default=".")
ap.add_argument("--baseuri", default="")
ap.add_argument("--background", default=None, help="Color to use as background, in red,green,blue e.g., default None (black for jpg output, transparent for png)")
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}.jpg")
ap.add_argument("--tilename", default="z{z}y{y}x{x}")
ap.add_argument("--extension", default=".jpg")
ap.add_argument("--force", default=False, action="store_true")
args = ap.parse_args()
......@@ -75,8 +77,8 @@ if __name__ == "__main__":
leafygal format: {id: original, tiles: "template", name: filename}
tilenamex = expand_template(args.tilename)
bgcolor = (199, 199, 199)
tilenamex = expand_template(args.tilename+args.extension)
bgcolor = None # (199, 199, 199)
items = []
for imgpath in args.input:
......@@ -86,7 +88,7 @@ if __name__ == "__main__":
item = {
'id': urlquote(imgpath),
'name': basename,
'tiles': os.path.join(path, args.tilename)
'tiles': os.path.join(path, args.tilename+args.extension)
tile0 = os.path.join(path, tilenamex.format({'x': 0, 'y': 0, 'z': 0}))
......@@ -106,12 +108,12 @@ if __name__ == "__main__":
items = items[:-1]
data = {
'@context': {
'id': '@id',
'aa': '',
'name': 'aa:filename',
'tiles': 'aa:tiles'
'@graph': items
"tilewidth": args.tilewidth,
"tileheight": args.tileheight,
"minzoom": 0,
"maxzoom": args.zoom,
"images": items
if args.background:
data['background'] = args.background
print (json.dumps(data, indent=2))
<!DOCTYPE html>
<meta charset="utf-8">
<script src="/node_modules/leaflet/dist/leaflet.js"></script>
<link href="/node_modules/leaflet/dist/leaflet.css" rel="stylesheet" type="text/css">
body {
background: black;
#map {
position: absolute;
left: 0px; top: 0px; right: 0px; bottom: 0px;
background: none;
/* To enable links in tiles */
/* div.leaflet-tile { pointer-events: auto; } */
<div id="map" style=""></div>
<script type="text/javascript">
var map ='map', {
minZoom: 0,
maxZoom: {{maxzoom}},
zoom: 0,
crs: L.CRS.Simple,
center: new L.LatLng(-({{tileheight/2}}),{{tilewidth/2}})
{attribution: ''}).addTo(map);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment