👻 Cemeteries

src/constants/color.js

@@ -15,8 +15,11 @@ export const hueBorderCasing = 281;
 export const border = "hsl(0, 2%, 47%)";
 export const borderCasing = `hsl(${hueBorderCasing}, 35%, 86%)`;
 
+//Greenspace colors
 export const parkFill = "hsl(136, 41%, 89%)";
+export const cemeteryFill = "hsl(136, 41%, 80%)";
 export const parkOutline = "hsla(136, 41%, 70%, 50%)";
+export const cemeteryOutline = "hsla(136, 41%, 70%, 40%)";
 export const parkLabel = "hsl(136, 71%, 29%)";
 export const parkLabelHalo = "hsl(90, 27%, 94%)";
 
@@ -84,7 +87,7 @@ export const hue = {
 export const poi = {
   infrastructure: palette.blue,
   consumer: palette.texas_orange,
-  //outdoor:
+  outdoor: palette.green,
   attraction: palette.brown,
   airport: `hsl(${hue.airport}, 100%, 28%)`,
   transport: palette.mauve,

src/layer/index.js

@@ -34,6 +34,7 @@ export function build(locales) {
     lyrLanduse.urbanizedArea,
     lyrPark.fill,
     lyrAeroway.fill,
+    lyrPark.cemeteryFill,
     lyrPark.parkFill,
 
     lyrBoundary.countyCasing,
@@ -50,6 +51,7 @@ export function build(locales) {
     lyrPark.outline,
     lyrAeroway.outline,
     lyrPark.parkOutline,
+    lyrPark.cemeteryOutline,
 
     lyrBoundary.city,
     lyrBoundary.county,

src/layer/park.js

@@ -55,13 +55,43 @@ export const parkFill = {
   "source-layer": "landcover",
 };
 
+export const cemeteryFill = {
+  id: "cemetery-fill",
+  type: "fill",
+  filter: ["==", "class", "cemetery"],
+  paint: {
+    "fill-color": Color.cemeteryFill,
+  },
+  layout: {
+    visibility: "visible",
+  },
+  source: "openmaptiles",
+  metadata: {},
+  "source-layer": "landuse",
+};
+
 export const parkOutline = {
   ...outline,
   id: "park_outline",
   filter: ["==", ["get", "subclass"], "park"],
   "source-layer": "landcover",
 };
 
+export const cemeteryOutline = {
+  id: "cemetery-outline",
+  type: "line",
+  filter: ["==", "class", "cemetery"],
+  paint: {
+    "line-color": Color.cemeteryOutline,
+  },
+  layout: {
+    visibility: "visible",
+  },
+  source: "openmaptiles",
+  metadata: {},
+  "source-layer": "landuse",
+};
+
 export const parkLabel = {
   ...label,
   id: "park_label",
@@ -74,4 +104,5 @@ export const legendEntries = [
     description: "Park",
     layers: [fill.id, outline.id, parkFill.id, parkOutline.id],
   },
+  { description: "Cemetery", layers: [cemeteryFill.id, cemeteryOutline.id] },
 ];

src/layer/poi.js

@@ -59,6 +59,14 @@ var iconDefs = {
     color: Color.poi.consumer,
     description: "Car dealership",
   },
+  cemetery: {
+    classes: {
+      cemetery: ["cemetery"],
+    },
+    sprite: "poi_gravestone",
+    color: Color.poi.outdoor,
+    decription: "Cemetery",
+  },
   taxi: {
     classes: {
       office: ["taxi"],
@@ -378,6 +386,8 @@ export const poi = {
         ...getSubclasses(iconDefs.pow_taoist),
       ],
       Color.poi.infrastructure,
+      ["cemetery"],
+      Color.poi.outdoor,
       Color.poi.infrastructure,
     ],
   },
@@ -419,6 +429,7 @@ export const poi = {
       [
         ...getSubclasses(iconDefs.bar),
         ...getSubclasses(iconDefs.bookstore),
+        ...getSubclasses(iconDefs.cemetery),
         ...getSubclasses(iconDefs.coffee),
         ...getSubclasses(iconDefs.car_shop),
         ...getSubclasses(iconDefs.car_repair),