--- a/pngtile/image.py	Sun Sep 14 23:18:35 2014 +0300
+++ b/pngtile/image.py	Mon Sep 15 00:10:43 2014 +0300
@@ -18,13 +18,14 @@
         'https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css',
         'https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css',
         'http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css',
-        '/static/pngtile/image.css',
+        '/static/pngtile/map.css',
     )
 
     SCRIPTS = (
         'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',
         'https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js',
         'http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js',
+        '/static/pngtile/map.js',
     )
 
     def __init__ (self, **opts):
@@ -39,7 +40,7 @@
 
         image_info = image.info()
 
-        config = dict(
+        map_config = dict(
             tile_url        = 'http://zovoweix.qmsk.net:8080/{name}?x={x}&y={y}&zoom={z}',
             tile_name       = name,
 
@@ -58,38 +59,7 @@
                 ]),
             ),
             end         = (
-                html.script("""\
-                    $(function() {{
-                        var config = {config};
-
-                        var bounds = [
-                            [ 0, config.image_height ],
-                            [ -config.image_width, 0 ]
-                        ];
-                        var center = [
-                            -256, 512
-                        ];
-                        var zoom = config.tile_zoom;
-                        
-                        var map = L.map('map', {{
-                            crs: L.CRS.Simple,
-                            center: center,
-                            zoom: zoom,
-                            maxBounds: bounds
-                        }});
-
-                        L.tileLayer(config.tile_url, {{
-                            name: config.tile_name,
-                            minZoom: 0,
-                            maxZoom: config.tile_zoom,
-                            tileSize: config.tile_size,
-                            continuousWorld: true,
-                            noWrap: true,
-                            zoomReverse: true,
-                            bounds: bounds
-                        }}).addTo(map);
-                    }});
-                """.format(config=json.dumps(config))),
+                html.script("""$(function() {{ map_init({map_config}); }});""".format(map_config=json.dumps(map_config))),
             ),
         )
 

--- a/static/pngtile/image.css	Sun Sep 14 23:18:35 2014 +0300
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,9 +0,0 @@
-#map {
-    overflow: hidden;
-    position: absolute;
-
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/static/pngtile/map.css	Mon Sep 15 00:10:43 2014 +0300
@@ -0,0 +1,9 @@
+#map {
+    overflow: hidden;
+    position: absolute;
+
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/static/pngtile/map.js	Mon Sep 15 00:10:43 2014 +0300
@@ -0,0 +1,77 @@
+var map_config;
+var map;
+
+function map_init (_config) {
+    map_config = _config;
+
+    var bounds = L.latLngBounds(
+        L.latLng(-map_config.image_height, 0),
+        L.latLng(0, +map_config.image_width)
+    );
+    
+    map = L.map('map', {
+        crs: L              .CRS.Simple,
+        minZoom:            0,
+        maxZoom:            map_config.tile_zoom,
+        maxBounds:          bounds
+    });
+
+    map.on('move', map_move);
+
+    L.tileLayer(map_config.tile_url, {
+        name:               map_config.tile_name,
+        minZoom:            0,
+        maxZoom:            map_config.tile_zoom,
+        tileSize:           map_config.tile_size,
+        continuousWorld:    true,
+        noWrap:             true,
+        zoomReverse:        true,
+        bounds:             bounds
+    }).addTo(map);
+
+    // set position
+    var x = bounds.getCenter().lng;
+    var y = -bounds.getCenter().lat;
+    var z = 0;
+
+    if (document.location.hash) {
+        // parse x:y:z tuple
+        var pt = document.location.hash.substr(1).split(":");
+        
+        // unpack    
+        if (pt.length) x = parseInt(pt.shift()) || x;
+        if (pt.length) y = parseInt(pt.shift()) || y;
+        if (pt.length) z = parseInt(pt.shift()) || z;
+    }
+
+    map_center(x, y, z);
+}
+
+function map_move () {
+    var map_center = map.getCenter();
+    var map_zoom = map.getZoom();
+
+    var x = (+map_center.lng) << map_config.tile_zoom;
+    var y = (-map_center.lat) << map_config.tile_zoom;
+    var z = map_config.tile_zoom - map_zoom;
+
+    document.location.hash = x + ":" + y + ":" + z;
+}
+
+/*
+ * Position map based on pngtile coordinates
+ */
+function map_center (x, y, z) {
+    // translate to lat/lng
+    // leaflet seems to base its latlng coordinates on the max zoom level
+    var map_center = [
+        -(y >> map_config.tile_zoom),
+        +(x >> map_config.tile_zoom),
+    ];
+
+    // reversed zoom
+    var map_zoom = map_config.tile_zoom - z;
+    
+    map.setView(map_center, map_zoom);
+}
+