Add measure tool, Terrain map.

chasemapper/config.py

@@ -22,6 +22,7 @@ default_config = {
     'default_lon': 138.6,
 
     'payload_max_age': 180,
+    'thunderforest_api_key': 'none',
 
     # Predictor settings
     'pred_enabled': False,  # Enable running and display of predicted flight paths.
@@ -48,6 +49,7 @@ def parse_config_file(filename):
 	chase_config['default_lat'] = config.get('map', 'default_lat')
 	chase_config['default_lon'] = config.get('map', 'default_lon')
 	chase_config['payload_max_age'] = config.getint('map', 'payload_max_age')
+	chase_config['thunderforest_api_key'] = config.get('map', 'thunderforest_api_key')
 
 
 	# GPSD Settings

horusmapper.cfg.example

@@ -65,6 +65,13 @@ default_lon = 138.6
 # How long to keep payload data (minutes)
 payload_max_age = 180
 
+# ThunderForest API Key
+# If you want to use ThunderForest's Outdoors map (Topographic maps), you will need to
+# register for an API key here: https://manage.thunderforest.com/users/sign_up?plan_id=5
+# Once you have a key, enter it below:
+thunderforest_api_key = none
+
+
 # Predictor Settings
 # Use of the predictor requires installing the CUSF Predictor Python Wrapper from here:
 # https://github.com/darksidelemm/cusf_predictor_wrapper

static/css/Leaflet.PolylineMeasure.css

@@ -0,0 +1,49 @@
+.leaflet-control {
+    cursor: pointer;
+}
+
+a.polyline-measure-controlOnBgColor, a.polyline-measure-controlOnBgColor:hover {
+    background-color: #8f8;
+}
+
+.polyline-measure-unicode-icon {
+    font-size: 19px;
+    font-weight: bold;
+}
+
+a.polyline-measure-clearControl:active {
+    background-color: #f88;
+}
+
+.polyline-measure-tooltip {
+    font: 10px Arial, Helvetica, sans-serif;
+    line-height: 10px;
+    background-color: rgba(255, 255, 170, 0.7);
+    border-radius: 3px;
+    box-shadow: 1px 1px 4px #888;
+    margin: 0;
+    padding: 2px;
+    width: auto !important;
+    height: auto !important;
+    white-space: nowrap;
+    text-align: right;
+}
+
+.polyline-measure-tooltip-end {
+    background-color: rgba(255, 255, 40, 0.7);
+}
+
+.polyline-measure-tooltip-total {
+    color: #006;
+    font-weight: bold;
+}
+
+.polyline-measure-tooltip-difference {
+    color: #060;
+    font-style: italic;
+}
+
+.polyline-measure-popupTooltip {
+    font: 11px Arial, Helvetica, sans-serif;
+    line-height: 11px;
+}

templates/index.html

@@ -7,6 +7,7 @@
     <link href="{{ url_for('static', filename='css/leaflet.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/leaflet-sidebar.min.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/leaflet-control-topcenter.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/Leaflet.PolylineMeasure.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/easy-button.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/tabulator_simple.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
@@ -23,6 +24,7 @@
     <script src="{{ url_for('static', filename='js/leaflet-control-topcenter.js') }}"></script>
     <script src="{{ url_for('static', filename='js/leaflet-sidebar.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/Leaflet.Control.Custom.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/Leaflet.PolylineMeasure.js') }}"></script>
     <script src="{{ url_for('static', filename='js/easy-button.js') }}"></script>
 
     <script src="{{ url_for('static', filename='js/tabulator.min.js') }}"></script>
@@ -213,11 +215,30 @@
 
             var map_layers = {'OSM':osm_map, 'ESRI Satellite':esri_sat_map};
 
+            // Add ThunderForest layers, if we have a key provided.
+            if (chase_config.thunderforest_api_key !== 'none'){
+                // Thunderforest Outdoors layer.
+                var thunerforest_outdoors = L.tileLayer('https://tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey='+chase_config.thunderforest_api_key, 
+                {
+                    attribution: '&copy; <a href="http://www.thunderforest.com">Thunderforest</a>, Data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a> <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                }).addTo(map);
+                map_layers['Outdoors (Terrain)'] = thunerforest_outdoors;
+
+            }
+
             // Add Offline map layers, if we have any.
             for (var i = 0, len = chase_config.offline_tile_layers.length; i < len; i++) {
                 var _layer_name = chase_config.offline_tile_layers[i];
                 map_layers['Offline - ' + _layer_name] = L.tileLayer(location.protocol + '//' + document.domain + ':' + location.port + '/tiles/'+_layer_name+'/{z}/{x}/{y}.png');
             }
+            // Add measurement control.
+            L.control.polylineMeasure({
+                position: 'topleft',
+                unit: 'metres',
+                showClearControl: true,
+            }).addTo(map);
+            
+
             // Add layer selection control (top right).
             map.addControl(new L.Control.Layers(map_layers));