@openhistoricalmap/map-styles 0.9.2 → 0.9.4

package/railway/railway.json

@@ -23,10 +23,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/{z}/{x}/{y}.pbf"
+      ],
+      "minzoom": 0,
+      "maxzoom": 22,
+      "scheme": "xyz"
     }
   },
-  "sprite": "https://www.openhistoricalmap.org/map-styles/rail/rail_spritesheet",
-  "glyphs": "https://www.openhistoricalmap.org/map-styles/fonts/{fontstack}/{range}.pbf",
+  "sprite": "https://openhistoricalmap.github.io/map-styles/railway/railway_spritesheet",
+  "glyphs": "https://openhistoricalmap.github.io/map-styles/fonts/{fontstack}/{range}.pbf",
   "layers": [
     {
       "id": "background",
@@ -40,7 +49,7 @@
     {
       "id": "land",
       "type": "fill",
-      "source": "osm",
+      "source": "osm_land",
       "source-layer": "land",
       "minzoom": 0,
       "maxzoom": 24,
@@ -627,11 +636,7 @@
       "type": "fill",
       "source": "osm",
       "source-layer": "amenity_areas",
-      "filter": [
-        "in",
-        ["get", "type"],
-        ["literal", ["school", "university"]]
-      ],
+      "filter": ["in", ["get", "type"], ["literal", ["school", "university"]]],
       "layout": {"visibility": "none"},
       "paint": {"fill-color": "rgba(226, 214, 205, 1)"}
     },
@@ -2772,7 +2777,7 @@
         [
           "in",
           ["get", "type"],
-         ["literal", ["motorway", "motorway_link", "trunk", "trunk_link"]]
+          ["literal", ["motorway", "motorway_link", "trunk", "trunk_link"]]
         ],
         ["==", ["get", "tunnel"], 1]
       ],
@@ -3478,11 +3483,7 @@
       "maxzoom": 20,
       "filter": [
         "all",
-        [
-          "in",
-          ["get", "type"],
-          ["literal", ["motorway_link", "trunk_link"]]
-        ],
+        ["in", ["get", "type"], ["literal", ["motorway_link", "trunk_link"]]],
         ["!=", ["get", "tunnel"], 1],
         ["!=", ["get", "bridge"], 1]
       ],
@@ -3727,11 +3728,7 @@
       "maxzoom": 20,
       "filter": [
         "all",
-        [
-          "in",
-          ["get", "type"],
-          ["literal", ["motorway_link", "trunk_link"]]
-        ],
+        ["in", ["get", "type"], ["literal", ["motorway_link", "trunk_link"]]],
         ["!=", ["get", "tunnel"], 1],
         ["!=", ["get", "bridge"], 1]
       ],
@@ -4454,7 +4451,10 @@
       "filter": [
         "all",
         ["in", ["get", "type"], ["literal", ["miniature", "narrow_gauge"]]],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]]
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ]
       ],
       "layout": {"visibility": "visible"},
       "paint": {
@@ -4472,7 +4472,10 @@
       "filter": [
         "all",
         ["in", ["get", "type"], ["literal", ["miniature", "narrow_gauge"]]],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]]
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ]
       ],
       "layout": {"visibility": "visible"},
       "paint": {
@@ -4548,7 +4551,10 @@
       "filter": [
         "all",
         ["==", ["get", "usage"], "main"],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]],
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ],
         ["in", ["get", "type"], ["literal", ["preserved", "rail"]]]
       ],
       "layout": {
@@ -4572,7 +4578,10 @@
         "all",
         ["==", ["get", "usage"], "main"],
         ["in", ["get", "type"], ["literal", ["preserved", "rail"]]],
-        ["!", ["in", ["get", "service"], ["literal",["siding", "spur", "yard"]]]]
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ]
       ],
       "layout": {
         "visibility": "visible",
@@ -4743,7 +4752,10 @@
       "filter": [
         "all",
         ["in", ["get", "type"], ["literal", ["preserved", "rail"]]],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]],
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ],
         ["==", ["get", "usage"], "tourism"]
       ],
       "layout": {
@@ -4776,7 +4788,10 @@
       "filter": [
         "all",
         ["in", ["get", "type"], ["literal", ["preserved", "rail"]]],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]],
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ],
         ["==", ["get", "usage"], "tourism"]
       ],
       "layout": {
@@ -4818,7 +4833,10 @@
       "filter": [
         "all",
         ["in", ["get", "type"], ["literal", ["preserved", "rail"]]],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]],
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ],
         ["==", ["get", "usage"], "military"]
       ],
       "layout": {
@@ -4851,7 +4869,10 @@
       "filter": [
         "all",
         ["in", ["get", "type"], ["literal", ["preserved", "rail"]]],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]],
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ],
         ["==", ["get", "usage"], "military"]
       ],
       "layout": {
@@ -4892,8 +4913,11 @@
       "maxzoom": 24,
       "filter": [
         "all",
-        ["in", ["get", "type"], ["literal" ,["preserved", "rail"]]],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]],
+        ["in", ["get", "type"], ["literal", ["preserved", "rail"]]],
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ],
         ["==", ["get", "usage"], "branch"]
       ],
       "layout": {
@@ -4916,7 +4940,10 @@
       "filter": [
         "all",
         ["in", ["get", "type"], ["literal", ["preserved", "rail"]]],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]],
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ],
         ["==", ["get", "usage"], "branch"]
       ],
       "layout": {
@@ -4958,7 +4985,10 @@
       "filter": [
         "all",
         ["in", ["get", "type"], ["literal", ["preserved", "rail"]]],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]],
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ],
         ["==", ["get", "usage"], "industrial"]
       ],
       "layout": {
@@ -4991,7 +5021,10 @@
       "filter": [
         "all",
         ["in", ["get", "type"], ["literal", ["preserved", "rail"]]],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]],
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ],
         ["==", ["get", "usage"], "industrial"]
       ],
       "layout": {
@@ -5033,7 +5066,10 @@
       "filter": [
         "all",
         ["in", ["get", "type"], ["literal", ["preserved", "rail"]]],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]],
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ],
         ["!=", ["get", "usage"], "main"],
         ["!=", ["get", "usage"], "industrial"],
         ["!=", ["get", "usage"], "branch"],
@@ -5064,7 +5100,10 @@
       "filter": [
         "all",
         ["in", ["get", "type"], ["literal", ["preserved", "rail"]]],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]],
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ],
         ["!=", ["get", "usage"], "main"],
         ["!=", ["get", "usage"], "industrial"],
         ["!=", ["get", "usage"], "branch"],
@@ -5095,7 +5134,10 @@
       "filter": [
         "all",
         ["in", ["get", "type"], ["literal", ["preserved", "rail"]]],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]],
+        [
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ],
         ["!=", ["get", "usage"], "main"],
         ["!=", ["get", "usage"], "ndustrial"],
         ["!=", ["get", "usage"], "branch"],
@@ -5180,12 +5222,11 @@
       "maxzoom": 24,
       "filter": [
         "all",
+        ["in", ["get", "type"], ["literal", ["funicular", "monorail", "tram"]]],
         [
-          "in",
-          ["get", "type"],
-          ["literal", ["funicular", "monorail", "tram"]]
-        ],
-        ["!", ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]]
+          "!",
+          ["in", ["get", "service"], ["literal", ["siding", "spur", "yard"]]]
+        ]
       ],
       "layout": {
         "visibility": "visible",
@@ -5738,19 +5779,22 @@
         [
           "in",
           ["get", "type"],
-          ["literal", [
-            "camp_site",
-            "garden",
-            "grass",
-            "grassland",
-            "park",
-            "picnic_site",
-            "playground",
-            "recreation_ground",
-            "sports_centre",
-            "stadium",
-            "village_green"
-          ]]
+          [
+            "literal",
+            [
+              "camp_site",
+              "garden",
+              "grass",
+              "grassland",
+              "park",
+              "picnic_site",
+              "playground",
+              "recreation_ground",
+              "sports_centre",
+              "stadium",
+              "village_green"
+            ]
+          ]
         ],
         [">", ["get", "area"], 12000]
       ],
@@ -5780,15 +5824,18 @@
       "filter": [
         "in",
         ["get", "type"],
-        ["literal", [
-          "allotmets",
-          "farm",
-          "farmland",
-          "farmyard",
-          "garden",
-          "orchard",
-          "vineyard"
-        ]]
+        [
+          "literal",
+          [
+            "allotmets",
+            "farm",
+            "farmland",
+            "farmyard",
+            "garden",
+            "orchard",
+            "vineyard"
+          ]
+        ]
       ],
       "layout": {
         "text-field": ["to-string", ["get", "name"]],
@@ -5856,9 +5903,8 @@
       "source-layer": "place_areas",
       "minzoom": 16,
       "filter": [
-        "!", ["in",
-        ["get", "type"],
-        ["literal", ["country", "state", "territory"]]]
+        "!",
+        ["in", ["get", "type"], ["literal", ["country", "state", "territory"]]]
       ],
       "layout": {
         "visibility": "visible",
@@ -5910,19 +5956,22 @@
       "filter": [
         "in",
         ["get", "type"],
-        ["literal", [
-          "bank",
-          "border_control",
-          "embassy",
-          "fire_station",
-          "government",
-          "hospital",
-          "police",
-          "school",
-          "taxi",
-          "townhall",
-          "university"
-        ]]
+        [
+          "literal",
+          [
+            "bank",
+            "border_control",
+            "embassy",
+            "fire_station",
+            "government",
+            "hospital",
+            "police",
+            "school",
+            "taxi",
+            "townhall",
+            "university"
+          ]
+        ]
       ],
       "layout": {
         "icon-image": ["concat", ["get", "type"], "-12"],
@@ -6270,9 +6319,12 @@
         "all",
         ["==", ["get", "type"], "place_of_worship"],
         [
-          "!", ["in",
-          ["get", "religion"],
-          ["literal", ["christian", "jewish", "muslim"]]]
+          "!",
+          [
+            "in",
+            ["get", "religion"],
+            ["literal", ["christian", "jewish", "muslim"]]
+          ]
         ]
       ],
       "layout": {
@@ -6354,9 +6406,8 @@
       "source-layer": "landuse_areas",
       "minzoom": 16,
       "filter": [
-        "!", ["in",
-        ["get", "type"],
-        ["literal", ["garden", "peak", "wetland"]]]
+        "!",
+        ["in", ["get", "type"], ["literal", ["garden", "peak", "wetland"]]]
       ],
       "layout": {
         "icon-image": ["concat", ["get", "type"], "-18"],
@@ -6470,7 +6521,10 @@
       "filter": [
         "in",
         ["get", "type"],
-        ["literal", ["hamlet", "islet", "locality", "neighborhood", "suburb", "village"]]
+        [
+          "literal",
+          ["hamlet", "islet", "locality", "neighborhood", "suburb", "village"]
+        ]
       ],
       "layout": {
         "text-field": ["to-string", ["get", "name"]],
@@ -6785,4 +6839,4 @@
     }
   ],
   "id": "io6r61fxt"
-}
+}

package/scripts/prepare.js

@@ -18,8 +18,22 @@ if (!fs.existsSync(distDir)) {
 }
 
 try {
+  const assets = ['glyphs', 'sprite'];
+  let ohmVectorStyle;
   styles.forEach((style) => {
-    ohmVectorStyles[camelCase(style, { pascalCase: true })] = JSON.parse(fs.readFileSync(path.join(baseDir.path, style, `${style}.json`)));
+    // Load each development style from disk, replace the scheme/domain/port, & make it the value of an ohm-website key,
+    // e.g., japanese_scroll => ohmVectorStyles.JapaneseScroll
+    const ohmWebsiteKey = camelCase(style, { pascalCase: true });
+    ohmVectorStyles[ohmWebsiteKey] = JSON.parse(fs.readFileSync(path.join(baseDir.path, style, `${style}.json`)));
+    ohmVectorStyle = ohmVectorStyles[ohmWebsiteKey];
+    for (const source in ohmVectorStyle.sources) {
+      ohmVectorStyle.sources[source].tiles[0] = ohmVectorStyle.sources[source].tiles[0].replace('vtiles.staging.openhistoricalmap.org', 'vtiles.openhistoricalmap.org')
+    }
+    assets.forEach((asset) => {
+      ohmVectorStyle[asset] = ohmVectorStyle[asset]
+        .replace('http://localhost:8888', 'https://www.openhistoricalmap.org/map-styles')
+        .replace('https://openhistoricalmap.github.io', 'https://www.openhistoricalmap.org')
+    })
   })
   fs.writeFileSync(
     path.join(distDir, `ohm.styles.js`),

package/woodblock/Woodblock-Style-Documentation.md

@@ -0,0 +1,29 @@
+# Documentation of Woodblock Style
+The woodblock style was directly informed by woodblock map styles in the history of cartography. Specific aesthetic elements that captured the imperfections and textures of these old maps - plus map monsters of course - helped to bring this style to life.
+
+## Aesthetic Elements that Made the Map Look Old
+
+### Background Layer (ocean)
+![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. 
+
+### Typeface and styling
+![image](https://user-images.githubusercontent.com/7087091/155616707-ab373ef4-ef99-43dd-bca4-d3b22dd320c7.png)<br>
+For the font choice, I chose the [Eadui](https://fontlibrary.org/en/font/eadui) (with [SIL Open Font License](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL)) because it was very close to a typeface style that was used often in woodblock maps, and also was easier to read on a screen than the bolder Blackletter options that also typical woodblock map fonts.I also made a thick halo in the labels, emulating the “halos” that were commonly seen in woodblock maps, due to map makers adding labels via slot cutting (read more about tools and media [here](https://vknoppkewetzel.github.io/VKW_MSthesis.pdf)), or leaving space to label by hand.
+
+### Linework design (roads, country boundaries)
+![image](https://user-images.githubusercontent.com/7087091/155616859-91af592c-1c12-4a27-a5b5-d9448590eb87.png)<br>
+Both the tools used and the medium (wood) meant that everything carved into the wood was not perfectly linear, perfectly spaced, or perfectly circular. Additionally, using ink on the block and pressing down the block onto paper meant the ink sometimes squeezed to the side, or was patchy on the paper itself, providing even more textural elements. Essentially, the tools and mediums used mean that woodblock maps have “imperfections” as an enormous part of the aesthetic.
+
+In order to mimic this, I created “splotchy” (ink squeezing/inconsistent) linework which is used in country boundaries and building linework, as well as “inconsistent tapering” linework for the roads. 
+
+Note, I intentionally used a light dashed-line for state boundaries rather than another textural line pattern, as it was a little too much texture to use another “imperfect” line pattern for states (alongside a more intricate font, country boundaries, paper texture, roads, and stylized icons).
+
+### Symbology design
+![image](https://user-images.githubusercontent.com/7087091/155616941-6627cda8-fa5e-42a3-a96f-192dfe1b01a7.png)<br>
+A huge part of old maps are the illustrative elements across the map, from icons used for cities to map monsters across the old map. I created two different sized building icons, two different map monsters, and a tree grouping to provide this final aesthetic element to this map to wrap up the “woodblock map feeling” of the style. 
+
+### Data Choices
+ Another important aspect of making this style work really well in emulating woodblock maps is that this map 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. 
+<br><br>
+For now, this style serves to highlight an older map aesthetic, in modern mapping technologies, alongside showing data over time.

package/woodblock/woodblock.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/woodblock/woodblock_spritesheet",
-  "glyphs": "https://www.openhistoricalmap.org/map-styles/fonts/{fontstack}/{range}.pbf",
+  "sprite": "https://openhistoricalmap.github.io/map-styles/woodblock/woodblock_spritesheet",
+  "glyphs": "https://openhistoricalmap.github.io/map-styles/fonts/{fontstack}/{range}.pbf",
   "layers": [
     {
       "id": "background-pattern",
@@ -46,7 +55,7 @@
     {
       "id": "land-pattern",
       "type": "fill",
-      "source": "osm",
+      "source": "osm_land",
       "source-layer": "land",
       "minzoom": 0,
       "maxzoom": 24,
@@ -59,7 +68,7 @@
     {
       "id": "land",
       "type": "fill",
-      "source": "osm",
+      "source": "osm_land",
       "source-layer": "land",
       "minzoom": 0,
       "maxzoom": 24,
@@ -536,12 +545,8 @@
       "maxzoom": 24,
       "filter": [
         "all",
-        [
-          "in",
-          ["get", "type"],
-          ["literal", ["funicular", "monorail", "tram"]]
-        ],
-        ["!",["in", ["get", "service"], ["literal", ["siding", "yard"]]]]
+        ["in", ["get", "type"], ["literal", ["funicular", "monorail", "tram"]]],
+        ["!", ["in", ["get", "service"], ["literal", ["siding", "yard"]]]]
       ],
       "layout": {"visibility": "none"},
       "paint": {
@@ -571,7 +576,7 @@
       "filter": [
         "all",
         ["in", ["get", "type"], ["literal", ["miniature", "narrow_gauge"]]],
-        ["!",["in", ["get", "service"], ["literal", ["siding", "yard"]]]]
+        ["!", ["in", ["get", "service"], ["literal", ["siding", "yard"]]]]
       ],
       "layout": {"visibility": "none"},
       "paint": {
@@ -619,9 +624,11 @@
       "maxzoom": 24,
       "filter": [
         "all",
-        ["in",
+        [
+          "in",
           ["get", "type"],
-          ["literal", ["abandoned", "dismantled", "disused", "razed"]]],
+          ["literal", ["abandoned", "dismantled", "disused", "razed"]]
+        ],
         ["!", ["in", ["get", "service"], ["literal", ["siding", "yard"]]]]
       ],
       "layout": {"visibility": "none"},
@@ -1156,11 +1163,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": {
@@ -1500,11 +1503,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": {
@@ -2095,19 +2094,22 @@
         [
           "in",
           ["get", "type"],
-          ["literal", [
-            "camp_site",
-            "garden",
-            "grass",
-            "grassland",
-            "park",
-            "picnic_site",
-            "playground",
-            "recreation_ground",
-            "sports_centre",
-            "stadium",
-            "village_green"
-          ]]
+          [
+            "literal",
+            [
+              "camp_site",
+              "garden",
+              "grass",
+              "grassland",
+              "park",
+              "picnic_site",
+              "playground",
+              "recreation_ground",
+              "sports_centre",
+              "stadium",
+              "village_green"
+            ]
+          ]
         ],
         [">", ["get", "area"], 12000]
       ],
@@ -2419,4 +2421,4 @@
     }
   ],
   "id": "io6r61fxt"
-}
+}