Move to mapbox-gl and beautify home page

network/base/views.py

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

network/settings.py

@@ -262,6 +262,7 @@ CSP_DEFAULT_SRC = (
 CSP_SCRIPT_SRC = (
     "'self'",
     'https://*.google-analytics.com',
+    "'unsafe-eval'",
 )
 CSP_IMG_SRC = (
     "'self'",
@@ -269,11 +270,16 @@ CSP_IMG_SRC = (
     'https://*.mapbox.com',
     'https://*.satnogs.org',
     'https://*.google-analytics.com',
+    'data:',
+    'blob:',
 )
 CSP_STYLE_SRC = (
     "'self'",
     "'unsafe-inline'",
 )
+CSP_CHILD_SRC = (
+    'blob:',
+)
 
 # Database
 DATABASE_URL = getenv('DATABASE_URL', 'sqlite:///db.sqlite3')

network/static/css/app.css

@@ -140,13 +140,13 @@ footer {
     position: absolute;
     top: 0;
     width: 100%;
-    height: 450px;
+    height: 100%;
 }
 
 #call2action {
-    margin-top: 240px;
-    height: 88px;
-    margin-bottom: 50px;
+    height: 80px;
+    margin-top: 70vh;
+	  margin-bottom: 10vh;
 }
 
 .img-gs-front {

network/static/js/home.js

@@ -1,4 +1,4 @@
-/*global L*/
+/*global mapboxgl*/
 
 $(document).ready(function() {
     'use strict';
@@ -9,36 +9,86 @@ $(document).ready(function() {
     $('.progress-bar-success').css('width', success_rate + '%');
     $('.progress-bar-danger').css('width', percentagerest + '%');
 
-    var mapboxid = $('div#map').data('mapboxid');
     var mapboxtoken = $('div#map').data('mapboxtoken');
     var stations = $('div#map').data('stations');
 
-    L.mapbox.accessToken = mapboxtoken;
-    L.mapbox.config.FORCE_HTTPS = true;
-    var map = L.mapbox.map('map', mapboxid, {
-        zoomControl: false
-    }).setView([40, 0], 3);
-    L.mapbox.featureLayer().addTo(map);
+    mapboxgl.accessToken = mapboxtoken;
 
-    $.ajax({
-        url: stations
-    }).done(function(data) {
-        data.forEach(function(m) {
-            L.mapbox.featureLayer({
-                type: 'Feature',
-                geometry: {
-                    type: 'Point',
-                    coordinates: [
-                        parseFloat(m.lng),
-                        parseFloat(m.lat)
-                    ]
-                },
-                properties: {
-                    title: m.name,
-                    'marker-size': 'large',
-                    'marker-color': '#666',
+    var map = new mapboxgl.Map({
+        container: 'map',
+        style: 'mapbox://styles/pierros/cj8kftshl4zll2slbelhkndwo',
+        zoom: 2,
+        minZoom: 2,
+        scrollZoom: false,
+        center: [10,29]
+    });
+
+    map.addControl(new mapboxgl.NavigationControl());
+
+    map.on('load', function () {
+
+        map.loadImage('/static/img/pin.png', function(error, image) {
+            map.addImage('pin', image);
+        });
+
+        var map_points = {
+            'id': 'points',
+            'type': 'symbol',
+            'source': {
+                'type': 'geojson',
+                'data': {
+                    'type': 'FeatureCollection',
+                    'features': []
                 }
-            }).addTo(map);
+            },
+            'layout': {
+                'icon-image': 'pin',
+                'icon-size': 0.4
+            }
+        };
+
+        $.ajax({
+            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>',
+                        'icon': 'circle'
+                    }
+                });
+            });
+
+            map.addLayer(map_points);
         });
     });
+
+    // Create a popup, but don't add it to the map yet.
+    var popup = new mapboxgl.Popup({
+        closeButton: false,
+        closeOnClick: false
+    });
+
+    map.on('mouseenter', '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('mouseleave', 'places', function() {
+        map.getCanvas().style.cursor = '';
+        popup.remove();
+    });
 });

network/static/js/station_view.js

@@ -1,4 +1,4 @@
-/* global L, URI */
+/* global mapboxgl, URI */
 
 $(document).ready(function() {
     'use strict';
@@ -24,31 +24,57 @@ $(document).ready(function() {
     }
 
     // Init the map
-    var mapboxid = $('div#map-station').data('mapboxid');
     var mapboxtoken = $('div#map-station').data('mapboxtoken');
 
-    L.mapbox.accessToken = mapboxtoken;
-    L.mapbox.config.FORCE_HTTPS = true;
-    var map = L.mapbox.map('map-station', mapboxid,{
-        zoomControl: false
-    }).setView([station_info.lat, station_info.lng], 6);
+    mapboxgl.accessToken = mapboxtoken;
 
-    // Add a marker
-    L.mapbox.featureLayer({
-        type: 'Feature',
-        geometry: {
-            type: 'Point',
-            coordinates: [
-                parseFloat(station_info.lng),
-                parseFloat(station_info.lat)
-            ]
-        },
-        properties: {
-            title: station_info.name,
-            'marker-size': 'large',
-            'marker-color': '#666',
-        }
-    }).addTo(map);
+    var map = new mapboxgl.Map({
+        container: 'map-station',
+        style: 'mapbox://styles/pierros/cj8kftshl4zll2slbelhkndwo',
+        zoom: 2,
+        minZoom: 2,
+        scrollZoom: false,
+        center: [parseFloat(station_info.lng),parseFloat(station_info.lat)]
+    });
+
+    map.addControl(new mapboxgl.NavigationControl());
+
+    map.on('load', function () {
+
+        map.loadImage('/static/img/pin.png', function(error, image) {
+            map.addImage('pin', image);
+        });
+
+        var map_points = {
+            'id': 'points',
+            'type': 'symbol',
+            'source': {
+                'type': 'geojson',
+                'data': {
+                    'type': 'FeatureCollection',
+                    'features': [{
+                        'type': 'Feature',
+                        'geometry': {
+                            'type': 'Point',
+                            'coordinates': [
+                                parseFloat(station_info.lng),
+                                parseFloat(station_info.lat)]
+                        },
+                        'properties': {
+                            'description': '<a href="/stations/' + station_info.id + '">' + station_info.id + ' - ' + station_info.name + '</a>',
+                            'icon': 'circle'
+                        }
+                    }]
+                }
+            },
+            'layout': {
+                'icon-image': 'pin',
+                'icon-size': 0.4
+            }
+        };
+
+        map.addLayer(map_points);
+    });
 
     // Filters
     $('#antenna-filter').submit(function () {

network/templates/base/home.html

@@ -6,7 +6,7 @@
 {% block title %} - Home{% endblock %}
 
 {% block css %}
-  <link rel="stylesheet" href="{% static 'lib/mapbox.js/mapbox.css' %}">
+  <link rel="stylesheet" href="{% static 'lib/mapbox-gl/dist/mapbox-gl.css' %}">
 {% endblock css %}
 
 {% block prenav-content %}
@@ -16,9 +16,9 @@
 {% block content %}
   <div class="row" id="call2action">
     {% if not request.user.is_authenticated %}
-      <div class="col-md-8 col-md-offset-2 panel panel-default">
+      <div class="col-md-6 col-md-offset-3 panel panel-default">
         <h3 class="text-center">
-          Ground stations swarm control, at your fingertips.
+          Crowd-sourced satellite operations
           <button type="button"
                   class="btn btn-primary btn-lg"
                   data-toggle="modal"
@@ -93,108 +93,115 @@
       </div>
     {% endif %}
     <div class="{% if featured_station %}col-md-8{% else %}col-md-12{% endif %}">
-      <ul class="nav nav-tabs" role="tablist">
-        <li class="active">
-          <a href="#latest" class="toggle" role="tab" data-toggle="tab">Latest Observations</a>
-        </li>
-        <li>
-          <a href="#scheduled" class="toggle" role="tab" data-toggle="tab">Scheduled Observations</a>
-        </li>
-      </ul>
-      <div class="tab-content">
-        <div class="tab-pane active" id="latest">
-          <table class="table table-hover">
-            <thead>
-              <th>ID</th>
-              <th>Satellite</th>
-              <th>Frequency</th>
-              <th>Encoding</th>
-              <th>Timeframe</th>
-              <th>Station</th>
-            </thead>
-            <tbody>
-              {% for observation in latest_observations.all %}
-                <tr>
-                  <td>
-                    <a href="{% url 'base:observation_view' id=observation.id %}">
-                      {% if observation.is_verified %}
-                        <span class="label label-success" title="There is known good data in this observation"
-                      {% elif observation.is_future %}
-                        <span class="label label-info" title="This observation is in the future"
-                      {% elif not observation.is_vetted %}
-                        <span class="label label-warning" title="There is data that needs vetting in this observation"
-                      {% else %}
-                        <span class="label label-danger" title="No good data in this observation"
-                      {% endif %}>
-                      {{ observation.id }}
-                      </span>
-                    </a>
-                  </td>
-                  <td>
-                    <a href="#" data-toggle="modal" data-target="#SatelliteModal" data-id="{{ observation.satellite.norad_cat_id }}">
-                      {{ observation.satellite.name }}
-                    </a>
-                  </td>
-                  <td>{{ observation.transmitter.downlink_low|frq }}</td>
-                  <td>{{ observation.transmitter.mode|default:"-" }}</td>
-                  <td>
-                    <span class="datetime-date">{{ observation.start|date:"Y-m-d" }}</span>
-                    <span class="datetime-time">{{ observation.start|date:"H:i:s" }}</span><br>
-                    <span class="datetime-date">{{ observation.end|date:"Y-m-d" }}</span>
-                    <span class="datetime-time">{{ observation.end|date:"H:i:s" }}</span>
-                  </td>
-                  <td>
-                    <a href="{% url 'base:station_view' id=observation.ground_station.id %}">
-                      {{ observation.ground_station }}
-                    </a>
-                  </td>
-                </tr>
-              {% endfor %}
-            </tbody>
-          </table>
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <h3 class="panel-title">Latest Activity</h3>
         </div>
-        <div class="tab-pane" id="scheduled">
-          <table class="table table-hover">
-            <thead>
-              <th>ID</th>
-              <th>Satellite</th>
-              <th>Frequency</th>
-              <th>Encoding</th>
-              <th>Timeframe</th>
-              <th>Stations</th>
-            </thead>
-            <tbody>
-              {% for observation in scheduled_observations.all %}
-                <tr>
-                  <td>
-                    <a href="{% url 'base:observation_view' id=observation.id %}">
-                      <span class="label label-info">
-                        {{ observation.id }}
-                      </span>
-                    </a>
-                  </td>
-                  <td>
-                    <a href="#" data-toggle="modal" data-target="#SatelliteModal" data-id="{{ observation.satellite.norad_cat_id }}">
-                      {{ observation.satellite.name }}
-                    </a>
-                  </td>
-                  <td>{{ observation.transmitter.downlink_low|frq }}</td>
-                  <td>{{ observation.transmitter.mode }}</td>
-                  <td>
-                    <span class="datetime-date">{{ observation.start|date:"Y-m-d" }}</span>
-                    <span class="datetime-time">{{ observation.start|date:"H:i:s" }}</span><br>
-                    <span class="datetime-date">{{ observation.end|date:"Y-m-d" }}</span>
-                    <span class="datetime-time">{{ observation.end|date:"H:i:s" }}</span>
-                  </td>
-                  <td>
-                    <a href="{% url 'base:station_view' id=observation.ground_station.id %}">
-                      <span class="label label-primary">{{ observation.ground_station.name }}</span>
-                    </a>
-                  </td>
-                </tr>
-              {% endfor %}
-            </tbody>
-          </table>
+        <div class="panel-body">
+          <ul class="nav nav-tabs" role="tablist">
+            <li class="active">
+              <a href="#latest" class="toggle" role="tab" data-toggle="tab">Latest Observations</a>
+            </li>
+            <li>
+              <a href="#scheduled" class="toggle" role="tab" data-toggle="tab">Scheduled Observations</a>
+            </li>
+          </ul>
+          <div class="tab-content">
+            <div class="tab-pane active" id="latest">
+              <table class="table table-hover">
+                <thead>
+                  <th>ID</th>
+                  <th>Satellite</th>
+                  <th>Frequency</th>
+                  <th>Encoding</th>
+                  <th>Timeframe</th>
+                  <th>Station</th>
+                </thead>
+                <tbody>
+                  {% for observation in latest_observations.all %}
+                    <tr>
+                      <td>
+                        <a href="{% url 'base:observation_view' id=observation.id %}">
+                          {% if observation.is_verified %}
+                            <span class="label label-success" title="There is known good data in this observation"
+                          {% elif observation.is_future %}
+                            <span class="label label-info" title="This observation is in the future"
+                          {% elif not observation.is_vetted %}
+                            <span class="label label-warning" title="There is data that needs vetting in this observation"
+                          {% else %}
+                            <span class="label label-danger" title="No good data in this observation"
+                          {% endif %}>
+                          {{ observation.id }}
+                          </span>
+                        </a>
+                      </td>
+                      <td>
+                        <a href="#" data-toggle="modal" data-target="#SatelliteModal" data-id="{{ observation.satellite.norad_cat_id }}">
+                          {{ observation.satellite.name }}
+                        </a>
+                      </td>
+                      <td>{{ observation.transmitter.downlink_low|frq }}</td>
+                      <td>{{ observation.transmitter.mode|default:"-" }}</td>
+                      <td>
+                        <span class="datetime-date">{{ observation.start|date:"Y-m-d" }}</span>
+                        <span class="datetime-time">{{ observation.start|date:"H:i:s" }}</span><br>
+                        <span class="datetime-date">{{ observation.end|date:"Y-m-d" }}</span>
+                        <span class="datetime-time">{{ observation.end|date:"H:i:s" }}</span>
+                      </td>
+                      <td>
+                        <a href="{% url 'base:station_view' id=observation.ground_station.id %}">
+                          {{ observation.ground_station }}
+                        </a>
+                      </td>
+                    </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
+            </div>
+            <div class="tab-pane" id="scheduled">
+              <table class="table table-hover">
+                <thead>
+                  <th>ID</th>
+                  <th>Satellite</th>
+                  <th>Frequency</th>
+                  <th>Encoding</th>
+                  <th>Timeframe</th>
+                  <th>Station</th>
+                </thead>
+                <tbody>
+                  {% for observation in scheduled_observations.all %}
+                    <tr>
+                      <td>
+                        <a href="{% url 'base:observation_view' id=observation.id %}">
+                          <span class="label label-info">
+                            {{ observation.id }}
+                          </span>
+                        </a>
+                      </td>
+                      <td>
+                        <a href="#" data-toggle="modal" data-target="#SatelliteModal" data-id="{{ observation.satellite.norad_cat_id }}">
+                          {{ observation.satellite.name }}
+                        </a>
+                      </td>
+                      <td>{{ observation.transmitter.downlink_low|frq }}</td>
+                      <td>{{ observation.transmitter.mode }}</td>
+                      <td>
+                        <span class="datetime-date">{{ observation.start|date:"Y-m-d" }}</span>
+                        <span class="datetime-time">{{ observation.start|date:"H:i:s" }}</span><br>
+                        <span class="datetime-date">{{ observation.end|date:"Y-m-d" }}</span>
+                        <span class="datetime-time">{{ observation.end|date:"H:i:s" }}</span>
+                      </td>
+                      <td>
+                        <a href="{% url 'base:station_view' id=observation.ground_station.id %}">
+                          {{ observation.ground_station }}
+                        </a>
+                      </td>
+                    </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -223,7 +230,8 @@
           <h3>Ground Stations</h3>
           Whether you own satellite ground station equipment or you want
           to build one you can head to
-          <a href="https://satnogs.org" target="_blank">SatNOGS Project site</a>
+          <a href="https://satnogs.org" target="_blank">SatNOGS Project site</a> or our
+          <a href="https://wiki.satnogs.org" target="_blank">wiki</a>
           to get up to date documentation and info on how to build a SatNOGS ground station (still under development).
           <h3>Coding</h3>
           Fluent in Python and/or JS? We need you to help with satnogs-network web application. Take a look to our
@@ -243,7 +251,7 @@
 {% endblock content %}
 
 {% block javascript %}
-  <script src="{% static 'lib/mapbox.js/mapbox.js' %}"></script>
+  <script src="{% static 'lib/mapbox-gl/dist/mapbox-gl.js' %}"></script>
   <script src="{% static 'js/home.js' %}"></script>
   <script src="{% static 'js/satellite.js' %}"></script>
 {% endblock %}

network/templates/base/station_view.html

@@ -6,7 +6,7 @@
 {% block title %} - Ground Station {{ station.name }}{% endblock %}
 
 {% block css %}
-  <link rel="stylesheet" href="{% static 'lib/mapbox.js/mapbox.css' %}">
+  <link rel="stylesheet" href="{% static 'lib/mapbox-gl/dist/mapbox-gl.css' %}">
 {% endblock css %}
 
 {% block content %}
@@ -382,7 +382,7 @@
 
 {% block javascript %}
   <script src="{% static 'lib/urijs/src/URI.min.js' %}"></script>
-  <script src="{% static 'lib/mapbox.js/mapbox.js' %}"></script>
+  <script src="{% static 'lib/mapbox-gl/dist/mapbox-gl.js' %}"></script>
   <script src="{% static 'js/station_view.js' %}"></script>
   <script src="{% static 'js/gridsquare.js' %}"></script>
   <script src="{% static 'js/satellite.js' %}"></script>

package.json

@@ -20,7 +20,7 @@
         "dnt-helper": "schalkneethling/dnt-helper",
         "eonasdan-bootstrap-datetimepicker": "^4.17.47",
         "jquery": "^3.2.1",
-        "mapbox.js": "^3.1.1",
+        "mapbox-gl": "^0.40.1",
         "moment": "^2.18.1",
         "urijs": "^1.18.12",
         "wavesurfer.js": "^1.4.0"
@@ -34,8 +34,8 @@
         "eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js",
         "d3/d3.min.js",
         "d3-timeline/src/d3-timeline.js",
-        "mapbox.js/mapbox.css",
-        "mapbox.js/mapbox.js",
+        "mapbox-gl/dist/mapbox-gl.css",
+        "mapbox-gl/dist/mapbox-gl.js",
         "moment/min/moment.min.js",
         "wavesurfer.js/dist/wavesurfer.min.js",
         "wavesurfer.js/dist/plugin/wavesurfer.spectrogram.min.js",

requirements/dev.txt

@@ -126,3 +126,7 @@ PyYAML==3.12 \
 pytest-forked==0.2 \
     --hash=sha256:e4500cd0509ec4a26535f7d4112a8cc0f17d3a41c29ffd4eab479d2a55b30805 \
     --hash=sha256:f275cb48a73fc61a6710726348e1da6d68a978f0ec0c54ece5a5fae5977e5a08
+email-validator==1.0.2 \
+    --hash=sha256:feec98c601524619e67b377f52ce331920f026d1b2e05bf5d6d0031ec844b600
+dnspython==1.15.0 \
+   --hash=sha256:861e6e58faa730f9845aaaa9c6c832851fbf89382ac52915a51f89c71accdd31