# HG changeset patch # User Tero Marttila # Date 1410731370 -10800 # Node ID 51908b0cc3a15ae87d0648fd1cf4d5719424c493 # Parent 5b2b866ad0a37ae9e0780adbdfefe04be15d0ea1 pngtile.image: render map link diff -r 5b2b866ad0a3 -r 51908b0cc3a1 pngtile/image.py --- a/pngtile/image.py Mon Sep 15 00:49:15 2014 +0300 +++ b/pngtile/image.py Mon Sep 15 00:49:30 2014 +0300 @@ -47,6 +47,8 @@ tile_size = pngtile.tile.TILE_SIZE, tile_zoom = pngtile.tile.MAX_ZOOM, + image_url = 'http://zovoweix.qmsk.net:8080/{name}?w={w}&h={h}&x={x}&y={y}&zoom={z}', + image_name = name, image_width = image_info['img_width'], image_height = image_info['img_height'], ) diff -r 5b2b866ad0a3 -r 51908b0cc3a1 static/pngtile/map.css --- a/static/pngtile/map.css Mon Sep 15 00:49:15 2014 +0300 +++ b/static/pngtile/map.css Mon Sep 15 00:49:30 2014 +0300 @@ -7,3 +7,15 @@ width: 100%; height: 100%; } + +div.leaflet-control-link { + +} + +a.leaflet-control-link-link { + display: block; + background-color: #fff; + box-shadow: 0 1px 5px rgba(0,0,0,0.65); + padding: 0.5em; + border-radius: 4px; +} diff -r 5b2b866ad0a3 -r 51908b0cc3a1 static/pngtile/map.js --- a/static/pngtile/map.js Mon Sep 15 00:49:15 2014 +0300 +++ b/static/pngtile/map.js Mon Sep 15 00:49:30 2014 +0300 @@ -1,6 +1,53 @@ var map_config; var map; +L.Control.Link = L.Control.extend({ + options: { + position: 'topright', + url: null, + }, + + onAdd: function (map) { + var container = L.DomUtil.create('div', 'leaflet-control-link'); + + var link = this.link = L.DomUtil.create('a', 'leaflet-control-link-link', container); + + map.on('move', this._update, this); + + return container; + }, + + onRemove: function (map) { + map.off('move', this._update, this); + }, + + _update: function (e) { + var map_center = map.getCenter(); + var map_zoom = map.getZoom(); + var size = map.getSize(); + + var state = { + w: size.x, + h: size.y, + x: (+map_center.lng) << map_config.tile_zoom, + y: (-map_center.lat) << map_config.tile_zoom, + z: map_config.tile_zoom - map_zoom, + }; + + var url = L.Util.template(this.options.url, L.extend(state, this.options)); + + this.link.href = url; + + with (state) { + this.link.innerHTML = w + 'x' + h + ' @ (' + x + ', ' + y + ') @ ' + z; + } + }, +}); + +L.control.link = function (options) { + return new L.Control.Link(options); +}; + function map_init (_config) { map_config = _config; @@ -36,6 +83,12 @@ bounds: bounds }).addTo(map); + // controls + L.control.link({ + url: map_config.image_url, + name: map_config.image_name, + }).addTo(map); + // set position var x = bounds.getCenter().lng; var y = -bounds.getCenter().lat;