map: Make map bounds optional, and cleanup code

No map bounds are defined by default, which means that the map displays
all points.  Map bounds can be defined in `celutz/local_settings.py` to
limit the view.

This improves c7206c47c1adbe1a8b9978e6d2e4a15aa6d4f241.

INSTALL.md

@@ -49,6 +49,7 @@ There are also celutz-specific settings:
 - `LOGIN_REQUIRED`: is celutz public or are users required to login first?
 - `PANORAMA_TILES_DIR`: where the tiles are, relatively to `MEDIA_ROOT` and `MEDIA_URL`
 - `PANORAMA_MAX_DISTANCE`: maximum distance (in meters) after which reference points are considered to be too far away
+- `MAP_BOUNDS`: if defined, limit the view of the main map to the given rectangle.  By default, the view is fitted to display all points.  See `celutz/settings.py` for an example.
 
 Then run the migrations:
 

celutz/settings.py

@@ -130,11 +130,14 @@ PANORAMA_TILES_DIR = "tiles"
 # (in meters)
 PANORAMA_MAX_DISTANCE = 50000
 
-# Max and min latitudes and longitudes for the default main map view
-MAP_MIN_LAT = 45.17
-MAP_MAX_LAT = 45.20
-MAP_MIN_LONG = 5.68
-MAP_MAX_LONG = 5.77
+# Map bounds (in degrees) for the main view.
+# If not defined, all points are used to fit the view.
+#MAP_BOUNDS = {
+#  "min_lat": 45.17,
+#  "max_lat": 45.20,
+#  "min_lon": 5.68,
+#  "max_lon": 5.77,
+#}
 
 # Celery configuration
 BROKER_URL = 'django://'

panorama/templates/panorama/main.html

@@ -168,7 +168,19 @@
                 }); 
             });
         }
- 
+
+        function isInMapBounds(item, index, array) {
+            {% get_setting 'MAP_BOUNDS' as bounds %}
+            {% if bounds %}
+            return (item[0] > {{ bounds.min_lat }})
+                && (item[0] < {{ bounds.max_lat }})
+                && (item[1] > {{ bounds.min_lon }})
+                && (item[1] < {{ bounds.max_lon }});
+            {% else %}
+            return true;
+            {% endif %}
+        }
+
         function initmap() {
             // set up the map
             map = new L.Map('map');
@@ -212,10 +224,10 @@
                 popup.on('mouseover', marker.openPopup);
                 popup.on('mouseout', marker.closePopup);
                 markerClusters.addLayer( marker );
-                if ( {{ pano.latitude }} > {% get_setting 'MAP_MIN_LAT' %} && {{ pano.latitude }} < {% get_setting 'MAP_MAX_LAT' %} && {{ pano.longitude }} > {% get_setting 'MAP_MIN_LONG' %} && {{ pano.longitude }} < {% get_setting 'MAP_MAX_LONG' %} ) {
-                    allMarkers.push([{{ pano.latitude }}, {{ pano.longitude }}]);
-                }
+                allMarkers.push([{{ pano.latitude }}, {{ pano.longitude }}]);
             {% endfor %}
+            // Filter to only take points inside the bounds (for fitting the view)
+            fittingMarkers = allMarkers.filter(isInMapBounds);
             map.addLayer( markerClusters );
             // Add POI
             var pointsOfInterest = L.layerGroup();
@@ -237,7 +249,7 @@
                 return div;
             };
             map.addLayer(pointsOfInterest);
-            map.fitBounds(allMarkers,{padding: [30, 30]});
+            map.fitBounds(fittingMarkers,{padding: [30, 30]});
             legend.addTo(map);