Merge branch 'base-layer-tiles'

ckanext/spatial/public/css/common_map.css

@@ -0,0 +1,9 @@
+.leaflet-control-no-provider {
+  background-color: white;
+  margin-right: 10px;
+  padding: 10px;
+  border: 1px solid #b1b1b1;
+}
+.leaflet-control-attribution {
+  font-size: 11px;
+}

ckanext/spatial/public/css/spatial_query.css

@@ -5,10 +5,6 @@
 .module-content #dataset-map-container {
   height: 250px;
 }
-#dataset-map-attribution {
-  font-size: 11px;
-  line-height: 1.5;
-}
 .module-heading .action {
   float: right;
   color: #888888;

ckanext/spatial/public/js/common_map.js

@@ -36,7 +36,7 @@
                 });
 
       var baseLayer;
-      
+
       map = new L.Map(container, leafletMapOptions);
 
       if (mapConfig.type == 'mapbox') {
@@ -46,16 +46,14 @@
                   'See http://www.mapbox.com/developers/api-overview/ for details';
           }
 
-          baseLayerUrl = '//{s}.tiles.mapbox.com/v4/' + mapConfig['mapbox.map_id'] + '/{z}/{x}/{y}.png?access_token=' + mapConfig['mapbox.access_token'];
-          leafletBaseLayerOptions.handle = mapConfig['mapbox.map_id'];
-          leafletBaseLayerOptions.subdomains = mapConfig.subdomains || 'abcd';
-          leafletBaseLayerOptions.attribution = mapConfig.attribution || 'Data: <a href="http://osm.org/copyright" target="_blank">OpenStreetMap</a>, Design: <a href="http://mapbox.com/about/maps" target="_blank">MapBox</a>';
-
-          baseLayer = new L.TileLayer(baseLayerUrl, leafletBaseLayerOptions);
+          baseLayer = L.tileLayer.provider('MapBox', {
+                id: mapConfig['mapbox.map_id'],
+                accessToken: mapConfig['mapbox.access_token']
+          });
 
       } else if (mapConfig.type == 'custom') {
           // Custom XYZ layer
-          baseLayerUrl = mapConfig['custom.url'];
+          baseLayerUrl = mapConfig['custom_url'] || mapConfig['custom.url'];
           if (mapConfig.subdomains) leafletBaseLayerOptions.subdomains = mapConfig.subdomains;
           if (mapConfig.tms) leafletBaseLayerOptions.tms = mapConfig.tms;
           leafletBaseLayerOptions.attribution = mapConfig.attribution;
@@ -73,19 +71,39 @@
               wmsOptions['crs'] = mapConfig['wms.srs'] || mapConfig['wms.crs'];
           }
           wmsOptions['version'] = mapConfig['wms.version'] || '1.1.1';
-          
+
           baseLayer = new L.TileLayer.WMS(baseLayerUrl, wmsOptions);
 
-      } else {
-          // Default to Stamen base map
-          baseLayerUrl = 'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png';
-          leafletBaseLayerOptions.subdomains = mapConfig.subdomains || 'abcd';
-          leafletBaseLayerOptions.attribution = mapConfig.attribution || 'Map tiles by <a href="http://stamen.com">Stamen Design</a> (<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>). Data by <a href="http://openstreetmap.org">OpenStreetMap</a> (<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>)';
 
-          baseLayer = new L.TileLayer(baseLayerUrl, leafletBaseLayerOptions);
+      } else if (mapConfig.type) {
+
+        baseLayer = L.tileLayer.provider(mapConfig.type, mapConfig)
+
+      } else {
+        let c = L.Control.extend({
+
+          onAdd: (map) => {
+            let element = document.createElement("div");
+            element.className = "leaflet-control-no-provider";
+            element.innerHTML = 'No map provider set. Please check the <a href="https://docs.ckan.org/projects/ckanext-spatial/en/latest/map-widgets.html">documentation</a>';
+            return element;
+          },
+          onRemove: (map) => {}
+        })
+        map.addControl(new c({position: "bottomleft"}))
+
       }
 
-      map.addLayer(baseLayer);
+      if (baseLayer) {
+        let attribution = L.control.attribution({"prefix": false});
+        attribution.addTo(map)
+
+        map.addLayer(baseLayer);
+
+        if (mapConfig.attribution) {
+          attribution.addAttribution(mapConfig.attribution);
+        }
+      }
 
       return map;
 

ckanext/spatial/public/webassets.yml

@@ -6,6 +6,7 @@ dataset_map_js:
       - base/main
   contents:
     - js/vendor/leaflet/1.9.3/leaflet.js
+    - js/vendor/leaflet-providers.js
     - js/common_map.js
     - js/dataset_map.js
 
@@ -14,6 +15,7 @@ dataset_map_css:
   output: ckanext-spatial/%(version)s_dataset_map.css
   contents:
     - js/vendor/leaflet/1.9.3/leaflet.css
+    - css/common_map.css
     - css/dataset_map.css
 
 spatial_query_js:
@@ -25,6 +27,7 @@ spatial_query_js:
   contents:
     - js/vendor/leaflet/1.9.3/leaflet.js
     - js/vendor/leaflet.draw/0.4.14/leaflet.draw.js
+    - js/vendor/leaflet-providers.js
     - js/common_map.js
     - js/spatial_query.js
 
@@ -34,4 +37,5 @@ spatial_query_css:
   contents:
     - js/vendor/leaflet/1.9.3/leaflet.css
     - js/vendor/leaflet.draw/0.4.14/leaflet.draw.css
+    - css/common_map.css
     - css/spatial_query.css

ckanext/spatial/templates/spatial/snippets/dataset_map_base.html

@@ -13,9 +13,6 @@ extent
 {% set map_config = h.get_common_map_config() %}
 <div class="dataset-map" data-module="dataset-map" data-extent="{{ extent }}" data-module-site_url="{{ h.dump_json(h.url_for('/', locale='default', qualified=true)) }}" data-module-map_config="{{ h.dump_json(map_config) }}">
   <div id="dataset-map-container"></div>
-  <div id="dataset-map-attribution">
-      {% snippet "spatial/snippets/map_attribution.html", map_config=map_config %}
-  </div>
 </div>
 
 {% set type = 'asset' if h.ckan_version().split('.')[1] | int >= 9 else 'resource' %}

ckanext/spatial/templates/spatial/snippets/spatial_query.html

@@ -22,9 +22,6 @@ e.g.
     <div class="dataset-map" data-module="spatial-query" data-default_extent="{{ default_extent }}" data-module-map_config="{{ h.dump_json(map_config) }}">
         <div id="dataset-map-container"></div>
     </div>
-    <div id="dataset-map-attribution">
-        {% snippet "spatial/snippets/map_attribution.html", map_config=map_config %}
-    </div>
 </section>
 
 {% set type = 'asset' if h.ckan_version().split('.')[1] | int >= 9 else 'resource' %}

doc/map-widgets.rst

@@ -6,48 +6,49 @@ widgets (at least the ones based on `Leaflet`_) can use a common function to
 create the map. The base layer that the map will use can be configured via
 configuration options.
 
+.. image:: _static/base-map-stamen.png
+
 Configuring the base layer
 --------------------------
 
+The map widgets use the `Leaflet-providers`_ library to make easy to choose the
+base tile layer that the map widgets will use. You can use any of the supported
+providers, which are listed in the `preview page`_.
+
+.. note:: As of October 2023, most if not all of the tile providers require at
+   least some form of registration and / or domain registering. They also have
+   terms of use and will most likely require proper attribution (which should be
+   handled automatically for you when choosing a provider).
+
+If you haven't configured a map provider you will see the following notice in the
+map widgets:
+
+.. image:: _static/no-map-provider.png
+
 The main configuration option to manage the base layer used is
-``ckanext.spatial.common_map.type``. Depending on the map type additional
-options may be required. The spatial extension provides default settings for
-popular tiles providers based on `OpenStreetMap`_, but you can use any tileset
-that follows the `XYZ convention`_.
+``ckanext.spatial.common_map.type``. The value of this setting should be one of the
+provider names supported by Leaflet-providers, e.g. ``Stadia.StamenTerrain``, ``Stadia``,
+``MapBox``, ``Herev3.terrainDay``, ``Esri.WorldImagery``, ``USGS.USImagery`` etc. Note
+that these values are **case-sensitive**.
+
+Any additional configuration options required by Leaflet-providers should be set prefixed
+with ``ckanext.spatial.common_map.``, for instance to configure the Stamen Terrain map that
+was used in previous versions of ckanext-spatial::
+
+    # Stadia / Stamen Terrain
+    ckanext.spatial.common_map.type = Stadia.StamenTerrain
+    ckanext.spatial.common_map.apikey = <your_api_key>
+
+To use MapBox tiles::
+    
+    # MapBox
+    ckanext.spatial.common_map.type = MapBox
+    ckanext.spatial.common_map.mapbox.id = <your_map_id>
+    ckanext.spatial.common_map.mapbox.accessToken = <your_access_token>
 
 
-.. note:: All tile providers have Terms of Use and will most likely require
-    proper attribution. Make sure to read and understand the terms and add
-    the relevant attribution before using them on your CKAN instance.
-
-Stamen Terrain
-++++++++++++++
-
-The Terrain tiles are provided by `Stamen`_, and are based on data by
-OpenStreetMap. This is the default base layer used by the map widgets, and you
-don't need to add any configuration option to use them. If you want to define
-it explicitly though, use the following setting::
-
-    ckanext.spatial.common_map.type = stamen
-
-.. image:: _static/base-map-stamen.png
-
-MapBox
-++++++
-
-`MapBox`_ allows to define your custom maps based on OpenStreetMap data, using
-their online editor or the more advanced `MapBox Studio`_ desktop tool. You will
-need to provide a map id with the ``[account].[handle]`` form and and access token
-(Check `here`_ for more details)::
-
-    ckanext.spatial.common_map.type = mapbox
-    ckanext.spatial.common_map.mapbox.map_id = youraccount.map-xxxxxxxx
-    ckanext.spatial.common_map.mapbox.access_token = pk.ey...
-
-.. image:: _static/base-map-mapbox.png
-
-Custom
-++++++
+Custom layers
++++++++++++++
 
 You can use any tileset that follows the `XYZ convention`_ using the ``custom``
 type::
@@ -55,28 +56,29 @@ type::
     ckanext.spatial.common_map.type = custom
 
 You will need to define the tileset URL using
-``ckanext.spatial.common_map.custom.url``. This follows the `Leaflet URL
+``ckanext.spatial.common_map.custom_url``. This follows the `Leaflet URL
 template`_ format (ie {s} for subdomains if any, {z} for zoom and {x} {y} for
 tile coordinates). Additionally you can use
 ``ckanext.spatial.common_map.subdomains`` and
-``ckanext.spatial.common_map.attribution`` if needed (these two will also work
-for Stamen and MapBox layers if you want to tweak the defaults.
+``ckanext.spatial.common_map.attribution`` if needed (this one will also work
+for Leaflet-provider layers if you want to tweak the default attribution).
 
-This is a complete example that uses `Stamen`_'s famous `watercolor maps`_::
+For example::
 
-    ckanext.spatial.common_map.type = custom
-    ckanext.spatial.common_map.custom.url = http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg
-    ckanext.spatial.common_map.attribution = Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.
+  ckanext.spatial.common_map.type = custom
+  ckanext.spatial.common_map.custom_url = https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}
+  ckanext.spatial.common_map.attribution = Tiles courtesy of the <a href="https://usgs.gov/">U.S. Geological Survey</a>
 
-This is a example using TMS::
+Old Stamen tiles
+++++++++++++++++
 
-    ckanext.spatial.common_map.type = custom
-    ckanext.spatial.common_map.custom.url = /url/to/your/tms/{z}/{x}/{y}.png
-    ckanext.spatial.common_map.tms = true
+Previous versions of ckanext-spatial defaulted to using the `Stamen`_ terrain tiles as they
+not require registration. These were deprecated and stopped working on October 2023. If you see
+this error displayed in your map widgets, you need to configure an alternative provider using the
+methods described in the sections above:
+
+.. image:: _static/stamen-map-provider-error.png
 
-.. note:: For custom base layers you need to manually modify the attribution
-    link on the templates for widgets on the sidebar, like the spatial query
-    and dataset map widgets.
 
 
 For developers
@@ -101,9 +103,6 @@ attribute (see for instance the ``dataset_map_base.html`` and
   <div class="dataset-map" data-module="spatial-query" ... data-module-map_config="{{ h.dump_json(map_config) }}">
     <div id="dataset-map-container"></div>
   </div>
-  <div id="dataset-map-attribution">
-    {% snippet "spatial/snippets/map_attribution.html", map_config=map_config %}
-  </div>
 
 Once at the Javascript module level, all Leaflet based map widgets should use
 the ``ckan.commonLeafletMap`` constructor to initialize the map. It accepts the
@@ -132,4 +131,5 @@ And this for a primary content map::
 .. _here: http://www.mapbox.com/developers/api-overview/
 .. _`Leaflet URL template`: http://leafletjs.com/reference.html#url-template
 .. _Stamen: http://maps.stamen.com/
-.. _`watercolor maps`: http://maps.stamen.com/watercolor/
+.. _`Leaflet-providers`: https://github.com/leaflet-extras/leaflet-providers
+.. _`preview page`: http://leaflet-extras.github.io/leaflet-providers/preview/index.html