Add Versatiles Colorful as example style (#908)

These are great looking permissively licensed styles maintained by a passionate open source communities. I think they should be included in the example styles. 🙂 The thumbnails were uploaded to GitHub and should be available pretty much forever, I chose to triple the pixel density because the other thumbnails look bad on my high res monitor. <img width="573" alt="Screenshot 2024-06-22 at 12 25 56" src="https://github.com/maplibre/maputnik/assets/649392/e3138a0f-bfca-4949-915d-f9fc3e9bb346">
maplibre · Jun 24, 2024 · 0de304c · 0de304c
1 parent 48bf25c
commit 0de304c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,8 @@
     "lint": "eslint ./src ./cypress --ext ts,tsx,js,jsx --report-unused-disable-directives --max-warnings 0",
     "test": "cypress run",
     "cy:open": "cypress open",
-    "lint-css": "stylelint \"src/styles/*.scss\""
+    "lint-css": "stylelint \"src/styles/*.scss\"",
+    "sort-styles": "jq 'sort_by(.id)' src/config/styles.json > tmp.json && mv tmp.json src/config/styles.json"
   },
   "repository": {
     "type": "git",

diff --git a/src/config/styles.json b/src/config/styles.json
@@ -1,40 +1,40 @@
 [
-  {
-    "id": "osm-liberty",
-    "title": "OSM Liberty",
-    "url": "https://maputnik.github.io/osm-liberty/style.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/osm-liberty.png"
-  },
-  {
-    "id": "maptiler-basic-gl-style",
-    "title": "Maptiler Basic",
-    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/[email protected]/style.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/klokantech-basic.png"
-  },
   {
     "id": "dark-matter",
     "title": "Dark Matter",
     "url": "https://cdn.jsdelivr.net/gh/openmaptiles/[email protected]/style.json",
     "thumbnail": "https://maputnik.github.io/thumbnails/dark-matter.png"
   },
   {
-    "id": "positron",
-    "title": "Positron",
-    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/[email protected]/style.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/positron.png"
+    "id": "empty-style",
+    "title": "Empty Style",
+    "url": "https://cdn.jsdelivr.net/gh/maputnik/editor@9cf74ca405d2be0608b57db8109cf3a6af5b9f49/src/config/empty-style.json",
+    "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
   },
   {
-    "id": "osm-bright",
-    "title": "OSM Bright",
-    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/osm-bright-gl-style@v1.11/style.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/osm-bright.png"
+    "id": "maptiler-basic-gl-style",
+    "title": "Maptiler Basic",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/klokantech-basic-gl-style@v1.10/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/klokantech-basic.png"
   },
   {
     "id": "maptiler-toner-gl-style",
     "title": "Toner",
     "url": "https://cdn.jsdelivr.net/gh/openmaptiles/[email protected]/style.json",
     "thumbnail": "https://maputnik.github.io/thumbnails/toner.png"
   },
+  {
+    "id": "os-zoomstack-light",
+    "title": "Zoomstack Light",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-light/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-light.png"
+  },
+  {
+    "id": "os-zoomstack-night",
+    "title": "Zoomstack Night",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-night/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-night.png"
+  },
   {
     "id": "os-zoomstack-outdoor",
     "title": "Zoomstack Outdoor",
@@ -48,21 +48,27 @@
     "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-road.png"
   },
   {
-    "id": "os-zoomstack-light",
-    "title": "Zoomstack Light",
-    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-light/style.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-light.png"
+    "id": "osm-bright",
+    "title": "OSM Bright",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/[email protected]/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/osm-bright.png"
   },
   {
-    "id": "os-zoomstack-night",
-    "title": "Zoomstack Night",
-    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-night/style.json",
-    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-night.png"
+    "id": "osm-liberty",
+    "title": "OSM Liberty",
+    "url": "https://maputnik.github.io/osm-liberty/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/osm-liberty.png"
   },
   {
-    "id": "empty-style",
-    "title": "Empty Style",
-    "url": "https://cdn.jsdelivr.net/gh/maputnik/editor@9cf74ca405d2be0608b57db8109cf3a6af5b9f49/src/config/empty-style.json",
-    "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
+    "id": "positron",
+    "title": "Positron",
+    "url": "https://cdn.jsdelivr.net/gh/openmaptiles/[email protected]/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/positron.png"
+  },
+  {
+    "id": "versatiles-colorful",
+    "title": "Versatiles Colorful",
+    "url": "https://tiles.versatiles.org/assets/styles/colorful.json",
+    "thumbnail": "https://github.com/maplibre/maputnik/assets/649392/6cd69818-c541-46e4-a920-65fb4f654931"
   }
 ]