.env.example

@@ -7,6 +7,7 @@ DB_NAME=mapguesser
 GOOGLE_MAPS_SERVER_API_KEY=your_google_maps_server_api_key
 GOOGLE_MAPS_JS_API_KEY=your_google_maps_js_api_key
 LEAFLET_TILESERVER_URL=a_leaflet_compatible_tileserver_url
+LEAFLET_TILESERVER_SUBDOMAINS=list_of_subdomains_for_the_tileserver_without_separators
 LEAFLET_TILESERVER_ATTRIBUTION=attribution_to_be_shown_for_tiles
 STATIC_ROOT=/static
 MAIL_FROM=mapguesser@mapguesser-dev.ch

README.md

@@ -65,7 +65,12 @@ Required API keys:
 * **GOOGLE_MAPS_SERVER_API_KEY**: this it used by the backend and should have access to **Street View Static API**
 * **GOOGLE_MAPS_JS_API_KEY**: this is used by the frontend and should have access to **Maps JavaScript API** and **Maps Static API**
 
-Additionally, a tile provider is also needed for map editor. This should be configured by `LEAFLET_TILESERVER_URL` and `LEAFLET_TILESERVER_ATTRIBUTION`. You can find some providers here: https://wiki.openstreetmap.org/wiki/Tile_servers. OpenStreetMap's tile server is fine for testing.
+Additionally, a tile provider is also needed for map editor. This should be configured by `LEAFLET_TILESERVER_URL`, `LEAFLET_TILESERVER_SUBDOMAINS` and `LEAFLET_TILESERVER_ATTRIBUTION`. You can find some providers here: https://wiki.openstreetmap.org/wiki/Tile_servers. OpenStreetMap's tile server is fine for testing.
+Example:
+```
+LEAFLET_TILESERVER_URL=https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
+LEAFLET_TILESERVER_SUBDOMAINS=abc
+```
 
 ### (Production only) Create cron job
 

public/static/js/map_editor.js

@@ -382,7 +382,7 @@
 
                 L.tileLayer(tileUrl, {
                     attribution: tileAttribution,
-                    subdomains: '1234',
+                    subdomains: tileSubdomains,
                     ppi: highResData.ppi,
                     tileSize: highResData.tileSize,
                     zoomOffset: highResData.zoomOffset,

views/admin/map_editor.php

@@ -94,6 +94,7 @@
 @section(pageScript)
 <script>
     var tileUrl = '<?= $_ENV['LEAFLET_TILESERVER_URL'] ?>';
+    var tileSubdomains = '<?= $_ENV['LEAFLET_TILESERVER_SUBDOMAINS'] ?>';
     var tileAttribution = '<?= $_ENV['LEAFLET_TILESERVER_ATTRIBUTION'] ?>';
     var mapId = <?= $mapId ?>;
     var mapBounds = <?= json_encode($bounds) ?>;