pngtile.image: render map link
authorTero Marttila <terom@paivola.fi>
Mon, 15 Sep 2014 00:49:30 +0300
changeset 145 51908b0cc3a1
parent 144 5b2b866ad0a3
child 146 0f2a918eb90a
pngtile.image: render map link
pngtile/image.py
static/pngtile/map.css
static/pngtile/map.js
--- 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'],
         )
--- 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;
+}
--- 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;