@openhistoricalmap/map-styles 0.9.2 → 0.9.4

package/historical/historical.json

@@ -21,10 +21,19 @@
       "tiles": [
         "https://vtiles.staging.openhistoricalmap.org/maps/ne/{z}/{x}/{y}.pbf"
       ]
+    },
+    "osm_land": {
+      "type": "vector",
+      "tiles": [
+        "https://vtiles.staging.openhistoricalmap.org/maps/osm_land/{z}/{x}/{y}.pbf"
+      ],
+      "minzoom": 0,
+      "maxzoom": 22,
+      "scheme": "xyz"
     }
   },
-  "sprite": "https://www.openhistoricalmap.org/map-styles/main/main_spritesheet",
-  "glyphs": "https://www.openhistoricalmap.org/map-styles/fonts/{fontstack}/{range}.pbf",
+  "sprite": "http://localhost:8888/historical/historical_spritesheet",
+  "glyphs": "http://localhost:8888/fonts/{fontstack}/{range}.pbf",
   "layers": [
     {
       "id": "background",
@@ -48,7 +57,7 @@
     {
       "id": "land",
       "type": "fill",
-      "source": "osm",
+      "source": "osm_land",
       "source-layer": "land",
       "minzoom": 0,
       "maxzoom": 24,
@@ -304,8 +313,6 @@
             "rgba(238, 229, 178, 1)",
             "basin",
             "rgba(144, 204, 203, 1)",
-            "wetland",
-            "rgba(227, 233, 226, 1)",
             "salt_pond",
             "rgba(236, 240, 241, 1)",
             "mud",
@@ -358,21 +365,6 @@
         ]
       }
     },
-    {
-      "id": "landuse_areas_z12_glacier-outline",
-      "type": "line",
-      "source": "osm",
-      "source-layer": "landuse_areas",
-      "minzoom": 9,
-      "maxzoom": 24,
-      "filter": ["==", ["get", "type"], "glacier"],
-      "layout": {"visibility": "visible"},
-      "paint": {
-        "line-color": "rgba(180, 211, 218, 1)",
-        "line-dasharray": [2, 2],
-        "line-width": ["interpolate", ["linear"], ["zoom"], 9, 1, 14, 1.5]
-      }
-    },
     {
       "id": "landuse_areas_z12_food_and_farming",
       "type": "fill",
@@ -559,7 +551,7 @@
       "type": "fill",
       "source": "osm",
       "source-layer": "water_areas",
-      "minzoom": 8,
+      "minzoom": 0,
       "maxzoom": 24,
       "layout": {"visibility": "visible"},
       "paint": {
@@ -574,6 +566,26 @@
         ]
       }
     },
+    {
+      "id": "water_areas-ne",
+      "type": "fill",
+      "source": "ne",
+      "source-layer": "water_areas",
+      "minzoom": 0,
+      "maxzoom": 8,
+      "layout": {"visibility": "visible"},
+      "paint": {
+        "fill-color": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          0,
+          "rgba(185, 228, 228, 1)",
+          10,
+          "rgba(126, 218, 218, 1)"
+        ]
+      }
+    },
     {
       "id": "landuse_areas_z12_watercover",
       "type": "fill",
@@ -599,40 +611,42 @@
             "rgba(144, 204, 203, 1)",
             "swimming_pool",
             "rgba(144, 204, 203, 1)",
+            "wetland",
+            "rgba(228, 242, 227, 1)",
             "transparent"
           ]
         ]
       }
     },
     {
-      "id": "landuse_areas_z11_wetland_watercover",
+      "id": "wetlands_z11-pattern",
       "type": "fill",
       "source": "osm",
       "source-layer": "landuse_areas",
       "minzoom": 11,
       "maxzoom": 24,
-      "filter": ["all", ["==", "type", "wetland"]],
+      "filter": ["==", ["get", "type"], "wetland"],
       "layout": {"visibility": "visible"},
-      "paint": {"fill-color": "rgba(228, 242, 227, 1)"}
+      "paint": {
+        "fill-color": "rgba(255, 255, 255, 1)",
+        "fill-pattern": {
+          "stops": [[12, "cattails_space_60px"], [14, "cattails_space_70px"]]
+        }
+      }
     },
     {
-      "id": "water_areas-ne",
-      "type": "fill",
-      "source": "ne",
-      "source-layer": "water_areas",
-      "minzoom": 0,
-      "maxzoom": 8,
+      "id": "landuse_areas_z12_glacier-outline",
+      "type": "line",
+      "source": "osm",
+      "source-layer": "landuse_areas",
+      "minzoom": 9,
+      "maxzoom": 24,
+      "filter": ["==", ["get", "type"], "glacier"],
       "layout": {"visibility": "visible"},
       "paint": {
-        "fill-color": [
-          "interpolate",
-          ["linear"],
-          ["zoom"],
-          0,
-          "rgba(185, 228, 228, 1)",
-          10,
-          "rgba(126, 218, 218, 1)"
-        ]
+        "line-color": "rgba(180, 211, 218, 1)",
+        "line-dasharray": [2, 2],
+        "line-width": ["interpolate", ["linear"], ["zoom"], 9, 1, 14, 1.5]
       }
     },
     {
@@ -671,22 +685,6 @@
         "fill-outline-color": "rgba(226, 223, 215, 1)"
       }
     },
-    {
-      "id": "wetlands_z11-pattern",
-      "type": "fill",
-      "source": "osm",
-      "source-layer": "landuse_areas",
-      "minzoom": 11,
-      "maxzoom": 24,
-      "filter": ["==", ["get", "type"], "wetland"],
-      "layout": {"visibility": "visible"},
-      "paint": {
-        "fill-color": "rgba(255, 255, 255, 1)",
-        "fill-pattern": {
-          "stops": [[12, "cattails_space_60px"], [14, "cattails_space_70px"]]
-        }
-      }
-    },
     {
       "id": "water_lines_stream_no_name",
       "type": "line",
@@ -1064,7 +1062,7 @@
       "type": "fill",
       "source": "osm",
       "source-layer": "transport_areas",
-      "minzoom": 14,
+      "minzoom": 12,
       "maxzoom": 24,
       "filter": ["==", ["get", "type"], "aerodrome"],
       "layout": {"visibility": "visible"},
@@ -1078,7 +1076,7 @@
       "type": "fill",
       "source": "osm",
       "source-layer": "transport_areas",
-      "minzoom": 14,
+      "minzoom": 12,
       "maxzoom": 24,
       "filter": ["==", ["get", "type"], "helipad"],
       "layout": {"visibility": "visible"},
@@ -2691,7 +2689,7 @@
       "type": "line",
       "source": "osm",
       "source-layer": "transport_lines",
-      "minzoom": 14,
+      "minzoom": 12,
       "filter": ["==", ["get", "type"], "subway"],
       "layout": {"visibility": "visible"},
       "paint": {
@@ -2701,7 +2699,7 @@
           ["linear"],
           ["zoom"],
           12,
-          1,
+          0.8,
           13,
           1,
           14,
@@ -3147,6 +3145,36 @@
         "line-dasharray": [0.1, 0.3]
       }
     },
+    {
+      "id": "roads_servicecase_z13",
+      "type": "line",
+      "source": "osm",
+      "source-layer": "transport_lines",
+      "minzoom": 13,
+      "maxzoom": 24,
+      "filter": [
+        "all",
+        ["in", ["get", "type"], ["literal", ["service"]]],
+        ["!=", ["get", "bridge"], 1]
+      ],
+      "layout": {
+        "visibility": "visible",
+        "line-cap": "round",
+        "line-join": "round"
+      },
+      "paint": {
+        "line-color": "#D2D2D5",
+        "line-width": [
+          "interpolate",
+          ["exponential", 1.5],
+          ["zoom"],
+          13,
+          2,
+          18,
+          12
+        ]
+      }
+    },
     {
       "id": "roads_residentialcase_z13",
       "type": "line",
@@ -3156,11 +3184,7 @@
       "maxzoom": 24,
       "filter": [
         "all",
-        [
-          "in",
-          ["get", "type"],
-          ["literal", ["residential", "service", "unclassified"]]
-        ],
+        ["in", ["get", "type"], ["literal", ["residential", "unclassified"]]],
         ["!=", ["get", "bridge"], 1]
       ],
       "layout": {
@@ -3495,6 +3519,32 @@
         "line-dasharray": [1, 2]
       }
     },
+    {
+      "id": "roads_service",
+      "type": "line",
+      "source": "osm",
+      "source-layer": "transport_lines",
+      "minzoom": 12,
+      "maxzoom": 24,
+      "filter": ["in", ["get", "type"], ["literal", ["service"]]],
+      "layout": {
+        "visibility": "visible",
+        "line-cap": "round",
+        "line-join": "round"
+      },
+      "paint": {
+        "line-color": "#ffffff",
+        "line-width": [
+          "interpolate",
+          ["exponential", 1.5],
+          ["zoom"],
+          12,
+          1.6,
+          18,
+          7
+        ]
+      }
+    },
     {
       "id": "roads_residential",
       "type": "line",
@@ -3505,7 +3555,7 @@
       "filter": [
         "in",
         ["get", "type"],
-        ["literal", ["residential", "service", "unclassified"]]
+        ["literal", ["residential", "unclassified"]]
       ],
       "layout": {
         "visibility": "visible",
@@ -5595,7 +5645,7 @@
       "source": "osm",
       "source-layer": "buildings_centroids",
       "minzoom": 16,
-      "filter": ["all"],
+      "filter": ["!=", ["get", "type"], "parking"],
       "layout": {
         "icon-image": "{tourism}-18",
         "visibility": "visible",
@@ -5971,7 +6021,7 @@
       "source": "osm",
       "source-layer": "transport_areas",
       "minzoom": 10,
-      "maxzoom": 16,
+      "maxzoom": 14,
       "filter": ["==", ["get", "type"], "aerodrome"],
       "layout": {"icon-image": "airport-18", "text-font": ["OpenHistorical"]}
     },

package/index.html

@@ -0,0 +1,54 @@
+<html>
+<head>
+  <script src="./node_modules/maplibre-gl/dist/maplibre-gl.js"></script>
+  <link href="./node_modules/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
+</head>
+<body>
+<div id="map" style="width:100%;height:100%"></div>
+
+<script type="module">
+  import StyleFlipperControl from "./node_modules/maplibre-gl-style-flipper/index.js";
+  const mapStyles = {
+    "historical": {
+      code: "historical",
+      image: "./img/historical.png",
+      url: "./historical/historical.json"
+    },
+    "japanese_scroll": {
+      code: "japanese_scroll",
+      image: "./img/japanese_scroll.png",
+      url: "./japanese_scroll/japanese_scroll.json"
+    },
+    "railway": {
+      code: "railway",
+      image: "./img/railway.png",
+      url: "./railway/railway.json"
+    },
+    "woodblock": {
+      code: "woodblock",
+      image: "./img/woodblock.png",
+      url: "./woodblock/woodblock.json"
+    },
+  };
+
+  var map = new maplibregl.Map({
+    container: 'map',
+    style: mapStyles["historical"].url,
+    center: [-74.033, 40.6259],
+    zoom: 11.73,
+    hash: true
+  })
+
+  // Create an instance of StyleFlipperControl
+  const styleFlipperControl = new StyleFlipperControl(mapStyles);
+
+  // Set the initial style code
+  styleFlipperControl.setCurrentStyleCode("historical");
+
+  // Add the control to the map
+  map.addControl(styleFlipperControl, "bottom-right");
+
+</script>
+
+</body>
+</html>

package/japanese_scroll/Japanese_Scroll-Style-Documentation.md

@@ -0,0 +1,40 @@
+# Documentation of Japanese Scrool Map Style
+This style was created after the Woodblock style, and is inspired by the long-form Japanese scroll maps from ~1500/1600/1700s. In some ways, the longform map emulates the modern mapping scale so much more, because the scrolls gave so much more space for information and data. Of course, the amount of paper isn't the same as global or multiple zoom levels, but the premise of showing more information, and having a different visualization connection to what one sees in real life, on the ground, is why I wanted to make this style.
+<br>
+Obviously, the map style is limited to a rectangular screen size, and also doesn't have the same capacity to make you feel like you are strolling along a river, the coast, or a trail, but hopefully some of the core aesthetic elements bring this style into clearly being rooted in historical Japanese maps.
+<br> 
+Below are the maps from which I pulled inspiration:
+- [[Shandong, Zhili, Shengjing hai jiang tu]](https://www.loc.gov/resource/g7822cm.gct00259?r=0.375,0.043,0.25,0.154,0)  Coastal map of Shandong, Zhili, and Shengjing
+- [Map of the Sea and Land Routes from Edo to Nagasaki](https://www.loc.gov/resource/gdcwdl.wdl_14435_001/?sp=23&r=-0.08,-0.07,1.238,0.761,0), Kyoto : Nishida Shobee, 1672
+- [Dai Nihon enkai yochi zenzu](https://www.loc.gov/resource/g7960m.gct00032/?sp=16&r=-0.192,0.859,0.973,0.598,0) [Japan, Hokkaido to Kyushu]
+- [Song Xian he tu.](https://www.loc.gov/resource/g7823s.ct003375/?r=-0.218,-0.052,1.454,0.894,0) Map of the river systems in Song County
+- [[Rehe xing gong quan tu]](https://www.loc.gov/resource/g7824c.ct001844/?r=0.789,0.26,0.25,0.154,0)
+
+## Aesthetic Elements That Made the Map Look Old
+### Background Layer (land)
+![image](https://user-images.githubusercontent.com/7087091/155616674-731c9b0d-e376-4594-b008-bd9c7544488d.png) <br>
+For this style, it made sense to emulate the texture of old, aged paper, as this aesthetic is something we are very used to seeing in old maps. 
+
+## Water (Ocean, lakes)
+![image](https://user-images.githubusercontent.com/7087091/211070389-a98ee7a4-daad-4682-92f7-141e325836b8.png)<br>
+I was inspired by the above, and created a pattern for water areas across the map that was similar to the above.
+
+## Linework (admin, roads)
+![image](https://user-images.githubusercontent.com/7087091/211070481-fdcea19d-31fd-4b1e-97c5-daa4f897ed86.png) <br>
+Similar to Woodblock, I used  inconsistent/tapering lines to emulate the imperfections of old maps. 
+
+## Symbology (Mountains)
+![image](https://user-images.githubusercontent.com/7087091/211070597-c2c238e5-858e-4fff-ad51-f7e0ac21fecc.png)
+![image](https://user-images.githubusercontent.com/7087091/211070644-bee6701a-f61d-4728-b310-242968326dcb.png)
+![image](https://user-images.githubusercontent.com/7087091/211070700-780e5719-495d-40a6-b582-c9cf2cd13edc.png)
+<br>
+Symbology in old maps always a reason why they look old. Mountains were a consistent theme across japanese maps, so I created these symbols as well.
+
+## Label Design
+![image](https://user-images.githubusercontent.com/7087091/211070796-31b61a28-1f16-4ef4-a9d2-672b7709196c.png) <br>
+This felt really important as a few of the maps had this styling. I used block/square halos with red tones were common across various maps. Incorporated reds as well as mustard yellows, as this also was colors used across some of the inpsiration maps
+
+## Data Choices
+Like the Woodblock style, this map style intentionally removes quite a bit of OHM data from the map. Older maps had a lot less data in them. If this map were to grow over time and have more data added, there would need to be some consideration of how design elements change to ensure that there is an appropriate hierarchy and balance of contrast.
+
+For now, this style serves to highlight an older map aesthetic, in modern mapping technologies, alongside showing data over time.

package/japanese_scroll/japanese_scroll.json

@@ -14,10 +14,19 @@
       "tiles": [
         "https://vtiles.staging.openhistoricalmap.org/maps/ne/{z}/{x}/{y}.pbf"
       ]
+    },
+    "osm_land": {
+      "type": "vector",
+      "tiles": [
+        "https://vtiles.staging.openhistoricalmap.org/maps/osm_land/{z}/{x}/{y}.pbf"
+      ],
+      "minzoom": 0,
+      "maxzoom": 22,
+      "scheme": "xyz"
     }
   },
-  "sprite": "https://www.openhistoricalmap.org/map-styles/japanese_scroll/jp_spritesheet_template",
-  "glyphs": "https://www.openhistoricalmap.org/map-styles/fonts/{fontstack}/{range}.pbf",
+  "sprite": "https://openhistoricalmap.github.io/map-styles/japanese_scroll/japanese_scroll_spritesheet_template",
+  "glyphs": "https://openhistoricalmap.github.io/map-styles/fonts/{fontstack}/{range}.pbf",
   "layers": [
     {
       "id": "background",
@@ -43,7 +52,7 @@
     {
       "id": "land",
       "type": "fill",
-      "source": "osm",
+      "source": "osm_land",
       "source-layer": "land",
       "minzoom": 0,
       "maxzoom": 24,
@@ -53,7 +62,7 @@
     {
       "id": "land-pattern",
       "type": "fill",
-      "source": "osm",
+      "source": "osm_land",
       "source-layer": "land",
       "minzoom": 0,
       "maxzoom": 24,
@@ -537,11 +546,7 @@
       "maxzoom": 24,
       "filter": [
         "all",
-        [
-          "in",
-          ["get", "type"],
-          ["literal", ["funicular", "monorail", "tram"]]
-        ],
+        ["in", ["get", "type"], ["literal", ["funicular", "monorail", "tram"]]],
         ["!", ["in", ["get", "service"], ["literal", ["siding", "yard"]]]]
       ],
       "layout": {"visibility": "none"},
@@ -1159,11 +1164,7 @@
       "maxzoom": 20,
       "filter": [
         "all",
-        [
-          "in",
-          ["get", "type"],
-          ["literal", ["motorway_link", "trunk_link"]]
-        ],
+        ["in", ["get", "type"], ["literal", ["motorway_link", "trunk_link"]]],
         ["!=", ["get", "tunnel"], 1]
       ],
       "layout": {
@@ -1503,11 +1504,7 @@
       "maxzoom": 20,
       "filter": [
         "all",
-        [
-          "in",
-          ["get", "type"],
-          ["literal", ["motorway_link", "trunk_link"]]
-        ],
+        ["in", ["get", "type"], ["literal", ["motorway_link", "trunk_link"]]],
         ["!=", ["get", "tunnel"], 1]
       ],
       "layout": {
@@ -2285,4 +2282,4 @@
     }
   ],
   "id": "io6r61fxt"
-}
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@openhistoricalmap/map-styles",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "A collection of map styles for OpenHistoricalMap",
   "main": "''",
   "type": "module",
   "scripts": {
     "prepare": "scripts/prepare.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "http-server --port 8888 --cors -o '#7.33/40.487/-73.554'"
   },
   "repository": {
     "type": "git",
@@ -17,12 +17,15 @@
     "Vanessa Knoppke-Wetzel <run.for.funner@gmail.com>",
     "Eric Theise <erictheise@gmail.com>"
   ],
-  "license": "",
+  "license": "CC0 1.0 Universal",
   "bugs": {
-    "url": "https://github.com/OpenHistoricalMap/map-styles/issues"
+    "url": "https://github.com/OpenHistoricalMap/issues"
   },
   "homepage": "https://github.com/OpenHistoricalMap/map-styles#readme",
   "dependencies": {
-    "camelcase": "^8.0.0"
+    "camelcase": "^8.0.0",
+    "http-server": "^14.1.1",
+    "maplibre-gl": "^5.1.0",
+    "maplibre-gl-style-flipper": "^1.0.7"
   }
 }

package/railway/Railway-Style-Documentation.md

@@ -0,0 +1,60 @@
+# Documentation of Railway Style: Where it is today
+The below documents the original considerations for the rail style. This style, however, is one that requires some design updates, and I would say is not at all a "final design" because of the likelihood of more data attributes to exist in the future. This style is historical but also must be practical, and unlike the other two style variants, this style requires more data, and also has more need for multi-variant styling of some elements (specifically rail). <br>
+<br>
+
+## Original Railway Style Inspiration (And references for the future?)
+
+### Main line routes
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/b6315c49-b06a-4290-a00d-b51e37f7fc24)
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/1e317252-0f2a-40f2-bc83-5f071d0878ed)
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/0ebd2c0d-b581-40ee-b569-36292b2c7c66)
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/ca6d44fb-a65f-4877-a750-e50be86aa021)
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/de96141e-ecba-484a-a235-1debe2c0dd67)
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/6cc264f9-f1f7-42af-b76b-692f0ef4cadc)
+
+heavy black lines with white/clear circles (that represented towns) were common across many historical maps. This in itself isn't shocking: Make a clearly visible line, and showcase where the cities and towns are along the routes. The result is a visually distinct aesthetic, however. Given that this occurs often and also globally ( *historical research dependent on what I could find based on language I speak, so noting that I attempted to review globally but limits here). Given this, this aesthetic seems appropriate for "main" line routes.
+<br>
+<br>
+While this is where the inspiration for the "main" rail lines came from, the OHM community has generally stated that it would be ideal to update this, so I anticipate when there are more data attributes, this styling will change in the future.
+
+### "Other route" aesthetics
+Obvious tracks, dashed lines, and other line aesthetics are ones we should use for the upcoming variety of rail that folx are considering adding as more distinguishable tags for a rail specific style, but I wanted to also review historically how some of these presented, as well as gather other options for inspiration. 
+<br>
+The below lists and shows some examples
+<br>
+<br>
+Thick, dense rail dashes (millipede-esque):
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/e7e3a198-9471-4de7-adf0-75ad03661fd0)
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/22f01ba5-02fb-4eb7-a8ae-82460b1e96d5)
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/b2467fda-2ac9-4416-9f9b-d919bda403da)
+<br><Br>
+classic dashed route:
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/82bfce88-020b-4116-b6f3-31be5889244b)
+<br><br>
+mostly-one-sided dash (I think possible implentation via offset?):
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/ed4c5ba2-f644-4fb3-80ea-4689be3f9a8a)
+<Br><br>
+one-sided dash:
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/33e32a54-6b1d-49af-b20a-19cf831e1edb)
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/bf5e595a-9c23-4464-a63e-f7222bbc6331)
+<Br><Br>
+thicker wide dashes:
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/013d6328-f982-4b20-b4bc-ffe323105e21)
+<Br><br>
+Legend with line varieties (not just rail):
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/29fad750-b5ad-470b-9a79-d5b780d9330b)
+<br><br>
+farther-apart track dashes:
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/2bb34dc4-68e0-4780-9b83-7a17269c75ff)
+<br><br>
+"casing only" route (not the main routes that are bolder here):
+![image](https://github.com/OpenHistoricalMap/issues/assets/7087091/c1eaaf88-3f72-4b4e-b187-d80f096442f8)
+<Br><br>
+And of course, the above isn't including basic line representation, color variances, and normal dashing lines as well (also pictured in these map examples)
+
+## Data and Design Today vs the Future
+![image](https://github.com/user-attachments/assets/52041a80-e350-47ab-a96a-f55162927465)
+The above notes what the various rail styling looks like today. Updates have been made since the original style release based on community feedback, but as noted above, there will absolutely be more changes in the future.
+<br><br>
+Data-wise today, only some places across the globe have visible rail variance. When there are updates to the rail data, this is where there will be a need for more design changes and considerations to be made, especially because this is what the OHM rail community has identified as a space that they want updated (more data, and then updated designs for that new data).
+