Add some more basemap layers

layers/index.js

@@ -1,5 +1,6 @@
 import TileLayer from 'ol/layer/Tile';
 import OSM from 'ol/source/OSM';
+import Stamen from 'ol/source/Stamen.js';
 
 import amtrakLayer from './amtrak/layer.js';
 import arenasLayer from './nhl-arenas/layer.js';
@@ -7,14 +8,41 @@ import arenasLayer from './nhl-arenas/layer.js';
 const layerCategories = [
     {
         name: "Base maps",
+        // TODO: include more?
+        // - [ ] https://mc.bbbike.org/mc/
+        // - [ ] https://www.thunderforest.com/pricing/
         layers: [
             {
-                name: "OpenStreetMap Carto",
+                name: "OpenStreetMap Carto (Raster)",
                 enabled: true,
                 layer: new TileLayer({
                     source: new OSM(),
                 }),
             },
+            {
+                name: "CyclOSM (Raster)",
+                layer: new TileLayer({
+                    source: new OSM({
+                        url: "https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png", // TODO: {s}
+                    }),
+                }),
+            },
+            {
+                name: "Stamen Watercolor (Raster)",
+                layer: new TileLayer({
+                    source: new Stamen({
+                        layer: 'watercolor',
+                    }),
+                }),
+            },
+            {
+                name: "Stamen Toner (Raster)",
+                layer: new TileLayer({
+                    source: new Stamen({
+                        layer: 'toner',
+                    }),
+                }),
+            },
         ],
     },
     {