From 0f4e0f548f8a0099b43c2622a2b67a960d014424 Mon Sep 17 00:00:00 2001 From: Nikos Roussos Date: Sat, 28 Jan 2017 22:52:19 +0200 Subject: [PATCH] Add map for Satellite current position * minor UI adjustments on Satellite view --- bower.json | 3 +- db/base/views.py | 14 ++++++-- db/settings/base.py | 7 ++++ db/static/css/app.css | 45 ++++++++++++++++++++++++- db/static/img/satellite-marker.png | Bin 0 -> 2531 bytes db/static/js/map.js | 43 ++++++++++++++++++++++++ db/templates/base/satellite.html | 51 ++++++++++++++++------------- 7 files changed, 136 insertions(+), 27 deletions(-) create mode 100644 db/static/img/satellite-marker.png create mode 100644 db/static/js/map.js diff --git a/bower.json b/bower.json index 29aa860..1f4eb2d 100644 --- 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" } } diff --git a/db/base/views.py b/db/base/views.py index 4377e76..3e09113 100644 --- 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 diff --git a/db/settings/base.py b/db/settings/base.py index a028113..ff7c61a 100644 --- 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', '') diff --git a/db/static/css/app.css b/db/static/css/app.css index 698983b..a4b1ea6 100644 --- 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 ==================== */ diff --git a/db/static/img/satellite-marker.png b/db/static/img/satellite-marker.png new file mode 100644 index 0000000000000000000000000000000000000000..697846db9c6696cd2e1ec1d930abbdf2fc1831d5 GIT binary patch literal 2531 zcmV<92^{u`P)0Htk2LX{yQK|2)! zNtKy~9~m5e4c0OssPP95P5i@=D47A^3Bk_4jC;Bo*YkhhwgQVhydRsn4FJWzV`?24;tFN zmm4Glp9H*2Iyn!LnH*290(U3divV9?AWjvB)Q@4sn}L6lO3o*7BS(O1zz0Yr$CLk% zKElQ%<^vsMH*&lTyACrsemMf%99nON2{VCRxRVnFYVeU$TwE+gMMXCKSAmKU`!g(9 ziCbpvA2|mADJdzD^XJdYsZ*z9>eQ*W=dPnx&v9XPD%Z#~#nQ+rEiIJ`7cPj1$jOr@ zWx|9B#%Jfwoh$kI`2zfwF&@AlC72vY=23Iz%#n*1FN%oBv17-iprF7=&XOfdq_eYA zjvP56kw`>jPLU7%lyq|LOMd?dAoJ$UlS`K_iHOM2qerdeR903>S67#ah_tk{ z_`mybxZTPvrU0*yPEHFT^XJc(%a<>Uh{&Nsha@jA&q&VFrAzzCX=-ZHzi(%ZpPB!eAd40) zk}FrPh=|Dk{rj!KeEIU_($mu;A|iYC?8&q$t`4_LxyL?|v81!J(-ccmq^71uu3ft( zi9|wn?b_v%Q~et#3cXi3!alU=(%jr^?d+;mtNO{=v15m8(kZ~V!tPiu&({SKEEbcE8#h|@%FE09 z1AJ?1tGD{Kp-x?fjQfG*sPidX?l2oD_sLrfI#V>A1pzjLs)+)~`t|Gk$=R@BgH^Ah zqQVs5b4CuN-p**U==?x)?287S3Qeacz-Aus5|&PH-MUrc@wmidF==RMu#!_%Rb|Sg zb4m`tYd)h7TXY`Roco$V=T1W>f@(GMP(`tnXSQwICh>S&dV70i_3G7Da{T#_FIn`+ z$wy`8)7>Zt#@~E~4_kCvH3xrW(76d!IrQt5XRzJu*KcTOkVGOO(P&g^Yiq6KtX#RW zf63pyd$)<4BgxNxO%ATw{KjYeMT^dZnv-WOdar7FJ2TiW08V@QGiJD?Y0=_6~#2EvTayzuq!~UcIIh14krsp*20p9EAOA2l!HMsuRqW5LZ;NLM%$NidKFY0u|1rbz%KdQAMP7FeAs4M^L%iIpD2X z_yWLJwZ`tZ=$+N{Ov^pMrwtAs%+jZcs9eS$`-VzR7XyJktNTbbT7%D9^z`$s1W;zs zD*#Rz9Nm|VQ%T$dTx5V8P}`V3L;E&zDj6WhA4;6BK^LHkOa2B-uMSKmHS-qKS-A;s z1Kuz={5aW7H&Ddrg|97!wq42bq$L|C^lbUCMX%9dsKKIJfqCbC26$IC&N=$*mjk3u zE1NvvYV0oU!5C_PrDG!SS55Z~;5JLU%TNiZ?pO?US!%Ycg9hXQPa4`jK=8=%OD|CE zYVc|8;gc4$ns3GK=_m}aCQ5_u&Io=iIMuKZt{di7m(!ovFA9teBZ_4ByPifTIu9`%GcM7Inn~sZ>ri(24*E2)r}v=KHWeOcpvJfzP`sB zEI|N^aC<$=M2;s;Ig)90*lf|goz#oup8Os~U?vo!rqU0Sjt_+(P)V*HA6?1uBx8;= zne^JuH3ses>L|mU^K@WO0c@CpT2bGJISF;aLk3?2xQzNi!JMx6C1X;159ybl{)M?< z59(Jjy|*F2&v4(c<^mDY7ldrc@#G_!41Lb<&^govO%sYxMKY7I7^8O=9+mR!{&oNgu(ol%6 zZtRn@sQs1=w-fw6nV>eDFQAT*>VP?9zfW_;u#n^7O{CV0{PX%f8J?|S;KG!P#84aJ z3k+`eZ$csIn{1mr#UM{Yih=Wn2Co9!9Gw%sJ9CWI1wl%)&g~ z1oevetqyIJpz2C5l9{Yr5(L3H(vZpVa5HKXYcld0D)_n9-l`gifyExZseLE zFy}})BgaENsyJ`^HU5bDdmclGylE`aJm2h002ovPDHLkV1m}K(SZN} literal 0 HcmV?d00001 diff --git a/db/static/js/map.js b/db/static/js/map.js new file mode 100644 index 0000000..754eff8 --- /dev/null +++ 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); +}); diff --git a/db/templates/base/satellite.html b/db/templates/base/satellite.html index 13f986c..d3edbaf 100644 --- a/db/templates/base/satellite.html +++ b/db/templates/base/satellite.html @@ -7,7 +7,8 @@ {% block css %} -{% endblock %} + +{% endblock css %} {% block top %}{% endblock %} @@ -18,19 +19,23 @@
-
+
{{ satellite }}
+ {% if satellite.names %} + + {% endif %}
-
-
- {{ satellite.names }} -
+
{{ satellite.name }}
+
+
+
@@ -42,28 +47,26 @@
- Transmitters -
-
-
-
+ Transmitters {{ satellite.transmitters.count }} {% if suggestions %} -
+
{{ suggestions.count }} suggestion{{ suggestions.count|pluralize }} pending
{% endif %} -
- -
-
+
+ +
+
+
+
{% for transmitter in satellite.transmitters.all %} -
+

@@ -183,7 +186,7 @@

- {% if forloop.counter|divisibleby:2 %} + {% if forloop.counter|divisibleby:3 %}
{% if not loop.last %}
@@ -202,7 +205,7 @@
{% for suggestion in suggestions %} -
+

@@ -380,5 +383,7 @@ + + {% endblock %}