drawing map features and opening popups

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

@@ -13,9 +13,12 @@
     top:2px;
 }
 
-.leaflet-biggericon {
+.leaflet-editbar a {
     font-size: 14px;
 }
+.leaflet-editbar a.current {
+    background-color:#FFFFDD;
+}
 .leaflet-levels a {
     font-size:16px;
     color:#333333;

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

@@ -1,10 +1,12 @@
 {% extends 'control/base.html' %}
+{% load static %}
 {% block content %}
 <div id="mapeditor"></div>
 {% endblock %}
 
 {% block addbottom %}
 <script type="text/javascript">
+// Init Map
 var map = L.map('mapeditor', {
     center: [120, 200],
     zoom: 2,
@@ -12,8 +14,11 @@ var map = L.map('mapeditor', {
     maxZoom: 10,
     minZoom: 1,
     crs: L.CRS.Simple,
+    editable: true,
+    closePopupOnClick: false,
 });
 
+// Add Source Layers
 {% for pkg in map.pkgs.values %}
 L.control.layers([], {
     {% for source in pkg.sources %}
@@ -21,6 +26,7 @@ L.control.layers([], {
 }).addTo(map);
 {% endfor %}
 
+// Add Layer Control
 L.LevelControl = L.Control.extend({
     options: {
         position: 'bottomright'
@@ -37,48 +43,104 @@ L.LevelControl = L.Control.extend({
 });
 map.addControl(new L.LevelControl());
 
+// Default styles:
+feature_types = {
+    building: {
+        type: 'polygon',
+        color: '#000000',
+    },
+    room: {
+        type: 'polygon',
+        color: '#CCCCCC',
+    },
+    obstacle: {
+        type: 'polygon',
+        color: '#999999',
+    },
+    door: {
+        type: 'polygon',
+        color: '#FF00FF',
+    },
+    step: {
+        type: 'polyline',
+        color: '#FF0000',
+    },
+    elevator: {
+        type: 'polygon',
+        color: '#99CC00',
+    },
+}
+
+// Add drawing new features
+currently_drawing = null;
+currently_adding = null;
+function add_edit_button(map, container, type, icon, callback) {
+    $('<a href="#">').appendTo(container).text(icon).attr({
+        href: '#',
+        title: 'add '+name,
+        name: type
+    }).on('click', function(e) {
+        e.preventDefault();
+
+        // If we are currently adding a feature, don't start drawing another.
+        if (currently_adding !== null) {
+            return;
+        }
+
+        // If we are currently drawing a feature, don't start drawing another.
+        if (currently_drawing !== null) {
+            // If it is a feature of the same type, cancel it.
+            if (currently_drawing === type) {
+                $('.leaflet-editbar .current').removeClass('current');
+                currently_drawing = null;
+                map.editTools.stopDrawing();
+            }
+            return;
+        }
+
+        currently_drawing = type;
+        console.log(type);
+        $('.leaflet-editbar .current').removeClass('current');
+        $('.leaflet-editbar [name='+type+']').addClass('current');
+        options = feature_types[type];
+        if (options.type == 'polygon') {
+            map.editTools.startPolygon(null, options);
+        } else if (options.type == 'polyline') {
+            map.editTools.startPolyline(null, options);
+        }
+    });
+
+}
 L.DrawControl = L.Control.extend({
     options: {
         position: 'topleft'
     },
     onAdd: function (map) {
-        var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'), link;
-
-        link = L.DomUtil.create('a', 'leaflet-biggericon', container);
-        link.href = '{% url "control.editor" level=level %}';
-        link.title = 'add building'
-        link.innerHTML = '🏠';
-
-        link = L.DomUtil.create('a', 'leaflet-biggericon', container);
-        link.href = '{% url "control.editor" level=level %}';
-        link.title = 'add room/area';
-        link.innerHTML = '⬠';
-
-        link = L.DomUtil.create('a', 'leaflet-biggericon', container);
-        link.href = '{% url "control.editor" level=level %}';
-        link.title = 'add obstacle'
-        link.innerHTML = '⬟';
-
-        link = L.DomUtil.create('a', 'leaflet-biggericon', container);
-        link.href = '{% url "control.editor" level=level %}';
-        link.title = 'add door';
-        link.innerHTML = '🚪';
-
-        link = L.DomUtil.create('a', '', container);
-        link.href = '{% url "control.editor" level=level %}';
-        link.title = 'add steps';
-        link.innerHTML = '┌┘';
-
-        link = L.DomUtil.create('a', 'leaflet-biggericon', container);
-        link.href = '{% url "control.editor" level=level %}';
-        link.title = 'add elevator';
-        link.innerHTML = '▴▾';
-
+        var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-editbar');
+        add_edit_button(map, container, 'building', '🏠');
+        add_edit_button(map, container, 'room', '⬠');
+        add_edit_button(map, container, 'obstacle', '⬟');
+        add_edit_button(map, container, 'door', '🚪');
+        add_edit_button(map, container, 'step', '┌┘');
+        add_edit_button(map, container, 'elevator', '▴▾');
         return container;
     }
 });
 map.addControl(new L.DrawControl());
-
+map.on('editable:drawing:commit', function (e) {
+    currently_drawing = null;
+    currently_adding = e.layer;
+    $('.leaflet-editbar .current').removeClass('current');
+    e.layer.disableEdit();
+    e.layer.bindPopup('<img src="{% static "img/loader.gif" %}">', {
+        closeButton: false
+    }).openPopup();
+    console.log(e.layer.toGeoJSON());
+}).on('editable:drawing:cancel', function (e) {
+    if (currently_drawing === null && currently_adding === null) {
+        e.layer.remove();
+    }
+});
 
 L.control.scale({imperial: false}).addTo(map);