Merge pull request #92 from Xpirix/fix_homepage_map

Enhance map functionality with improved bounds and tile layer handling

Author: Xpirix

django_project/certification/templates/certifying_organisation/detail.html

@@ -32,12 +32,35 @@ <h1>Certifying Organisation (all)</h1>
 
                 // Add map
                 $('#map').css({'height': 400, 'width': "100%"});
-                map = Leaflet.map('map').setView([lat, long], 4);
-                Leaflet.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
-                    attribution:  '&copy; <a href="http://www.openstreetmap.org/copyright">'+
-                                    'OpenStreetMap</a>, Tiles courtesy of '+
-                                    '<a href="http://hot.openstreetmap.org/" target="_blank">'+
-                                    'Humanitarian OpenStreetMap Team</a>'
+
+
+                const worldBounds = Leaflet.latLngBounds(
+                    Leaflet.latLng(-90, -180),  // south-west
+                    Leaflet.latLng(90, 180)     // north-east
+                );
+
+                map = Leaflet.map('map', {
+                    maxBounds: worldBounds,
+                    maxBoundsViscosity: 1.0,  // 1.0 = hard lock, won't pan outside at all
+                    minZoom: 2,
+                }).setView([lat, long], 4);
+                const RefererTileLayer = Leaflet.TileLayer.extend({
+                createTile(coords, done) {
+                    const tile = document.createElement('img');
+                    tile.referrerPolicy = 'origin';
+                    tile.onload = () => done(null, tile);
+                    tile.onerror = (e) => done(e, tile);
+                    tile.src = this.getTileUrl(coords);
+                    return tile;
+                }
+                });
+
+                new RefererTileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
+                attribution:  '&copy; <a href="http://www.openstreetmap.org/copyright">'+
+                                'OpenStreetMap</a>, Tiles courtesy of '+
+                                '<a href="http://hot.openstreetmap.org/" target="_blank">'+
+                                'Humanitarian OpenStreetMap Team</a>',
+                opacity: 0.75,
                 }).addTo(map);
 
                 addMarkers();

django_project/certification/templates/certifying_organisation/includes/world-map.html

@@ -1,4 +1,5 @@
 {% block js_head %}
+
 <script>
   var map;
   var geojson;
@@ -8,9 +9,37 @@
 
   $(document).ready(function () {
     $('#map').css('height', 700);
-    map = Leaflet.map('map').setView([20, 0], 2);
-    Leaflet.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+    $('#map').css('background', '#002033');
+
+    const worldBounds = Leaflet.latLngBounds(
+      Leaflet.latLng(-90, -180),  // south-west
+      Leaflet.latLng(90, 180)     // north-east
+    );
+
+    map = Leaflet.map('map', {
+      maxBounds: worldBounds,
+      maxBoundsViscosity: 1.0,  // 1.0 = hard lock, won't pan outside at all
+      minZoom: 2,
+    }).setView([20, 0], 2);
+
+    const RefererTileLayer = Leaflet.TileLayer.extend({
+      createTile(coords, done) {
+        const tile = document.createElement('img');
+        tile.referrerPolicy = 'origin';
+        tile.onload = () => done(null, tile);
+        tile.onerror = (e) => done(e, tile);
+        tile.src = this.getTileUrl(coords);
+        return tile;
+      }
+    });
+
+    new RefererTileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
+      attribution:  '&copy; <a href="http://www.openstreetmap.org/copyright">'+
+                      'OpenStreetMap</a>, Tiles courtesy of '+
+                      '<a href="http://hot.openstreetmap.org/" target="_blank">'+
+                      'Humanitarian OpenStreetMap Team</a>',
+      opacity: 0.75,
+      className: 'basemap-tiles',
     }).addTo(map);
 
     add_layers_to_map();
@@ -125,9 +154,9 @@
     return {
       fillColor: get_color(feature.properties.organisation_count),
       weight: 1,
-      opacity: 1,
-      color: '#D3D3D3',
-      fillOpacity: 0.7
+      opacity: .5,
+      color: '#002033',
+      fillOpacity: 0.75
     };
   }
 
@@ -144,10 +173,10 @@
         var feature = e.target;
 
         feature.setStyle({
-          weight: 1.5,
+          weight: 3,
           color: '#ee7913',
           dashArray: '',
-          fillOpacity: 0.7
+          fillOpacity: 0.9
         });
 
         if (!Leaflet.Browser.ie && !Leaflet.Browser.opera) {
@@ -180,4 +209,9 @@
     </div>
   </div>
 </div>
-{% endblock %}
+<style>
+  .basemap-tiles {
+    filter: grayscale(100%) brightness(80%);
+  }
+</style>
+{% endblock %}