Add online and testing icons on map

network/base/views.py

@@ -29,7 +29,7 @@ from network.base.tasks import update_all_tle, fetch_data
 class StationSerializer(serializers.ModelSerializer):
     class Meta:
         model = Station
-        fields = ('name', 'lat', 'lng', 'id')
+        fields = ('name', 'lat', 'lng', 'id', 'status')
 
 
 class StationAllView(viewsets.ReadOnlyModelViewSet):

network/static/js/map.js

@@ -30,12 +30,16 @@ $(document).ready(function() {
 
     map.on('load', function () {
 
-        map.loadImage('/static/img/pin.png', function(error, image) {
-            map.addImage('pin', image);
+        map.loadImage('/static/img/online.png', function(error, image) {
+            map.addImage('online', image);
         });
 
-        var map_points = {
-            'id': 'points',
+        map.loadImage('/static/img/testing.png', function(error, image) {
+            map.addImage('testing', image);
+        });
+
+        var online_points = {
+            'id': 'online-points',
             'type': 'symbol',
             'source': {
                 'type': 'geojson',
@@ -45,8 +49,25 @@ $(document).ready(function() {
                 }
             },
             'layout': {
-                'icon-image': 'pin',
-                'icon-size': 0.4,
+                'icon-image': 'online',
+                'icon-size': 0.3,
+                'icon-allow-overlap': true
+            }
+        };
+
+        var testing_points = {
+            'id': 'testing-points',
+            'type': 'symbol',
+            'source': {
+                'type': 'geojson',
+                'data': {
+                    'type': 'FeatureCollection',
+                    'features': []
+                }
+            },
+            'layout': {
+                'icon-image': 'testing',
+                'icon-size': 0.3,
                 'icon-allow-overlap': true
             }
         };
@@ -55,21 +76,37 @@ $(document).ready(function() {
             url: stations
         }).done(function(data) {
             data.forEach(function(m) {
-                map_points.source.data.features.push({
-                    'type': 'Feature',
-                    'geometry': {
-                        'type': 'Point',
-                        'coordinates': [
-                            parseFloat(m.lng),
-                            parseFloat(m.lat)]
-                    },
-                    'properties': {
-                        'description': '<a href="/stations/' + m.id + '">' + m.id + ' - ' + m.name + '</a>',
-                    }
-                });
+                if (m.status == 1){
+                    testing_points.source.data.features.push({
+                        'type': 'Feature',
+                        'geometry': {
+                            'type': 'Point',
+                            'coordinates': [
+                                parseFloat(m.lng),
+                                parseFloat(m.lat)]
+                        },
+                        'properties': {
+                            'description': '<a href="/stations/' + m.id + '">' + m.id + ' - ' + m.name + '</a>',
+                        }
+                    });
+                } else if (m.status == 2) {
+                    online_points.source.data.features.push({
+                        'type': 'Feature',
+                        'geometry': {
+                            'type': 'Point',
+                            'coordinates': [
+                                parseFloat(m.lng),
+                                parseFloat(m.lat)]
+                        },
+                        'properties': {
+                            'description': '<a href="/stations/' + m.id + '">' + m.id + ' - ' + m.name + '</a>',
+                        }
+                    });
+                }
             });
 
-            map.addLayer(map_points);
+            map.addLayer(online_points);
+            map.addLayer(testing_points);
             map.repaint = false;
 
         });
@@ -81,7 +118,18 @@ $(document).ready(function() {
         closeOnClick: true
     });
 
-    map.on('mouseenter', 'points', function(e) {
+    map.on('mouseenter', 'online-points', function(e) {
+        // Change the cursor style as a UI indicator.
+        map.getCanvas().style.cursor = 'pointer';
+
+        // Populate the popup and set its coordinates
+        // based on the feature found.
+        popup.setLngLat(e.features[0].geometry.coordinates)
+            .setHTML(e.features[0].properties.description)
+            .addTo(map);
+    });
+
+    map.on('mouseenter','testing-points', function(e) {
         // Change the cursor style as a UI indicator.
         map.getCanvas().style.cursor = 'pointer';