Add Mapbox settings to env

.env-dist

@@ -10,3 +10,7 @@ ALLOWED_HOSTS=
 
 # Database
 DATABASE_URL=sqlite:///db.sqlite3
+
+# Mapbox
+MAPBOX_TOKEN=
+MAPBOX_MAP_ID=

network/base/views.py

@@ -1,6 +1,7 @@
 import ephem
 from datetime import datetime, timedelta
 
+from django.conf import settings
 from django.contrib import messages
 from django.views.decorators.http import require_POST
 from django.shortcuts import get_object_or_404, render, redirect
@@ -22,7 +23,9 @@ def index(request):
     ctx = {
         'latest_observations': observations.filter(end__lt=now()),
         'scheduled_observations': observations.filter(end__gte=now()),
-        'featured_station': featured_station
+        'featured_station': featured_station,
+        'mapbox_id': settings.MAPBOX_MAP_ID,
+        'mapbox_token': settings.MAPBOX_TOKEN
     }
 
     return render(request, 'base/home.html', ctx)
@@ -146,7 +149,9 @@ def station_view(request, id):
     antennas = Antenna.objects.all()
 
     return render(request, 'base/station_view.html',
-                  {'station': station, 'form': form, 'antennas': antennas})
+                  {'station': station, 'form': form, 'antennas': antennas,
+                   'mapbox_id': settings.MAPBOX_MAP_ID,
+                   'mapbox_token': settings.MAPBOX_TOKEN})
 
 
 @require_POST

network/settings/base.py

@@ -161,3 +161,8 @@ DATABASES = {'default': dj_database_url.parse(DATABASE_URL)}
 REST_FRAMEWORK = {
     'DEFAULT_FILTER_BACKENDS': ('rest_framework.filters.DjangoFilterBackend',)
 }
+
+# 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', '')

network/static/js/home.js

@@ -1,9 +1,16 @@
-L.mapbox.accessToken = 'pk.eyJ1IjoicGllcnJvcyIsImEiOiJhTVZyWmE4In0.kl2j9fi24LDXfB3MNdN76w';
-var map = L.mapbox.map('map', 'pierros.jbf6la1j',{
-    zoomControl: false
-}).setView([40, 0], 3);
-
 $(document).ready(function() {
+    'use strict';
+
+    var mapboxid = $('div#map').data('mapboxid');
+    var mapboxtoken = $('div#map').data('mapboxtoken');
+
+    L.mapbox.accessToken = mapboxtoken;
+    L.mapbox.config.FORCE_HTTPS = true;
+    var map = L.mapbox.map('map', mapboxid, {
+        zoomControl: false
+    }).setView([40, 0], 3);
+    var LocLayer = L.mapbox.featureLayer().addTo(map);
+
     $('#successful a.toggle').click(function (e) {
         e.preventDefault()
         $(this).tab('show')

network/static/js/station_view.js

@@ -3,8 +3,14 @@ $(document).ready(function() {
     var station_info = $('#station-info').data();
 
     // Init the map
-    L.mapbox.accessToken = 'pk.eyJ1IjoicGllcnJvcyIsImEiOiJhTVZyWmE4In0.kl2j9fi24LDXfB3MNdN76w';
-    var map = L.mapbox.map('map-station', 'pierros.jbf6la1j',{
+    'use strict';
+
+    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);
 

network/templates/base/home.html

@@ -10,7 +10,7 @@
 {% endblock css %}
 
 {% block prenav-content %}
-  <div id="map"></div>
+  <div id="map" data-mapboxid="{{ mapbox_id }}" data-mapboxtoken="{{ mapbox_token }}"></div>
 {% endblock prenav-content %}
 
 {% block content %}

network/templates/base/station_view.html

@@ -83,7 +83,7 @@
 
   <div class="row">
     <div class="col-md-12">
-      <div id="map-station"></div>
+      <div id="map-station" data-mapboxid="{{ mapbox_id }}" data-mapboxtoken="{{ mapbox_token }}"></div>
     </div>
   </div>