Merge pull request #48 from UNDP-Data/feat/add-positron-style

feat: add Positron base style from Carto

.changeset/silly-games-peel.md

@@ -0,0 +1,5 @@
+---
+"@undp-data/style": minor
+---
+
+feat: add Positron base style from Carto.

Makefile

@@ -6,16 +6,18 @@ iconFolder = "assets/maki-icons"
 
 help:
 	@echo "Please use \`make <target>' where <target> is one of"
-	@echo "  build         to build styles and sprites"
-	@echo "  clean         to clean build folder"
-	@echo "  style         to build style files"
-	@echo "  build-voyager to build only voyager style"
-	@echo "  build-aerial  to build only aerial style"
-	@echo "  build-dark    to build only dark style"
-	@echo "  sprite        to build only sprite"
-	@echo "  voyager       to develop voyager style YAML"
-	@echo "  aerial        to develop aerial style YAML"
-	@echo "  dark          to develop dark style YAML"
+	@echo "  build          to build styles and sprites"
+	@echo "  clean          to clean build folder"
+	@echo "  style          to build style files"
+	@echo "  build-voyager  to build only voyager style"
+	@echo "  build-aerial   to build only aerial style"
+	@echo "  build-dark     to build only dark style"
+	@echo "  build-positron to build only positron style"
+	@echo "  sprite         to build only sprite"
+	@echo "  voyager        to develop voyager style YAML"
+	@echo "  aerial         to develop aerial style YAML"
+	@echo "  dark           to develop dark style YAML"
+	@echo "  positron       to develop positron style YAML"
 
 build: clean style sprite
 
@@ -26,7 +28,7 @@ clean:
 	@echo "------------------------------------------------------------------"
 	rm -rf docs
 
-style: build-voyager build-aerial build-dark
+style: build-voyager build-aerial build-dark build-positron
 
 build-voyager:
 	@echo
@@ -52,6 +54,14 @@ build-dark:
 	mkdir -p docs
 	pnpm charites build assets/dark.yml docs/dark.json
 
+build-positron:
+	@echo
+	@echo "------------------------------------------------------------------"
+	@echo "Building positron style"
+	@echo "------------------------------------------------------------------"
+	mkdir -p docs
+	pnpm charites build assets/positron.yml docs/positron.json
+
 sprite:
 	@echo
 	@echo "------------------------------------------------------------------"
@@ -85,4 +95,11 @@ dark:
 	@echo "------------------------------------------------------------------"
 	@echo "Launching a local server to edit Dark style"
 	@echo "------------------------------------------------------------------"
-	pnpm charites serve assets/dark.yml --sprite-input $(iconFolder) --sdf
+	pnpm charites serve assets/dark.yml --sprite-input $(iconFolder) --sdf
+
+positron:
+	@echo
+	@echo "------------------------------------------------------------------"
+	@echo "Launching a local server to edit Positron style"
+	@echo "------------------------------------------------------------------"
+	pnpm charites serve assets/positron.yml --sprite-input $(iconFolder) --sdf

README.md

@@ -14,7 +14,7 @@ make help
 
 Check the latest version of `@undp-data/style` package at [npmjs](https://www.npmjs.com/package/@undp-data/style?activeTab=versions), and replace the version of `0.0.1` to the latest one. Or, you may use `latest` to fetch style.json from CDN. But we strongly recommend to specify the version to prevent any breaking change error on style.json.
 
-- OSM style
+- Voyager style
 
 ```
 https://unpkg.com/@undp-data/style@latest/dist/style.json
@@ -26,12 +26,18 @@ https://unpkg.com/@undp-data/style@latest/dist/style.json
 https://unpkg.com/@undp-data/style@latest/dist/aerialstyle.json
 ```
 
-- Bing aerial style
+- Dark style
 
 ```
 https://unpkg.com/@undp-data/style@latest/dist/dark.json
 ```
 
+- Positron style
+
+```
+https://unpkg.com/@undp-data/style@latest/dist/positron.json
+```
+
 ### Sprite
 
 - SDF
@@ -104,6 +110,12 @@ make aerial
 make dark
 ```
 
+- launch preview for Positron style
+
+```shell
+make positron
+```
+
 ## Release map style
 
 The procedure for releasing map style to NPM is as follows.

assets/positron.yml

@@ -0,0 +1,120 @@
+version: 8
+name: Positron
+metadata: {}
+sources:
+  carto:
+    type: vector
+    url: https://tiles.basemaps.cartocdn.com/vector/carto.streets/v1/tiles.json
+  terrarium:
+    type: raster-dem
+    attribution: '&copy; <a href="https://github.com/tilezen/joerd/blob/master/docs/attribution.md" target="_blank" rel="noopener">Tilezen Joerd</a>'
+    tiles:
+      - https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png
+    minzoom: 0
+    maxzoom: 15
+    tileSize: 256
+    encoding: terrarium
+    bounds:
+      - -180
+      - -90
+      - 180
+      - 90
+sprite: ./sprite/sprite
+glyphs: https://fonts.undpgeohub.org/fonts/{fontstack}/{range}.pbf
+layers:
+  - !!inc/file positron/background.yml
+  - !!inc/file layers/hillshade.yml
+  - !!inc/file positron/landcover.yml
+  - !!inc/file positron/park_national_park.yml
+  - !!inc/file positron/park_nature_reserve.yml
+  - !!inc/file positron/landuse_residential.yml
+  - !!inc/file positron/landuse.yml
+  - !!inc/file positron/waterway.yml
+  - !!inc/file positron/boundary_county.yml
+  - !!inc/file positron/boundary_state.yml
+  - !!inc/file positron/water.yml
+  - !!inc/file positron/water_shadow.yml
+  - !!inc/file positron/aeroway-runway.yml
+  - !!inc/file positron/aeroway-taxiway.yml
+  - !!inc/file positron/waterway_label.yml
+  - !!inc/file positron/tunnel_service_case.yml
+  - !!inc/file positron/tunnel_minor_case.yml
+  - !!inc/file positron/tunnel_sec_case.yml
+  - !!inc/file positron/tunnel_pri_case.yml
+  - !!inc/file positron/tunnel_trunk_case.yml
+  - !!inc/file positron/tunnel_mot_case.yml
+  - !!inc/file positron/tunnel_path.yml
+  - !!inc/file positron/tunnel_service_fill.yml
+  - !!inc/file positron/tunnel_minor_fill.yml
+  - !!inc/file positron/tunnel_sec_fill.yml
+  - !!inc/file positron/tunnel_pri_fill.yml
+  - !!inc/file positron/tunnel_trunk_fill.yml
+  - !!inc/file positron/tunnel_mot_fill.yml
+  - !!inc/file positron/tunnel_rail.yml
+  - !!inc/file positron/tunnel_rail_dash.yml
+  - !!inc/file positron/road_service_case.yml
+  - !!inc/file positron/road_minor_case.yml
+  - !!inc/file positron/road_pri_case_ramp.yml
+  - !!inc/file positron/road_trunk_case_ramp.yml
+  - !!inc/file positron/road_mot_case_ramp.yml
+  - !!inc/file positron/road_sec_case_noramp.yml
+  - !!inc/file positron/road_pri_case_noramp.yml
+  - !!inc/file positron/road_trunk_case_noramp.yml
+  - !!inc/file positron/road_mot_case_noramp.yml
+  - !!inc/file positron/road_path.yml
+  - !!inc/file positron/road_service_fill.yml
+  - !!inc/file positron/road_minor_fill.yml
+  - !!inc/file positron/road_pri_fill_ramp.yml
+  - !!inc/file positron/road_trunk_fill_ramp.yml
+  - !!inc/file positron/road_mot_fill_ramp.yml
+  - !!inc/file positron/road_sec_fill_noramp.yml
+  - !!inc/file positron/road_pri_fill_noramp.yml
+  - !!inc/file positron/road_trunk_fill_noramp.yml
+  - !!inc/file positron/road_mot_fill_noramp.yml
+  - !!inc/file positron/rail.yml
+  - !!inc/file positron/rail_dash.yml
+  - !!inc/file positron/bridge_service_case.yml
+  - !!inc/file positron/bridge_minor_case.yml
+  - !!inc/file positron/bridge_sec_case.yml
+  - !!inc/file positron/bridge_pri_case.yml
+  - !!inc/file positron/bridge_trunk_case.yml
+  - !!inc/file positron/bridge_mot_case.yml
+  - !!inc/file positron/bridge_path.yml
+  - !!inc/file positron/bridge_service_fill.yml
+  - !!inc/file positron/bridge_minor_fill.yml
+  - !!inc/file positron/bridge_sec_fill.yml
+  - !!inc/file positron/bridge_pri_fill.yml
+  - !!inc/file positron/bridge_trunk_fill.yml
+  - !!inc/file positron/bridge_mot_fill.yml
+  - !!inc/file positron/building.yml
+  - !!inc/file positron/building-top.yml
+  - !!inc/file positron/boundary_country_outline.yml
+  - !!inc/file positron/boundary_country_inner.yml
+  - !!inc/file positron/watername_ocean.yml
+  - !!inc/file positron/watername_sea.yml
+  - !!inc/file positron/watername_lake.yml
+  - !!inc/file positron/watername_lake_line.yml
+  - !!inc/file positron/place_hamlet.yml
+  - !!inc/file positron/place_suburbs.yml
+  - !!inc/file positron/place_villages.yml
+  - !!inc/file positron/place_town.yml
+  - !!inc/file positron/place_country_2.yml
+  - !!inc/file positron/place_country_1.yml
+  - !!inc/file positron/place_state.yml
+  - !!inc/file positron/place_continent.yml
+  - !!inc/file positron/place_city_r6.yml
+  - !!inc/file positron/place_city_r5.yml
+  - !!inc/file positron/place_city_dot_r7.yml
+  - !!inc/file positron/place_city_dot_r4.yml
+  - !!inc/file positron/place_city_dot_r2.yml
+  - !!inc/file positron/place_city_dot_z7.yml
+  - !!inc/file positron/place_capital_dot_z7.yml
+  - !!inc/file positron/poi_stadium.yml
+  - !!inc/file positron/poi_park.yml
+  - !!inc/file positron/roadname_minor.yml
+  - !!inc/file positron/roadname_sec.yml
+  - !!inc/file positron/roadname_pri.yml
+  - !!inc/file positron/roadname_major.yml
+  - !!inc/file positron/housenumber.yml
+id: voyager
+owner: Carto

assets/positron/aeroway-runway.yml

@@ -0,0 +1,26 @@
+id: aeroway-runway
+type: line
+source: carto
+source-layer: aeroway
+minzoom: 12
+filter:
+  - all
+  - - '=='
+    - class
+    - runway
+layout:
+  line-cap: square
+paint:
+  line-width:
+    stops:
+      - - 11
+        - 1
+      - - 13
+        - 4
+      - - 14
+        - 6
+      - - 15
+        - 8
+      - - 16
+        - 10
+  line-color: '#e8e8e8'

assets/positron/aeroway-taxiway.yml

@@ -0,0 +1,22 @@
+id: aeroway-taxiway
+type: line
+source: carto
+source-layer: aeroway
+minzoom: 13
+filter:
+  - all
+  - - '=='
+    - class
+    - taxiway
+paint:
+  line-color: '#e8e8e8'
+  line-width:
+    stops:
+      - - 13
+        - 0.5
+      - - 14
+        - 1
+      - - 15
+        - 2
+      - - 16
+        - 4

assets/positron/background.yml

@@ -0,0 +1,7 @@
+id: background
+type: background
+layout:
+  visibility: visible
+paint:
+  background-color: '#fafaf8'
+  background-opacity: 1

assets/positron/boundary_country_inner.yml

@@ -0,0 +1,33 @@
+id: boundary_country_inner
+type: line
+source: carto
+source-layer: boundary
+minzoom: 0
+filter:
+  - all
+  - - '=='
+    - admin_level
+    - 2
+  - - '=='
+    - maritime
+    - 0
+layout:
+  line-cap: round
+  line-join: round
+paint:
+  line-color:
+    stops:
+      - - 4
+        - '#f2e6e7'
+      - - 5
+        - '#ebd6d8'
+      - - 6
+        - '#ebd6d8'
+  line-opacity: 1
+  line-width:
+    stops:
+      - - 3
+        - 1
+      - - 6
+        - 1.5
+  line-offset: 0

assets/positron/boundary_country_outline.yml

@@ -0,0 +1,22 @@
+id: boundary_country_outline
+type: line
+source: carto
+source-layer: boundary
+minzoom: 6
+maxzoom: 24
+filter:
+  - all
+  - - '=='
+    - admin_level
+    - 2
+  - - '=='
+    - maritime
+    - 0
+layout:
+  line-cap: round
+  line-join: round
+paint:
+  line-color: '#f3efed'
+  line-opacity: 0.5
+  line-width: 8
+  line-offset: 0

assets/positron/boundary_county.yml

@@ -0,0 +1,36 @@
+id: boundary_county
+type: line
+source: carto
+source-layer: boundary
+minzoom: 9
+maxzoom: 24
+filter:
+  - all
+  - - '=='
+    - admin_level
+    - 6
+  - - '=='
+    - maritime
+    - 0
+paint:
+  line-color:
+    stops:
+      - - 4
+        - '#ead5d7'
+      - - 5
+        - '#ead5d7'
+      - - 6
+        - '#e1c5c7'
+  line-width:
+    stops:
+      - - 4
+        - 0.5
+      - - 7
+        - 1
+  line-dasharray:
+    stops:
+      - - 6
+        - - 1
+      - - 7
+        - - 2
+          - 2