add level control to map editor

src/c3nav/control/static/control/control.css

@@ -12,3 +12,12 @@
     margin: 2px 0 0;
     top:2px;
 }
+
+.leaflet-levels a {
+    font-size:16px;
+    color:#333333;
+}
+.leaflet-levels a.current {
+    font-weight:bold;
+    color:#000000;
+}

src/c3nav/control/templates/control/editor.html

@@ -21,6 +21,27 @@ L.control.layers([], {
     "{{ source.name }}": L.imageOverlay('{% url 'map.source' filename=source.filename %}', {{ source.jsbounds }}),{% endfor %}
 }).addTo(map);
 {% endfor %}
+
+L.LevelControl = L.Control.extend({
+
+    options: {
+        position: 'bottomright'
+    },
+
+    onAdd: function (map) {
+        var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-levels'), link;
+        {% for level in map.levels reversed %}
+        link = L.DomUtil.create('a', '{% if current_level == level %}current{% endif %}', container);
+        link.href = '{% url "control.editor" level=level %}';
+        link.innerHTML = '{{ level }}';
+        {% endfor %}
+        return container;
+    }
+
+});
+map.addControl(new L.LevelControl());
+
+
 L.control.scale({imperial: false}).addTo(map);
 
 </script>

src/c3nav/control/views.py

@@ -17,5 +17,6 @@ def editor(request, level=None):
     if level not in mapmanager.levels:
         raise Http404('Level does not exist')
     return render(request, 'control/editor.html', {
-        'map': mapmanager
+        'map': mapmanager,
+        'current_level': level,
     })