Add map for Satellite current position

* minor UI adjustments on Satellite view
2017-01-28 22:52:19 +02:00 · 2017-01-28 22:52:19 +02:00 · 0f4e0f548f
parent f65d3a3b30
commit 0f4e0f548f
7 changed files with 136 additions and 27 deletions
--- a/bower.json
+++ b/bower.json
@ -12,6 +12,7 @@
    "d3": "3.5.x",
    "chart.js": "^2.4.0",
    "moment": "2.10.6",
-    "bootstrap-daterangepicker": "2.1.x"
+    "bootstrap-daterangepicker": "2.1.x",
+    "mapbox.js": "2.2.x"
  }
 }
--- a/db/base/views.py
+++ b/db/base/views.py
@ -1,4 +1,5 @@
 import logging
+import requests

 from django.shortcuts import render, redirect, get_object_or_404
 from django.contrib.auth.models import User
@ -52,9 +53,18 @@ def satellite(request, norad):
    suggestions = Suggestion.objects.filter(satellite=satellite)
    modes = Mode.objects.all()

+    url = '{0}{1}'.format(settings.SATELLITE_POSITION_ENDPOINT, norad)
+
+    try:
+        sat_position = requests.get(url).json()
+    except:
+        sat_position = ''
+
    return render(request, 'base/satellite.html', {'satellite': satellite,
-                                                   'suggestions': suggestions,
-                                                   'modes': modes})
+                                                   'suggestions': suggestions, 'modes': modes,
+                                                   'sat_position': sat_position,
+                                                   'mapbox_id': settings.MAPBOX_MAP_ID,
+                                                   'mapbox_token': settings.MAPBOX_TOKEN})


@login_required
--- a/db/settings/base.py
+++ b/db/settings/base.py
@ -195,3 +195,10 @@ DATABASES = {'default': dj_database_url.parse(DATABASE_URL)}
 # NETWORK API
 NETWORK_API_ENDPOINT = getenv('NETWORK_API_ENDPOINT', 'https://network.satnogs.org/api/')
 DATA_FETCH_DAYS = getenv('DATA_FETCH_DAYS', 10)
+SATELLITE_POSITION_ENDPOINT = getenv('SATELLITE_POSITION_ENDPOINT',
+                                     'https://network.satnogs.org/satellite_position/')
+
+# Mapbox API
+MAPBOX_GEOCODE_URL = 'https://api.tiles.mapbox.com/v4/geocode/mapbox.places/'
+MAPBOX_MAP_ID = getenv('MAPBOX_MAP_ID', '')
+MAPBOX_TOKEN = getenv('MAPBOX_TOKEN', '')
--- a/db/static/css/app.css
+++ b/db/static/css/app.css
@ -165,6 +165,39 @@ a.satellite-item:hover {
 .satellite-title {
    font-weight: bold;
    font-size: 1.2em;
+    display: inline-block;
+    min-height: 30px;
+    padding-top: 5px;
+}
+
+.satellite-title .badge {
+    margin-top: -3px;
+}
+
+.satellite-names {
+    font-size: 1.1em;
+    margin-bottom: 10px;
+    font-weight: normal;
+    float: right;
+    margin-top: 5px;
+}
+
+#map {
+    width: 100%;
+    height: 250px;
+    border-radius: 5px;
+}
+
+.leaflet-left {
+    display: none;
+}
+
+.mapbox-improve-map {
+    display: none;
+}
+
+.satellite-suggest {
+    display: inline-block;
 }

 .satellite-img {
@ -176,7 +209,7 @@ a.satellite-item:hover {

 .satellite-img-full {
    width: 100%;
-    max-width: 300px;
+    max-height: 250px;
    border-radius: 5px;
 }

@ -256,6 +289,16 @@ footer {
    color: #ffff00;
 }

+@media screen and (max-width:768px) {
+    #map {
+        margin-top: 10px;
+    }
+
+    .satellite-img-full {
+        max-width: 300px;
+    }
+}
+

 /* Statistics page
 ==================== */
--- a/db/static/img/satellite-marker.png
+++ b/db/static/img/satellite-marker.png
--- a/db/static/js/map.js
+++ b/db/static/js/map.js
@ -0,0 +1,43 @@
+$(document).ready(function() {
+    'use strict';
+
+    var mapboxid = $('div#map').data('mapboxid');
+    var mapboxtoken = $('div#map').data('mapboxtoken');
+    var lat = $('.satellite-title').data('position-lat');
+    var lon = $('.satellite-title').data('position-lon');
+
+    L.mapbox.accessToken = mapboxtoken;
+    L.mapbox.config.FORCE_HTTPS = true;
+    var map = L.mapbox.map('map', mapboxid, {
+        zoomControl: false
+    }).setView([lat, lon], 3);
+
+    var myLayer = L.mapbox.featureLayer().addTo(map);
+
+    var geojson = {
+        type: 'FeatureCollection',
+        features: [{
+            "type": "Feature",
+            "geometry": {
+                "type": "Point",
+                "coordinates": [lon, lat]
+            },
+            "properties": {
+                "icon": {
+                    "iconUrl": "/static/img/satellite-marker.png",
+                    "iconSize": [32, 32],
+                    "iconAnchor": [16, 16],
+                }
+            }
+        }]
+    };
+
+    myLayer.on('layeradd', function(e) {
+        var marker = e.layer,
+            feature = marker.feature;
+
+        marker.setIcon(L.icon(feature.properties.icon));
+    });
+
+    myLayer.setGeoJSON(geojson);
+});
--- a/db/templates/base/satellite.html
+++ b/db/templates/base/satellite.html
@ -7,7 +7,8 @@

 {% block css %}
  <link rel="stylesheet" href="{% static 'lib/bootstrap-daterangepicker/daterangepicker.css' %}">
-{% endblock %}
+  <link rel="stylesheet" href="{% static 'lib/mapbox.js/mapbox.css' %}">
+{% endblock css %}

 {% block top %}{% endblock %}

@ -18,19 +19,23 @@
    <div class="col-md-12 satellite-panels">
      <div class="panel panel-default panel-satellite">
        <div class="panel-heading">
-          <div class="satellite-title">
+          <div class="satellite-title" data-position-lat="{{ sat_position.lat }}"
+               data-position-lon="{{ sat_position.lon }}">
            {{ satellite }}
          </div>
+          {% if satellite.names %}
+            <div class="satellite-names hidden-xs">{{ satellite.names }}</div>
+          {% endif %}
        </div>
        <div class="row panel-body">
-          <div class="col-md-3 panel-satellite">
-            <div>
-              {{ satellite.names }}
-            </div>
+          <div class="col-sm-3">
            <div>
              <img src="{{ satellite.get_image }}" alt="{{ satellite.name }}" class="satellite-img-full">
            </div>
          </div>
+          <div class="col-sm-9">
+            <div id="map" data-mapboxid="{{ mapbox_id }}" data-mapboxtoken="{{ mapbox_token }}"></div>
+          </div>
        </div>
      </div>
    </div>
@ -42,28 +47,26 @@
      <div class="panel panel-default panel-satellite">
        <div class="panel-heading">
          <div class="satellite-title">
-            Transmitters
-          </div>
-        </div>
-        <div class="row panel-body">
-          <div class="col-md-3 panel-satellite">
+            Transmitters <span class="badge">{{ satellite.transmitters.count }}</span>
            {% if suggestions %}
-              <div class="suggestions-counter label label-primary">
+              <div class="suggestions-counter label label-default">
                {{ suggestions.count }} suggestion{{ suggestions.count|pluralize }} pending
              </div>
            {% endif %}
-            <div>
-              <button type="button"
-                      class="btn btn-primary"
-                      data-toggle="modal" data-target="#NewSuggestionModal">
-                Suggest New Transmitter
-              </button>
-            </div>
          </div>
-          <div class="col-md-9">
+          <div class="satellite-suggest pull-right">
+            <button type="button"
+                    class="btn btn-primary btn-sm"
+                    data-toggle="modal" data-target="#NewSuggestionModal">
+              <span class="glyphicon glyphicon-plus" title="Suggest edits"></span> Suggest New Transmitter
+            </button>
+          </div>
+        </div>
+        <div class="row panel-body">
+          <div class="col-md-12">
            <div class="row">
              {% for transmitter in satellite.transmitters.all %}
-                <div class="col-md-6">
+                <div class="col-md-4">
                  <div class="panel {% if transmitter.alive %}panel-primary{% else %}panel-danger{% endif %} panel-transmitter">
                    <div class="panel-heading">
                      <h3 class="panel-title">
@ -183,7 +186,7 @@
                    </div>
                  </div>
                </div>
-                {% if forloop.counter|divisibleby:2 %}
+                {% if forloop.counter|divisibleby:3 %}
                  </div>
                   {% if not loop.last %}
                     <div class="row">
@ -202,7 +205,7 @@
              <hr>
              <div class="row">
                {% for suggestion in suggestions %}
-                  <div class="col-md-6">
+                  <div class="col-md-4">
                    <div class="panel panel-{% if suggestion.transmitter %}info{% else %}warning{% endif %} panel-transmitter">
                      <div class="panel-heading">
                        <h3 class="panel-title">
@ -380,5 +383,7 @@
  <script src="{% static 'lib/d3/d3.min.js' %}"></script>
  <script src="{% static 'lib/moment/moment.js' %}"></script>
  <script src="{% static 'lib/bootstrap-daterangepicker/daterangepicker.js' %}"></script>
+  <script src="{% static 'lib/mapbox.js/mapbox.js' %}"></script>
  <script src="{% static 'js/app.backbone.js' %}"></script>
+  <script src="{% static 'js/map.js' %}"></script>
 {% endblock %}