Replace CARTO basemaps with OpenFreeMap vector tiles

README.md

@@ -7,6 +7,7 @@
 A [Galette](https://galette.eu) plugin to geolocalize members.
 
 Map display uses [Leaflet project](https://leafletjs.com/) while search is provided by [Nominatim](https://nominatim.openstreetmap.org/) API.
+Background tiles are the [OpenFreeMap](https://openfreemap.org/) vector tiles, rendered with [MapLibre GL](https://maplibre.org/): no API key, no registration, and the whole thing can be self-hosted.
 
 * website: https://galette.eu - https://doc.galette.eu/en/master/plugins/maps.html
 * bugs and features: http://bugs.galette.eu/projects/galette-plugin-maps
@@ -25,6 +26,7 @@ To use Galette Maps plugin, you'll need a reliable Galette version, and of cours
 Un plugin [Galette](https://galette.eu) pour gérer paiments de cotisation et de dons via Maps.
 
 Les cartes sont affichées par le biais du [projet Leaflet](https://leafletjs.com/) tandis que la recherche est assurée par l'API [Nominatim](https://nominatim.openstreetmap.org/).
+Le fond de carte provient des tuiles vectorielles [OpenFreeMap](https://openfreemap.org/), rendues par [MapLibre GL](https://maplibre.org/) : sans clé d'API, sans inscription, et auto-hébergeable.
 
 * site web : https://galette.eu - https://doc.galette.eu/fr/master/plugins/maps.html
 * bogues et fonctionnalités : http://bugs.galette.eu/projects/galette-plugin-maps

README.tiles.md

@@ -0,0 +1,145 @@
+# Quick fix — "API KEY REQUIRED" tiles
+
+## Symptom
+
+Every map in the plugin shows the **"API KEY REQUIRED —
+carto.com/basemaps/apikey"** watermark across the tiles.
+
+## Cause
+
+The background map comes from CARTO (`basemaps.cartocdn.com`), which now
+requires an API key for its basemaps.
+
+## Fix
+
+A single file to edit:
+
+```
+galette/plugins/plugin-maps/templates/default/common_scripts.html.twig
+```
+
+### The diff
+
+```diff
+--- a/templates/default/common_scripts.html.twig
++++ b/templates/default/common_scripts.html.twig
+@@ -132,9 +132,9 @@
+         }).addTo(map);
+ {% endif %}
+
+-        L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+-            maxZoom: 18,
+-            attribution: '{{ _T("Map data (c)", "maps")|e("js") }} <a href="http://openstreetmap.org">{{ _T("OpenStreetMap contributors", "maps")|e("js") }}</a>, {{ _T("Imagery (c)", "maps")|e("js") }} <a href="https://cartodb.com/attributions">CartoDB</a>'
++        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
++            maxZoom: 19,
++            attribution: '{{ _T("Map data (c)", "maps")|e("js") }} <a href="https://openstreetmap.org">{{ _T("OpenStreetMap contributors", "maps")|e("js") }}</a>'
+         }).addTo(map);
+
+         try {
+```
+
+Copy the diff above into a file (`tiles-quickfix.diff` for example) at plugin top directory, and apply it from there with:
+
+```
+patch -p1 < tiles-quickfix.diff
+```
+
+### Clearing the Twig cache — mandatory
+
+**Without this step, the change has no effect**: Galette serves compiled
+templates and does not notice that a `.twig` file has changed.
+
+Back at Galette top directory:
+
+```
+rm -rf galette/data/cache/*/templates/
+```
+
+The directory usually belongs to the web server user (`www-data`, `apache`), so
+the command has to be run as `root` or through `sudo`. It is rebuilt on its own
+on the next visit; neither a restart nor a reload of the web server is needed.
+
+## Other possible background maps
+
+Every URL below has been tested and answers without an API key. The
+`attribution` block is **mandatory**: keeping it is not a formality, it is the
+condition of the data licence.
+
+### OpenStreetMap — the standard rendering
+
+The one used in the fix above. The simplest, the best known. It renders in
+colour, where CARTO `light_all` was light grey: the Galette markers stand out
+slightly less.
+
+```js
+L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>'
+}).addTo(map);
+```
+
+Worth knowing: the OSMF usage policy does cover low traffic sites — which an
+association's Galette instance is — but explicitly asks *not* to hardcode the
+tile URL in distributed software. Which is exactly the trap CARTO has just
+sprung on us.
+
+### OpenStreetMap France
+
+Servers of the OSM-FR association, French rendering, one more zoom level.
+
+```js
+L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
+    maxZoom: 20,
+    subdomains: 'abc',
+    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> — OSM-FR tiles'
+}).addTo(map);
+```
+
+### Humanitarian OSM Team
+
+Same host as OSM-FR, more contrasted style, roads and facilities are very
+readable.
+
+```js
+L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
+    maxZoom: 20,
+    subdomains: 'abc',
+    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> — <a href="https://www.hotosm.org/">HOT</a> tiles'
+}).addTo(map);
+```
+
+### OpenStreetMap.de
+
+German rendering, local names favoured. Beware, it stops at zoom 18: beyond
+that the server answers a 404 (checked).
+
+```js
+L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {
+    maxZoom: 18,
+    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>'
+}).addTo(map);
+```
+
+### Esri World Light Gray Base
+
+Visually the closest to what the plugin used to display: very light grey, almost
+without colour, the markers stand out perfectly. Note the unusual `{z}/{y}/{x}`
+order, and the JPEG format.
+
+```js
+L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
+    maxZoom: 16,
+    attribution: 'Tiles &copy; Esri — Esri, DeLorme, NAVTEQ'
+}).addTo(map);
+```
+
+One reservation: this is a commercial vendor's courtesy service, with no
+availability commitment. Nothing guarantees it will not do tomorrow what CARTO
+has just done.
+
+### Staying on CARTO
+
+That is possible, but it now means opening an account on
+<https://carto.com/basemaps> and adding the key to the URL. The exact form of
+the URL with a key is given by their interface — we do not reproduce it here, it
+is specific to each account.

gulpfile.js

@@ -37,6 +37,19 @@ const main_scripts = [
   './node_modules/leaflet-legend/leaflet-legend.js'
 ];
 
+const gl_styles = [
+  './node_modules/maplibre-gl/dist/maplibre-gl.css'
+];
+
+// maplibre-gl is pinned to 5.x on purpose: 6.x dropped the UMD build and ships
+// ES modules only, which cannot be concatenated into a classic script. The 5.x
+// dist is already minified and uses syntax uglify-js cannot parse, so this
+// bundle is concatenated as is, never piped through uglify.
+const gl_scripts = [
+  './node_modules/maplibre-gl/dist/maplibre-gl.js',
+  './node_modules/@maplibre/maplibre-gl-leaflet/leaflet-maplibre-gl.js'
+];
+
 const main_assets = [
   {
     'src': './node_modules/leaflet/dist/images/*',
@@ -81,7 +94,12 @@ function styles() {
     .pipe(concat('maps-locate.bundle.min.css'))
     .pipe(gulp.dest(plugin.public));
 
-  return merge(main, locate);
+    gl = gulp.src(gl_styles)
+    .pipe(cleancss())
+    .pipe(concat('maps-gl.bundle.min.css'))
+    .pipe(gulp.dest(plugin.public));
+
+  return merge(main, locate, gl);
 };
 
 function scripts() {
@@ -97,7 +115,11 @@ function scripts() {
     .pipe(uglify())
     .pipe(gulp.dest(plugin.public));
 
-  return merge(main, locate);
+    gl = gulp.src(gl_scripts)
+    .pipe(concat('maps-gl.bundle.min.js'))
+    .pipe(gulp.dest(plugin.public));
+
+  return merge(main, locate, gl);
 };
 
 function assets() {