From dd073f875de6d7aabf36f0494b9f67b517950cf1 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Tue, 10 Jan 2023 11:53:55 -0500 Subject: [PATCH 1/6] POI setup --- CONTRIBUTING.md | 33 +++++- dev/americana.gpl | 1 + doc-img/background.svg | 3 + doc-img/pantone_717C.svg | 3 + doc-img/pantone_medium_purple_c.svg | 3 + icons/airport.svg | 3 - icons/poi_health_cross.svg | 4 + icons/poi_hospital.svg | 4 + icons/poi_martini_glass.svg | 5 + ...ary_airport.svg => poi_military_plane.svg} | 2 +- icons/poi_p.svg | 3 + icons/poi_plane.svg | 3 + icons/poi_square_dot.svg | 3 + package-lock.json | 36 ++++++ scripts/taginfo_template.json | 6 +- src/constants/color.js | 18 +++ src/js/legend_config.js | 5 + src/layer/aeroway.js | 4 +- src/layer/index.js | 3 + src/layer/poi.js | 103 ++++++++++++++++++ 20 files changed, 235 insertions(+), 10 deletions(-) create mode 100644 doc-img/background.svg create mode 100644 doc-img/pantone_717C.svg create mode 100644 doc-img/pantone_medium_purple_c.svg delete mode 100644 icons/airport.svg create mode 100644 icons/poi_health_cross.svg create mode 100644 icons/poi_hospital.svg create mode 100644 icons/poi_martini_glass.svg rename icons/{military_airport.svg => poi_military_plane.svg} (63%) create mode 100644 icons/poi_p.svg create mode 100644 icons/poi_plane.svg create mode 100644 icons/poi_square_dot.svg create mode 100644 src/layer/poi.js diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d393fdc28..9a2ee4dcc 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -266,7 +266,7 @@ Additionally, **`refsByWayName`** is an object mapping way names to text that ca `refsByWayName` only works if there is no `ref` tag and the expression in the `routeConcurrency` function in layer/highway_shield.js includes the `name` property in the image name. The network needs to be listed as an input value that causes the `match` expression to append `name` to the image name. -When using `overrideByRef` or `refsByWayName`, make sure to add a line to the bottom section of this page explaining why it is necessary, as they are only intended for use in special cases. +When using `overrideByRef` or `refsByWayName`, make sure to add a line to the Special Cases section of this page explaining why it is necessary, as they are only intended for use in special cases. ### Banners @@ -304,6 +304,37 @@ This style strives to draw representative highway shields wherever they are tagg - **West Virginia County Routes**. The West Virginia Department of Transportation posts County Routes, which can have shields with two stacked numbers. For example, in Mercer County, County Route 460/1 is a branch off U.S. Route 460, and County Route 27/6 is a branch off County Route 27. These routes are correctly tagged `ref=460/1` and `ref=27/6` respectively, and shown on shields with the two numbers stacked vertically. - The [highway classification system of the United Kingdom](https://wiki.openstreetmap.org/wiki/Roads_in_the_United_Kingdom). In the UK, mappers need to and are able to tag the actual official road classifications independently of route networks. The color and style of route signage is based on a strict 1:1 correspondence with the `highway=*` value of the underlying road, and **not** based on M/A/B highway network type. While "M" roads are always motorways with blue route symbology, "A" roads can anything from primary through motorway, and thus may take one of three colors and may change along a single route. Even if mappers were to create route relations containing all roads with the same route number, these relations would not be usable for determining how to render route symbology. Additionally, there are no route concurrencies in the UK; all roads that are `highway=secondary` or higher carry a single `ref` value that can be directly rendered into a shield without pre-processing. There is established data consumers support for this highway classification-based symbology system, most notably OpenMapTiles, which has provided pseudo-network values for UK routes since the project's inception. Therefore, this project consumes the UK pseudo-network scheme established by OpenMapTiles and colors UK route network symbology strictly based on `highway=` consistent with UK signage. +## Points of Interest + +A "point of interest" or POI is any feature on the map represented by an icon on the map. + +### Categories + +POIs are broken down into the following broad categories, in order to constrain the number of colors shown on the map. Some features may not cleanly fit into one category or another. Contributors should consider other POIs in the category to determine which category is the best fit. + +- **Geographic Place Names**: labels associated with `place=` tags, for countries, cities, locations, etc. +- **Infrastructure**: features associated with public infrastructure, health, safety, or government. +- **Consumer**: businesses that provide services to the public, such as shops and restaurants. +- **Outdoor**: parks, nature reserves, and other outdoorsy features. +- **Attraction**: places where people go for entertainment, leisure, or curiosity. +- **Transportation**: places where people can access forms of transportation, such as airports, train stations, bus stops, and other public transit. + +### Color Scheme + +For consistency, POI icons should use the following color palette: + +| Category | Pantone | Color | RGB | Hex triplet | +| ---------------------- | --------------- | --------------------------------------------------------------------------- | ----------- | ----------- | +| Geographic Place Names | N/A | Black | 0 0 0 | #000000 | +| Infrastructure | 294 | Blue | 0 63 135 | #003f87 | +| Consumer | 717 C | Orange | 186 82 5 | #d65c05 | +| Outdoor | | TBD (green?) | | | +| Attraction | | TBD (brown?) | | | +| Transportation | Medium Purple C | Purple | 78 0 142 | #4e008e | +| Knockout | | Lt Grayish Orange | 249 245 240 | #f9f5f0 | + +POIs without a background fill should have a 2px stroke using the "knockout" color above. + ### Shield Test Gallery For testing out changes across a variety of different shield designs and ref lengths there is a shield test gallery available: diff --git a/dev/americana.gpl b/dev/americana.gpl index 0baf61589..9357ccc3c 100644 --- a/dev/americana.gpl +++ b/dev/americana.gpl @@ -10,5 +10,6 @@ Name: americana.gpl 196 214 0 Yellow-Green 223 70 97 Pink 243 143 0 Orange +186 82 5 Consumer POI Orange 255 205 0 Yellow 255 255 255 White diff --git a/doc-img/background.svg b/doc-img/background.svg new file mode 100644 index 000000000..d67350c0c --- /dev/null +++ b/doc-img/background.svg @@ -0,0 +1,3 @@ + + + diff --git a/doc-img/pantone_717C.svg b/doc-img/pantone_717C.svg new file mode 100644 index 000000000..d9f66cc3c --- /dev/null +++ b/doc-img/pantone_717C.svg @@ -0,0 +1,3 @@ + + + diff --git a/doc-img/pantone_medium_purple_c.svg b/doc-img/pantone_medium_purple_c.svg new file mode 100644 index 000000000..524589b04 --- /dev/null +++ b/doc-img/pantone_medium_purple_c.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/airport.svg b/icons/airport.svg deleted file mode 100644 index b43510b3f..000000000 --- a/icons/airport.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/icons/poi_health_cross.svg b/icons/poi_health_cross.svg new file mode 100644 index 000000000..c3a2b88fa --- /dev/null +++ b/icons/poi_health_cross.svg @@ -0,0 +1,4 @@ + + + + diff --git a/icons/poi_hospital.svg b/icons/poi_hospital.svg new file mode 100644 index 000000000..b866837ed --- /dev/null +++ b/icons/poi_hospital.svg @@ -0,0 +1,4 @@ + + + + diff --git a/icons/poi_martini_glass.svg b/icons/poi_martini_glass.svg new file mode 100644 index 000000000..5bf4f772a --- /dev/null +++ b/icons/poi_martini_glass.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/icons/military_airport.svg b/icons/poi_military_plane.svg similarity index 63% rename from icons/military_airport.svg rename to icons/poi_military_plane.svg index ded091132..4429823ed 100644 --- a/icons/military_airport.svg +++ b/icons/poi_military_plane.svg @@ -1,3 +1,3 @@ - + diff --git a/icons/poi_p.svg b/icons/poi_p.svg new file mode 100644 index 000000000..33b1c0ff6 --- /dev/null +++ b/icons/poi_p.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/poi_plane.svg b/icons/poi_plane.svg new file mode 100644 index 000000000..2af1cb35d --- /dev/null +++ b/icons/poi_plane.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/poi_square_dot.svg b/icons/poi_square_dot.svg new file mode 100644 index 000000000..0d62cb0e0 --- /dev/null +++ b/icons/poi_square_dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/package-lock.json b/package-lock.json index e23071176..54505e758 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1432,6 +1432,19 @@ "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz", "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==" }, + "node_modules/fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -3482,6 +3495,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "engines": { + "node": ">= 10.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -4674,6 +4695,16 @@ "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz", "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==" }, + "fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "requires": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + } + }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -6195,6 +6226,11 @@ "which-boxed-primitive": "^1.0.2" } }, + "universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==" + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/scripts/taginfo_template.json b/scripts/taginfo_template.json index c5b07b539..7cb977024 100644 --- a/scripts/taginfo_template.json +++ b/scripts/taginfo_template.json @@ -129,7 +129,7 @@ "object_types": ["node", "area"], "description": "Military air bases are marked by a fighter jet.", "doc_url": "https://openmaptiles.org/schema/#class", - "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/military_airport.svg" + "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_military_plane.svg" }, { "key": "aerodrome:type", @@ -144,7 +144,7 @@ "object_types": ["node", "area"], "description": "Military air bases are marked by a fighter jet.", "doc_url": "https://openmaptiles.org/schema/#class", - "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/military_airport.svg" + "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_military_plane.svg" }, { "key": "military", @@ -152,7 +152,7 @@ "object_types": ["node", "area"], "description": "Military air bases are marked by a fighter jet.", "doc_url": "https://openmaptiles.org/schema/#class", - "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/military_airport.svg" + "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_military_plane.svg" }, { "key": "aeroway", diff --git a/src/constants/color.js b/src/constants/color.js index bba97b525..b22973c0f 100644 --- a/src/constants/color.js +++ b/src/constants/color.js @@ -25,12 +25,14 @@ export const airportOutline = "hsl(250, 41%, 79%)"; export const airportRunway = "hsl(250, 41%, 79%)"; export const airportLabel = "hsl(250, 71%, 29%)"; +//TODO - rename this variable to "palette" export const shields = { black: "black", blue: "#003f87", // Pantone 294 brown: "#693f23", // Pantone 469 green: "#006747", // Pantone 342 orange: "#f38f00", // Pantone 152 + strong_orange: "#d45d00", // Pantone 717 C pink: "#df4661", // Pantone 198 purple: "#6d2077", // Pantone 259 red: "#bf2033", // Pantone 187 @@ -48,3 +50,19 @@ export const lightRailFill = "hsl(0, 0%, 50%)"; export const tramFill = "hsl(0, 0%, 60%)"; export const monorailFill = "hsl(0, 0%, 50%)"; export const funicularFill = "hsl(0, 0%, 50%)"; + +export const hue = { + tollRoad: 48, + park: 136, + water: 211, + transport: 273, + borderCasing: 281, +}; + +export const poi = { + infrastructure: shields.blue, + consumer: shields.strong_orange, + //outdoor: + //attraction: + transportation: `hsl(${hue.transport}, 100%, 28%)`, +}; diff --git a/src/js/legend_config.js b/src/js/legend_config.js index 2b32a7a21..69e4672c5 100644 --- a/src/js/legend_config.js +++ b/src/js/legend_config.js @@ -6,6 +6,7 @@ import * as BoundaryLayers from "../layer/boundary.js"; import * as RoadLayers from "../layer/road.js"; import * as ConstructionLayers from "../layer/construction.js"; import * as HighwayExitLayers from "../layer/highway_exit.js"; +import * as POILayers from "../layer/poi.js"; import * as RailLayers from "../layer/rail.js"; import * as AerowayLayers from "../layer/aeroway.js"; import * as ParkLayers from "../layer/park.js"; @@ -35,6 +36,10 @@ export const sections = [ name: "Route markers", source: "Wikidata", }, + { + name: "Points of interest", + entries: POILayers.legendEntries, + }, { name: "Railroads", entries: RailLayers.legendEntries, diff --git a/src/layer/aeroway.js b/src/layer/aeroway.js index 9af7a5859..b0232d988 100644 --- a/src/layer/aeroway.js +++ b/src/layer/aeroway.js @@ -15,8 +15,8 @@ const iconLayout = { "match", ["get", "class"], "military", - "military_airport", - "airport", + "poi_military_plane", + "poi_plane", ], "text-anchor": "bottom", "text-variable-anchor": [ diff --git a/src/layer/index.js b/src/layer/index.js index 8276ac008..18d13e407 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -11,6 +11,7 @@ import * as lyrLanduse from "./landuse.js"; import * as lyrOneway from "./oneway.js"; import * as lyrPark from "./park.js"; import * as lyrPlace from "./place.js"; +import * as lyrPoi from "./poi.js"; import * as lyrRail from "./rail.js"; import * as lyrRoad from "./road.js"; import * as lyrTransportationLabel from "./transportation_label.js"; @@ -218,6 +219,8 @@ export function build(locales) { lyrHighwayExit.exits, + lyrPoi.poi, + lyrPlace.state, lyrPlace.village, lyrPlace.town, diff --git a/src/layer/poi.js b/src/layer/poi.js new file mode 100644 index 000000000..95df38fbc --- /dev/null +++ b/src/layer/poi.js @@ -0,0 +1,103 @@ +import * as label from "../constants/label.js"; +import * as Color from "../constants/color.js"; + +var iconDefs = { + bar: ["bar", "beer"], + hospital: "hospital", + medical: ["doctors", "clinic"], + parking: "parking", +}; + +export const poi = { + id: "poi", + type: "symbol", + paint: { + "text-halo-color": Color.backgroundFill, + "text-halo-width": 1.5, + "icon-halo-width": 0.4, + "text-halo-blur": 1, + "icon-halo-blur": 0.2, + "text-color": [ + "match", + ["get", "class"], + ["bar", "beer"], + Color.poi.consumer, + ["hospital", "parking"], + Color.poi.infrastructure, + Color.poi.infrastructure, + ], + }, + filter: [ + ">=", + ["zoom"], + [ + "match", + ["get", "subclass"], + "hospital", + 15, + ["bar", "beer"], + 16, + ["clinic", "doctors", "parking"], + 17, + 99, + ], + ], + layout: { + "text-font": ["OpenHistorical"], + "icon-optional": false, + "text-size": { + base: 1.0, + stops: [ + [15, 10], + [17, 12], + ], + }, + "icon-image": [ + "match", + ["get", "subclass"], + iconDefs.bar, + "poi_martini_glass", + iconDefs.medical, + "poi_health_cross", + iconDefs.hospital, + "poi_hospital", + iconDefs.parking, + "poi_p", + "poi_square_dot", //icon for generic POI, not currently used + ], + "icon-size": 1.0, + "text-field": label.localizedName, + "text-variable-anchor": ["left", "right", "bottom"], + "text-justify": "auto", + "text-radial-offset": 1.2, + "text-max-width": 5, + "icon-padding": 0, + "text-padding": 0, + "icon-allow-overlap": false, + }, + source: "openmaptiles", + "source-layer": "poi", +}; + +export const legendEntries = [ + { + description: "Bar or pub", + layers: [poi.id], + filter: ["in", ["get", "subclass"], ["literal", iconDefs.bar]], + }, + { + description: "Hospital", + layers: [poi.id], + filter: ["==", ["get", "subclass"], iconDefs.hospital], + }, + { + description: "Medical facility", + layers: [poi.id], + filter: ["in", ["get", "subclass"], ["literal", iconDefs.medical]], + }, + { + description: "Parking", + layers: [poi.id], + filter: ["==", ["get", "subclass"], iconDefs.parking], + }, +]; From 107e5be9639a110b0bc584f7957ebfa70a5af2d2 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Tue, 10 Jan 2023 11:56:02 -0500 Subject: [PATCH 2/6] Re-order legend --- src/layer/poi.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/layer/poi.js b/src/layer/poi.js index 95df38fbc..19942bd1b 100644 --- a/src/layer/poi.js +++ b/src/layer/poi.js @@ -80,21 +80,21 @@ export const poi = { }; export const legendEntries = [ - { - description: "Bar or pub", - layers: [poi.id], - filter: ["in", ["get", "subclass"], ["literal", iconDefs.bar]], - }, { description: "Hospital", layers: [poi.id], filter: ["==", ["get", "subclass"], iconDefs.hospital], }, { - description: "Medical facility", + description: "Doctor's office or clinic", layers: [poi.id], filter: ["in", ["get", "subclass"], ["literal", iconDefs.medical]], }, + { + description: "Bar or pub", + layers: [poi.id], + filter: ["in", ["get", "subclass"], ["literal", iconDefs.bar]], + }, { description: "Parking", layers: [poi.id], From cf9dbf156c8676dcd4e312a8ec535f8e78f59349 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Tue, 10 Jan 2023 11:57:48 -0500 Subject: [PATCH 3/6] Re-order legend sections --- src/js/legend_config.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/js/legend_config.js b/src/js/legend_config.js index 69e4672c5..02e9170e3 100644 --- a/src/js/legend_config.js +++ b/src/js/legend_config.js @@ -6,9 +6,9 @@ import * as BoundaryLayers from "../layer/boundary.js"; import * as RoadLayers from "../layer/road.js"; import * as ConstructionLayers from "../layer/construction.js"; import * as HighwayExitLayers from "../layer/highway_exit.js"; -import * as POILayers from "../layer/poi.js"; import * as RailLayers from "../layer/rail.js"; import * as AerowayLayers from "../layer/aeroway.js"; +import * as POILayers from "../layer/poi.js"; import * as ParkLayers from "../layer/park.js"; import * as BuildingLayers from "../layer/building.js"; import * as WaterLayers from "../layer/water.js"; @@ -36,10 +36,6 @@ export const sections = [ name: "Route markers", source: "Wikidata", }, - { - name: "Points of interest", - entries: POILayers.legendEntries, - }, { name: "Railroads", entries: RailLayers.legendEntries, @@ -48,6 +44,10 @@ export const sections = [ name: "Aviation", entries: AerowayLayers.legendEntries, }, + { + name: "Points of interest", + entries: POILayers.legendEntries, + }, { name: "Structures", entries: BuildingLayers.legendEntries, From 7b4ef041042233503276f9d0f01a9d164cae5d14 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Tue, 10 Jan 2023 17:24:56 -0500 Subject: [PATCH 4/6] Refactor color file --- src/constants/color.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/constants/color.js b/src/constants/color.js index b22973c0f..e4b23544e 100644 --- a/src/constants/color.js +++ b/src/constants/color.js @@ -26,7 +26,7 @@ export const airportRunway = "hsl(250, 41%, 79%)"; export const airportLabel = "hsl(250, 71%, 29%)"; //TODO - rename this variable to "palette" -export const shields = { +export const palette = { black: "black", blue: "#003f87", // Pantone 294 brown: "#693f23", // Pantone 469 @@ -41,6 +41,20 @@ export const shields = { yellow_green: "#c4d600", // Pantone 382 }; +export const shields = { + black: palette.black, + blue: palette.blue, // Pantone 294 + brown: palette.brown, // Pantone 469 + green: palette.green, // Pantone 342 + orange: palette.orange, // Pantone 152 + pink: palette.pink, // Pantone 198 + purple: palette.purple, // Pantone 259 + red: palette.red, // Pantone 187 + white: palette.white, + yellow: palette.yellow, // Pantone 116 + yellow_green: palette.yellow_green, // Pantone 382 +}; + export const railwayTunnelFill = "hsl(0, 0%, 90%)"; export const railFill = "hsl(0, 0%, 60%)"; @@ -60,8 +74,8 @@ export const hue = { }; export const poi = { - infrastructure: shields.blue, - consumer: shields.strong_orange, + infrastructure: palette.blue, + consumer: palette.strong_orange, //outdoor: //attraction: transportation: `hsl(${hue.transport}, 100%, 28%)`, From 897573aa6d710dce4295f2bb28f7d82c0b8f7e91 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Tue, 10 Jan 2023 22:14:16 -0500 Subject: [PATCH 5/6] Update orange to UTexas --- CONTRIBUTING.md | 42 +++++++++---------- .../{pantone_717C.svg => texas_orange.svg} | 2 +- icons/poi_martini_glass.svg | 6 +-- src/constants/color.js | 4 +- src/layer/poi.js | 8 ++-- 5 files changed, 31 insertions(+), 31 deletions(-) rename doc-img/{pantone_717C.svg => texas_orange.svg} (64%) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 9a2ee4dcc..624cc913b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -304,6 +304,24 @@ This style strives to draw representative highway shields wherever they are tagg - **West Virginia County Routes**. The West Virginia Department of Transportation posts County Routes, which can have shields with two stacked numbers. For example, in Mercer County, County Route 460/1 is a branch off U.S. Route 460, and County Route 27/6 is a branch off County Route 27. These routes are correctly tagged `ref=460/1` and `ref=27/6` respectively, and shown on shields with the two numbers stacked vertically. - The [highway classification system of the United Kingdom](https://wiki.openstreetmap.org/wiki/Roads_in_the_United_Kingdom). In the UK, mappers need to and are able to tag the actual official road classifications independently of route networks. The color and style of route signage is based on a strict 1:1 correspondence with the `highway=*` value of the underlying road, and **not** based on M/A/B highway network type. While "M" roads are always motorways with blue route symbology, "A" roads can anything from primary through motorway, and thus may take one of three colors and may change along a single route. Even if mappers were to create route relations containing all roads with the same route number, these relations would not be usable for determining how to render route symbology. Additionally, there are no route concurrencies in the UK; all roads that are `highway=secondary` or higher carry a single `ref` value that can be directly rendered into a shield without pre-processing. There is established data consumers support for this highway classification-based symbology system, most notably OpenMapTiles, which has provided pseudo-network values for UK routes since the project's inception. Therefore, this project consumes the UK pseudo-network scheme established by OpenMapTiles and colors UK route network symbology strictly based on `highway=` consistent with UK signage. +### Shield Test Gallery + +For testing out changes across a variety of different shield designs and ref lengths there is a shield test gallery available: + +- In local development: http://localhost:1776/shieldtest.html +- On the public demo site: https://zelonewolf.github.io/openstreetmap-americana/shieldtest.html + +This aims to display a table of all the unique shield designs in the style with some example refs from 1 to 6 characters. The `networks` and `refs` arrays can be modified for testing with a different set of either: + +https://github.com/ZeLonewolf/openstreetmap-americana/blob/581e1e5d97f5745c1bf764689439d93403888505/src/shieldtest.js#L16-L31 +https://github.com/ZeLonewolf/openstreetmap-americana/blob/581e1e5d97f5745c1bf764689439d93403888505/src/shieldtest.js#L203-L218 + +To test with a list of all the supported networks in the style this line can be uncommented: + +https://github.com/ZeLonewolf/openstreetmap-americana/blob/581e1e5d97f5745c1bf764689439d93403888505/src/shieldtest.js#L200-L201 + +This results in a very long page and can be quite slow or even crash the browser tab. + ## Points of Interest A "point of interest" or POI is any feature on the map represented by an icon on the map. @@ -323,32 +341,14 @@ POIs are broken down into the following broad categories, in order to constrain For consistency, POI icons should use the following color palette: -| Category | Pantone | Color | RGB | Hex triplet | +| Category | Scheme | Color | RGB | Hex triplet | | ---------------------- | --------------- | --------------------------------------------------------------------------- | ----------- | ----------- | | Geographic Place Names | N/A | Black | 0 0 0 | #000000 | -| Infrastructure | 294 | Blue | 0 63 135 | #003f87 | -| Consumer | 717 C | Orange | 186 82 5 | #d65c05 | +| Infrastructure | Pantone 294 | Blue | 0 63 135 | #003f87 | +| Consumer | UTexas Orange | Orange | 191 87 0 | #bf5700 | | Outdoor | | TBD (green?) | | | | Attraction | | TBD (brown?) | | | | Transportation | Medium Purple C | Purple | 78 0 142 | #4e008e | | Knockout | | Lt Grayish Orange | 249 245 240 | #f9f5f0 | POIs without a background fill should have a 2px stroke using the "knockout" color above. - -### Shield Test Gallery - -For testing out changes across a variety of different shield designs and ref lengths there is a shield test gallery available: - -- In local development: http://localhost:1776/shieldtest.html -- On the public demo site: https://zelonewolf.github.io/openstreetmap-americana/shieldtest.html - -This aims to display a table of all the unique shield designs in the style with some example refs from 1 to 6 characters. The `networks` and `refs` arrays can be modified for testing with a different set of either: - -https://github.com/ZeLonewolf/openstreetmap-americana/blob/581e1e5d97f5745c1bf764689439d93403888505/src/shieldtest.js#L16-L31 -https://github.com/ZeLonewolf/openstreetmap-americana/blob/581e1e5d97f5745c1bf764689439d93403888505/src/shieldtest.js#L203-L218 - -To test with a list of all the supported networks in the style this line can be uncommented: - -https://github.com/ZeLonewolf/openstreetmap-americana/blob/581e1e5d97f5745c1bf764689439d93403888505/src/shieldtest.js#L200-L201 - -This results in a very long page and can be quite slow or even crash the browser tab. diff --git a/doc-img/pantone_717C.svg b/doc-img/texas_orange.svg similarity index 64% rename from doc-img/pantone_717C.svg rename to doc-img/texas_orange.svg index d9f66cc3c..e4b96620b 100644 --- a/doc-img/pantone_717C.svg +++ b/doc-img/texas_orange.svg @@ -1,3 +1,3 @@ - + diff --git a/icons/poi_martini_glass.svg b/icons/poi_martini_glass.svg index 5bf4f772a..5c4cba00b 100644 --- a/icons/poi_martini_glass.svg +++ b/icons/poi_martini_glass.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/constants/color.js b/src/constants/color.js index e4b23544e..e574b411b 100644 --- a/src/constants/color.js +++ b/src/constants/color.js @@ -32,7 +32,7 @@ export const palette = { brown: "#693f23", // Pantone 469 green: "#006747", // Pantone 342 orange: "#f38f00", // Pantone 152 - strong_orange: "#d45d00", // Pantone 717 C + texas_orange: "#bf5700", // UTexas Orange pink: "#df4661", // Pantone 198 purple: "#6d2077", // Pantone 259 red: "#bf2033", // Pantone 187 @@ -75,7 +75,7 @@ export const hue = { export const poi = { infrastructure: palette.blue, - consumer: palette.strong_orange, + consumer: palette.texas_orange, //outdoor: //attraction: transportation: `hsl(${hue.transport}, 100%, 28%)`, diff --git a/src/layer/poi.js b/src/layer/poi.js index 19942bd1b..391afc7f4 100644 --- a/src/layer/poi.js +++ b/src/layer/poi.js @@ -2,7 +2,7 @@ import * as label from "../constants/label.js"; import * as Color from "../constants/color.js"; var iconDefs = { - bar: ["bar", "beer"], + bar: ["bar", "beer", "pub"], hospital: "hospital", medical: ["doctors", "clinic"], parking: "parking", @@ -19,8 +19,8 @@ export const poi = { "icon-halo-blur": 0.2, "text-color": [ "match", - ["get", "class"], - ["bar", "beer"], + ["get", "subclass"], + [...iconDefs.bar], Color.poi.consumer, ["hospital", "parking"], Color.poi.infrastructure, @@ -35,7 +35,7 @@ export const poi = { ["get", "subclass"], "hospital", 15, - ["bar", "beer"], + [...iconDefs.bar], 16, ["clinic", "doctors", "parking"], 17, From 353485f292198fd77211742bf8fd95ebbe7a031d Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Tue, 10 Jan 2023 22:45:59 -0500 Subject: [PATCH 6/6] Coffee shops --- icons/poi_coffee_cup.svg | 4 ++++ src/layer/poi.js | 12 ++++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 icons/poi_coffee_cup.svg diff --git a/icons/poi_coffee_cup.svg b/icons/poi_coffee_cup.svg new file mode 100644 index 000000000..defeb2415 --- /dev/null +++ b/icons/poi_coffee_cup.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/layer/poi.js b/src/layer/poi.js index 391afc7f4..9d090a537 100644 --- a/src/layer/poi.js +++ b/src/layer/poi.js @@ -3,6 +3,7 @@ import * as Color from "../constants/color.js"; var iconDefs = { bar: ["bar", "beer", "pub"], + coffee: ["cafe"], hospital: "hospital", medical: ["doctors", "clinic"], parking: "parking", @@ -20,7 +21,7 @@ export const poi = { "text-color": [ "match", ["get", "subclass"], - [...iconDefs.bar], + [...iconDefs.bar, ...iconDefs.coffee], Color.poi.consumer, ["hospital", "parking"], Color.poi.infrastructure, @@ -35,7 +36,7 @@ export const poi = { ["get", "subclass"], "hospital", 15, - [...iconDefs.bar], + [...iconDefs.bar, ...iconDefs.coffee], 16, ["clinic", "doctors", "parking"], 17, @@ -57,6 +58,8 @@ export const poi = { ["get", "subclass"], iconDefs.bar, "poi_martini_glass", + iconDefs.coffee, + "poi_coffee_cup", iconDefs.medical, "poi_health_cross", iconDefs.hospital, @@ -90,6 +93,11 @@ export const legendEntries = [ layers: [poi.id], filter: ["in", ["get", "subclass"], ["literal", iconDefs.medical]], }, + { + description: "Coffee shop", + layers: [poi.id], + filter: ["in", ["get", "subclass"], ["literal", iconDefs.coffee]], + }, { description: "Bar or pub", layers: [poi.id],