improve antenna map

services/admin.py

@@ -470,7 +470,11 @@ class AntennaAdmin(admin.ModelAdmin):
     def get_urls(self):
         my_urls = [
             url(r'^map/$', self.admin_site.admin_view(self.map_view, cacheable=True), name='antenna-map'),
-            url(r'^map/data.json$', self.admin_site.admin_view(GeoJSONLayerView.as_view(model=Antenna, geometry_field='position')), name='antenna-map-data'),
+            url(r'^map/data.json$', self.admin_site.admin_view(GeoJSONLayerView.as_view(
+                                        model=Antenna,
+                                        geometry_field='position',
+                                        properties=('label', 'mode', 'ssid', 'orientation',),
+                                    )), name='antenna-map-data'),
         ]
         return my_urls + super().get_urls()
 

services/templates/services/antenna_map.html

@@ -25,7 +25,38 @@
 
 <script type="text/javascript">
 function init_map (map, options) {
-    var layer = L.geoJson().addTo(map);
+    var colors = {
+        0: 'grey',
+        1: 'red',
+        2: 'blue'
+    };
+    var layer = L.geoJson(false, {
+        pointToLayer: function(feature, latlng) {
+            console.log(feature);
+            return L.circleMarker(latlng, {
+                radius: 8,
+                color: colors[feature.properties.mode],
+                weight: 1,
+                opacity: 1,
+                fillOpacity: 0.8
+            });
+        },
+        onEachFeature: function(feature, layer) {
+            var content = '';
+            if (feature.properties.label) {
+                content += '<b>Label :</b> ' + feature.properties.label + '<br>';
+            }
+            if (feature.properties.ssid) {
+                content += '<b>SSID :</b> ' + feature.properties.ssid + '<br>';
+            }
+            if (feature.properties.orientation) {
+                content += '<b>Orientation :</b> ' + feature.properties.orientation + '<br>';
+            }
+            if (content) {
+                layer.bindPopup(content);
+            }
+        }
+    }).addTo(map);
     $.getJSON("{{ json_url }}", function (data) {
         layer.addData(data);
     });