--- a/qmsk/pngtile/pngtile.py	Sat Oct 04 15:53:57 2014 +0300
+++ b/qmsk/pngtile/pngtile.py	Sat Oct 04 15:54:06 2014 +0300
@@ -15,6 +15,9 @@
 import os.path
 
 class Store (PNGTileStore):
+    TILE_SIZE = 256
+    TILE_ZOOM = 4
+
     def __init__ (self, title, tileserver, **opts):
         super(Store, self).__init__(**opts)
         
@@ -89,7 +92,7 @@
             if type:
                 yield item, item_name
 
-    def tiles_url (self, name, **query):
+    def tiles_url (self, name=None, **query):
         """
             Return a tileserver URL.
         """

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/qmsk/pngtile/templates/qmsk.pngtile/image.html	Sat Oct 04 15:54:06 2014 +0300
@@ -0,0 +1,23 @@
+{% extends "qmsk.pngtile/view.html" %}
+{% load staticfiles %}
+
+{% block head %}
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
+    <link rel="stylesheet" href="{% static "qmsk.pngtile/map.css" %}">
+{% endblock %}
+
+{% block content %}
+    <div id="map">
+
+    </div>
+{% endblock %}
+
+{% block body %}
+    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+    <script src="{% static "qmsk.pngtile/map.js" %}"></script>
+    <script>
+        $(function () {
+            map_init({{map_config|safe}});
+        });
+    </script>
+{% endblock %}

--- a/qmsk/pngtile/templates/qmsk.pngtile/index.html	Sat Oct 04 15:53:57 2014 +0300
+++ b/qmsk/pngtile/templates/qmsk.pngtile/index.html	Sat Oct 04 15:54:06 2014 +0300
@@ -1,39 +1,4 @@
-{% extends "site.html" %}
-
-{% block title %}{{ site_name }} :: {{ name }}{% endblock %}
-
-{% block header %}
-    <h1 class="page-header-title">
-        <a href="{% url 'index' '' %}">{{ title }}</a>
-    </h1>
-{% endblock %}
-
-{% block breadcrumb %}
-    <ol class="breadcrumb">
-    {% for name, title in breadcrumb %}
-        <li><a href="{% url 'index' name %}">{{ title }}</a></li>
-    {% endfor %}
-    </ol>
-{% endblock %}
-
-{% block nav %}
-{% for tree_items, tree_item in index_tree %}
-    {% if not forloop.first %}
-    <hr />
-    {% endif %}
-    <ul class="nav">
-    {% for item, item_name in tree_items %}
-        <li
-        {% if item == tree_item %}
-            class="active"
-        {% endif %}
-        >
-            <a href="{% url 'index' item_name %}">{{item}}</a>
-        </li>
-    {% endfor %}
-    </ul>
-{% endfor %}
-{% endblock %}
+{% extends "qmsk.pngtile/view.html" %}
 
 {% block content %}
 {% for item, item_name in index_items %}
@@ -43,7 +8,3 @@
 {% endfor %}
 {% endblock %}
 
-{% block footer %}
-
-{% endblock %}
-

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/qmsk/pngtile/templates/qmsk.pngtile/view.html	Sat Oct 04 15:54:06 2014 +0300
@@ -0,0 +1,41 @@
+{% extends "site.html" %}
+
+{% block title %}{{ site_name }} :: {{ name }}{% endblock %}
+
+{% block header %}
+    <h1 class="page-header-title">
+        <a href="{% url 'index' '' %}">{{ title }}</a>
+    </h1>
+{% endblock %}
+
+{% block breadcrumb %}
+    <ol class="breadcrumb">
+    {% for name, title in breadcrumb %}
+        <li><a href="{% url 'index' name %}">{{ title }}</a></li>
+    {% endfor %}
+    </ol>
+{% endblock %}
+
+{% block nav %}
+{% for tree_items, tree_item in tree %}
+    {% if not forloop.first %}
+    <hr />
+    {% endif %}
+    <ul class="nav">
+    {% for item, item_name in tree_items %}
+        <li
+        {% if item == tree_item %}
+            class="active"
+        {% endif %}
+        >
+            <a href="{% url 'index' item_name %}">{{item}}</a>
+        </li>
+    {% endfor %}
+    </ul>
+{% endfor %}
+{% endblock %}
+
+{% block footer %}
+
+{% endblock %}
+

--- a/qmsk/pngtile/views.py	Sat Oct 04 15:53:57 2014 +0300
+++ b/qmsk/pngtile/views.py	Sat Oct 04 15:54:06 2014 +0300
@@ -5,6 +5,9 @@
 
 import pypngtile
 
+import json
+import os.path
+
 def index (request, name):
     store = pngtile.STORE
 
@@ -27,9 +30,48 @@
         name        = name,
         title       = store.title(name),
         breadcrumb  = store.breadcrumb(name),
-        index_tree  = tree,
+        tree        = tree,
         index_items = sorted(items),
     ))
 
 def image (request, name):
-    pass
+    store = pngtile.STORE
+
+    try:
+        image, name = store.open(name)
+        tree  = store.tree(os.path.dirname(name))
+    except pngtile.NotFound:
+        raise http.Http404
+    except pngtile.InvalidImage:
+        return http.HttpResponseBadRequest(name)
+    except pngtile.UncachedImage:
+        return http.HttpResponseBadRequest(name)
+    except pngtile.Error as error:
+        return http.HttpResponseServerError(str(error))
+    except pypngtile.Error as error:
+        return http.HttpResponseServerError(str(error))
+
+    image_info = image.info()
+
+    map_config = dict(
+        tiles_url       = store.tiles_url(name),
+        tiles_mtime     = 0,
+
+        tile_url        = '{tiles_url}?t={tiles_mtime}&x={x}&y={y}&zoom={z}',
+        tile_size       = store.TILE_SIZE,
+        tile_zoom       = store.TILE_ZOOM,
+
+        image_url       = '{tiles_url}?w={w}&h={h}&x={x}&y={y}&zoom={z}',
+        image_width     = image_info['img_width'],
+        image_height    = image_info['img_height'],
+    )
+    
+    return render(request, 'qmsk.pngtile/image.html', dict(
+        site_name   = u"...",
+        name        = name,
+        title       = store.title(name),
+        breadcrumb  = store.breadcrumb(name),
+        tree        = tree,
+        map_config  = json.dumps(map_config),
+    ))
+