Allow contributors to add points of interest

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
 
@@ -321,3 +321,34 @@ To test with a list of all the supported networks in the style this line can be
 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.
+
+### 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               | Scheme          | Color                                                                       | RGB         | Hex triplet |
+| ---------------------- | --------------- | --------------------------------------------------------------------------- | ----------- | ----------- |
+| Geographic Place Names | N/A             | <img src="doc-img/black.svg" height=18 width=50 /> Black                    | 0 0 0       | #000000     |
+| Infrastructure         | Pantone 294     | <img src="doc-img/pantone_294.svg" height=18 width=50 /> Blue               | 0 63 135    | #003f87     |
+| Consumer               | UTexas Orange   | <img src="doc-img/texas_orange.svg" height=18 width=50 /> Orange            | 191 87 0    | #bf5700     |
+| Outdoor                |                 | TBD (green?)                                                                |             |             |
+| Attraction             |                 | TBD (brown?)                                                                |             |             |
+| Transportation         | Medium Purple C | <img src="doc-img/pantone_medium_purple_c.svg" height=18 width=50 /> Purple | 78 0 142    | #4e008e     |
+| Knockout               |                 | <img src="doc-img/background.svg" height=18 width=50 /> Lt Grayish Orange   | 249 245 240 | #f9f5f0     |
+
+POIs without a background fill should have a 2px stroke using the "knockout" color above.

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

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,15 +144,15 @@
       "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",
       "value": "airfield",
       "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",

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%)";
 
-export const shields = {
+//TODO - rename this variable to "palette"
+export const palette = {
   black: "black",
   blue: "#003f87", // Pantone 294
   brown: "#693f23", // Pantone 469
   green: "#006747", // Pantone 342
   orange: "#f38f00", // Pantone 152
+  texas_orange: "#bf5700", // UTexas Orange
   pink: "#df4661", // Pantone 198
   purple: "#6d2077", // Pantone 259
   red: "#bf2033", // Pantone 187
@@ -39,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%)";
@@ -48,3 +64,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: palette.blue,
+  consumer: palette.texas_orange,
+  //outdoor:
+  //attraction:
+  transportation: `hsl(${hue.transport}, 100%, 28%)`,
+};

src/js/legend_config.js

@@ -8,6 +8,7 @@ import * as ConstructionLayers from "../layer/construction.js";
 import * as HighwayExitLayers from "../layer/highway_exit.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";
@@ -43,6 +44,10 @@ export const sections = [
     name: "Aviation",
     entries: AerowayLayers.legendEntries,
   },
+  {
+    name: "Points of interest",
+    entries: POILayers.legendEntries,
+  },
   {
     name: "Structures",
     entries: BuildingLayers.legendEntries,

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": [

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,

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", "pub"],
+  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", "subclass"],
+      [...iconDefs.bar],
+      Color.poi.consumer,
+      ["hospital", "parking"],
+      Color.poi.infrastructure,
+      Color.poi.infrastructure,
+    ],
+  },
+  filter: [
+    ">=",
+    ["zoom"],
+    [
+      "match",
+      ["get", "subclass"],
+      "hospital",
+      15,
+      [...iconDefs.bar],
+      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: "Hospital",
+    layers: [poi.id],
+    filter: ["==", ["get", "subclass"], iconDefs.hospital],
+  },
+  {
+    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],
+    filter: ["==", ["get", "subclass"], iconDefs.parking],
+  },
+];