From 6b21ee84f9cdd85da43309900e1c252fc8ab8360 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Mon, 16 May 2022 22:21:12 -0400 Subject: [PATCH 1/8] Initial implementation with unified park rendering --- style/americana.js | 2 ++ style/icons/cemetery.svg | 5 ++++ style/layer/park.js | 62 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 69 insertions(+) create mode 100644 style/icons/cemetery.svg diff --git a/style/americana.js b/style/americana.js index 4ceb468f2..e054bd88a 100644 --- a/style/americana.js +++ b/style/americana.js @@ -37,6 +37,7 @@ americanaLayers.push( lyrPark.fill, lyrAeroway.fill, lyrPark.parkFill, + lyrPark.cemeteryFill, lyrBoundary.countyCasing, lyrBoundary.stateCasing, @@ -263,6 +264,7 @@ americanaLayers.push( lyrPark.label, lyrPark.parkLabel, + lyrPark.cemeteryLabel, /* The ref label shows up at lower zoom levels and when the long name doesn't fit */ lyrAeroway.airportRefLabel, lyrAeroway.minorAirportRefLabel, diff --git a/style/icons/cemetery.svg b/style/icons/cemetery.svg new file mode 100644 index 000000000..57dc496ba --- /dev/null +++ b/style/icons/cemetery.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/style/layer/park.js b/style/layer/park.js index a2bea3004..4020aba54 100644 --- a/style/layer/park.js +++ b/style/layer/park.js @@ -75,6 +75,21 @@ export const parkFill = { "source-layer": "landcover", }; +export const cemeteryFill = { + id: "cemetery-fill", + type: "fill", + filter: ["==", "class", "cemetery"], + paint: { + "fill-color": Color.parkFill, + }, + layout: { + visibility: "visible", + }, + source: "openmaptiles", + metadata: {}, + "source-layer": "landuse", +}; + export const parkOutline = { id: "park-outline", type: "line", @@ -90,6 +105,21 @@ export const parkOutline = { "source-layer": "landcover", }; +export const cemeteryOutline = { + id: "cemetery-outline", + type: "line", + filter: ["==", "class", "cemetery"], + paint: { + "line-color": Color.parkOutline, + }, + layout: { + visibility: "visible", + }, + source: "openmaptiles", + metadata: {}, + "source-layer": "landuse", +}; + export const parkLabel = { id: "park-label", type: "symbol", @@ -111,3 +141,35 @@ export const parkLabel = { metadata: {}, "source-layer": "poi", }; + +export const cemeteryLabel = { + id: "cemetery-label", + type: "symbol", + filter: ["==", "class", "cemetery"], + paint: { + "text-color": Color.parkLabel, + "text-halo-blur": 1, + "text-halo-color": "rgba(255, 255, 255, 1)", + "text-halo-width": 1, + }, + layout: { + visibility: "visible", + "text-field": name_en, + "text-font": ["Metropolis Bold"], + "text-size": 10, + "icon-image": "cemetery", + "text-anchor": "bottom", + "text-variable-anchor": [ + "bottom", + "bottom-right", + "bottom-left", + "right", + "left", + ], + "text-padding": 8, + "icon-allow-overlap": false, + }, + source: "openmaptiles", + metadata: {}, + "source-layer": "poi", +}; From 930fbe81f62ad9d3ccc2bb5beafab3ce7266b5c7 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Sat, 14 Jan 2023 17:32:21 -0500 Subject: [PATCH 2/8] Darken cemetery landuse --- src/constants/color.js | 3 +++ src/layer/index.js | 2 ++ src/layer/park.js | 4 ++-- src/layer/poi.js | 13 +++++++++---- 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/constants/color.js b/src/constants/color.js index f04109f64..3baeacdec 100644 --- a/src/constants/color.js +++ b/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%)"; diff --git a/src/layer/index.js b/src/layer/index.js index 18d13e407..cdc6cf1f4 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -33,6 +33,7 @@ export function build(locales) { lyrLanduse.urbanizedArea, lyrPark.fill, lyrAeroway.fill, + lyrPark.cemeteryFill, lyrPark.parkFill, lyrBoundary.countyCasing, @@ -48,6 +49,7 @@ export function build(locales) { lyrPark.outline, lyrAeroway.outline, lyrPark.parkOutline, + lyrPark.cemeteryOutline, lyrBoundary.city, lyrBoundary.county, diff --git a/src/layer/park.js b/src/layer/park.js index f27998a1f..53fbedff1 100644 --- a/src/layer/park.js +++ b/src/layer/park.js @@ -56,7 +56,7 @@ export const cemeteryFill = { type: "fill", filter: ["==", "class", "cemetery"], paint: { - "fill-color": Color.parkFill, + "fill-color": Color.cemeteryFill, }, layout: { visibility: "visible", @@ -78,7 +78,7 @@ export const cemeteryOutline = { type: "line", filter: ["==", "class", "cemetery"], paint: { - "line-color": Color.parkOutline, + "line-color": Color.cemeteryOutline, }, layout: { visibility: "visible", diff --git a/src/layer/poi.js b/src/layer/poi.js index 569fc4c48..2c15f10d1 100644 --- a/src/layer/poi.js +++ b/src/layer/poi.js @@ -3,7 +3,7 @@ import * as Color from "../constants/color.js"; var iconDefs = { bar: ["bar", "beer", "pub"], - cemetery: ["cemetery"], + cemetery: "cemetery", coffee: ["cafe"], hospital: "hospital", medical: ["doctors", "clinic"], @@ -25,9 +25,9 @@ export const poi = { [...iconDefs.bar, ...iconDefs.coffee], Color.poi.consumer, ["hospital", "parking"], - Color.poi.outdoor, - ["cemetery"], Color.poi.infrastructure, + ["cemetery"], + Color.poi.outdoor, Color.poi.infrastructure, ], }, @@ -39,7 +39,7 @@ export const poi = { ["get", "subclass"], "hospital", 15, - [...iconDefs.bar, ...iconDefs.coffee], + [...iconDefs.bar, ...iconDefs.coffee, iconDefs.cemetery], 16, ["clinic", "doctors", "parking"], 17, @@ -98,6 +98,11 @@ export const legendEntries = [ layers: [poi.id], filter: ["in", ["get", "subclass"], ["literal", iconDefs.medical]], }, + { + description: "Cemetery", + layers: [poi.id], + filter: ["in", ["get", "subclass"], ["literal", iconDefs.cemetery]], + }, { description: "Coffee shop", layers: [poi.id], From 8ae1073edfae9bac88f76cfd98402654d4f6af38 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Sat, 14 Jan 2023 18:07:32 -0500 Subject: [PATCH 3/8] Prettier --- icons/poi_gravestone.svg | 6 ++---- src/layer/park.js | 4 +--- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/icons/poi_gravestone.svg b/icons/poi_gravestone.svg index 57dc496ba..14ce1f5ac 100644 --- a/icons/poi_gravestone.svg +++ b/icons/poi_gravestone.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/src/layer/park.js b/src/layer/park.js index 53fbedff1..727bc1978 100644 --- a/src/layer/park.js +++ b/src/layer/park.js @@ -100,7 +100,5 @@ export const legendEntries = [ description: "Park", layers: [fill.id, outline.id, parkFill.id, parkOutline.id], }, - { description: "Cemetery", - layers: [cemeteryFill.id, cemeteryOutline.id], - } + { description: "Cemetery", layers: [cemeteryFill.id, cemeteryOutline.id] }, ]; From d2f4d6c7a93dae2484dd47786ac2f41b8fac25fe Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Thu, 22 Jun 2023 16:01:07 -0400 Subject: [PATCH 4/8] Prettier --- src/layer/poi.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/layer/poi.js b/src/layer/poi.js index b7ff289d1..ec6ed958a 100644 --- a/src/layer/poi.js +++ b/src/layer/poi.js @@ -37,11 +37,11 @@ var iconDefs = { }, cemetery: { classes: { - cemetery: ["cemetery"] + cemetery: ["cemetery"], }, sprite: "poi_cemetery", color: Color.poi.outdoor, - decription: "Cemeter" + decription: "Cemeter", }, coffee: { classes: { @@ -213,7 +213,11 @@ export const poi = { "tram_stop", ], 15, - [...getSubclasses(iconDefs.bar), ...getSubclasses(iconDefs.coffee), ...getSubclasses(iconDefs.cemetery)], + [ + ...getSubclasses(iconDefs.bar), + ...getSubclasses(iconDefs.coffee), + ...getSubclasses(iconDefs.cemetery), + ], 16, ["clinic", "doctors", "parking"], 17, From 931f350bf388b7f54a4a51ceba95505924d0656c Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Fri, 22 Dec 2023 19:35:31 -0500 Subject: [PATCH 5/8] Update poi.js Fix typo --- src/layer/poi.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layer/poi.js b/src/layer/poi.js index 97faeedab..4a254115c 100644 --- a/src/layer/poi.js +++ b/src/layer/poi.js @@ -41,7 +41,7 @@ var iconDefs = { }, sprite: "poi_cemetery", color: Color.poi.outdoor, - decription: "Cemeter", + decription: "Cemetery", }, coffee: { classes: { From 00424543eb42b777bca3101d19eae2b6a1624eff Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Fri, 22 Dec 2023 19:51:13 -0500 Subject: [PATCH 6/8] Remove icon coloration --- icons/poi_gravestone.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/icons/poi_gravestone.svg b/icons/poi_gravestone.svg index 14ce1f5ac..2abd5eb25 100644 --- a/icons/poi_gravestone.svg +++ b/icons/poi_gravestone.svg @@ -1,3 +1,3 @@ - + From 1f5ff83f7cd8fb3afd7dfb808ca7eaf4424a10a3 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Fri, 22 Dec 2023 20:41:56 -0500 Subject: [PATCH 7/8] POI typescript conversion and fix cemetery typo --- shieldlib/src/shield_renderer.ts | 2 +- src/js/poi.js | 41 -------------------- src/js/poi.ts | 66 ++++++++++++++++++++++++++++++++ src/layer/poi.js | 2 +- 4 files changed, 68 insertions(+), 43 deletions(-) delete mode 100644 src/js/poi.js create mode 100644 src/js/poi.ts diff --git a/shieldlib/src/shield_renderer.ts b/shieldlib/src/shield_renderer.ts index 3596d0875..cc8c30e93 100644 --- a/shieldlib/src/shield_renderer.ts +++ b/shieldlib/src/shield_renderer.ts @@ -245,7 +245,7 @@ export class AbstractShieldRenderer { } /** Get a blank route shield graphics context in a specified size */ - public createGraphics(bounds: Bounds) { + public createGraphics(bounds: Bounds): CanvasRenderingContext2D { return this._renderContext.gfxFactory.createGraphics(bounds); } diff --git a/src/js/poi.js b/src/js/poi.js deleted file mode 100644 index ff3bc6c7c..000000000 --- a/src/js/poi.js +++ /dev/null @@ -1,41 +0,0 @@ -import { transposeImageData } from "@americana/maplibre-shield-generator"; - -export function missingIconHandler(shieldRenderer, map, e) { - try { - missingIconLoader(shieldRenderer, map, e); - } catch (err) { - console.error(`Exception while loading image ‘${e?.id}’:\n`, err); - } -} - -export function missingIconLoader(shieldRenderer, map, e) { - var sprite = e.id.split("\n")[1].split("=")[1]; - var color = e.id.split("\n")[2].split("=")[1]; - - var sourceSprite = map.style.getImage(sprite); - - var width = sourceSprite.data.width; - var height = sourceSprite.data.height; - - var ctx = shieldRenderer.createGraphics({ width, height }); - transposeImageData(ctx, sourceSprite, 0, false, color); - - if (ctx == null) { - // Want to return null here, but that gives a corrupted display. See #243 - console.warn("Didn't produce an icon for", JSON.stringify(e.id)); - ctx = shieldRenderer.createGraphics({ width: 1, height: 1 }); - } - - const imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); - map.addImage( - e.id, - { - width: ctx.canvas.width, - height: ctx.canvas.height, - data: imgData.data, - }, - { - pixelRatio: shieldRenderer.pixelRatio(), - } - ); -} diff --git a/src/js/poi.ts b/src/js/poi.ts new file mode 100644 index 000000000..8f6da6688 --- /dev/null +++ b/src/js/poi.ts @@ -0,0 +1,66 @@ +import { + transposeImageData, + AbstractShieldRenderer, +} from "@americana/maplibre-shield-generator"; +import { Map, MapStyleImageMissingEvent, StyleImage } from "maplibre-gl"; + +export function missingIconHandler( + shieldRenderer: AbstractShieldRenderer, + map: Map, + e: MapStyleImageMissingEvent +) { + try { + missingIconLoader(shieldRenderer, map, e); + } catch (err) { + console.error(`Exception while loading image ‘${e?.id}’:\n`, err); + } +} + +export function missingIconLoader( + shieldRenderer: AbstractShieldRenderer, + map: Map, + e: MapStyleImageMissingEvent +) { + const sprite: string = e.id.split("\n")[1].split("=")[1]; + const color: string = e.id.split("\n")[2].split("=")[1]; + + const sourceSprite: StyleImage = map.style.getImage(sprite); + + if (!sourceSprite) { + console.error(`No such sprite ${sprite}`); + return; + } + + const width: number = sourceSprite.data.width; + const height: number = sourceSprite.data.height; + + let ctx: CanvasRenderingContext2D = shieldRenderer.createGraphics({ + width, + height, + }); + transposeImageData(ctx, sourceSprite, 0, false, color); + + if (ctx == null) { + // Want to return null here, but that gives a corrupted display. See #243 + console.warn("Didn't produce an icon for", JSON.stringify(e.id)); + ctx = shieldRenderer.createGraphics({ width: 1, height: 1 }); + } + + const imgData: ImageData = ctx.getImageData( + 0, + 0, + ctx.canvas.width, + ctx.canvas.height + ); + map.addImage( + e.id, + { + width: ctx.canvas.width, + height: ctx.canvas.height, + data: imgData.data, + }, + { + pixelRatio: shieldRenderer.pixelRatio(), + } + ); +} diff --git a/src/layer/poi.js b/src/layer/poi.js index 4a254115c..c6a9ff369 100644 --- a/src/layer/poi.js +++ b/src/layer/poi.js @@ -39,7 +39,7 @@ var iconDefs = { classes: { cemetery: ["cemetery"], }, - sprite: "poi_cemetery", + sprite: "poi_gravestone", color: Color.poi.outdoor, decription: "Cemetery", }, From e1dc36f6a78ae8b7d3a86fa886d30ca4f10bdaa2 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Sun, 19 May 2024 19:04:06 -0400 Subject: [PATCH 8/8] Prettier --- src/layer/poi.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layer/poi.js b/src/layer/poi.js index f2465cbeb..3b4260174 100644 --- a/src/layer/poi.js +++ b/src/layer/poi.js @@ -66,7 +66,7 @@ var iconDefs = { sprite: "poi_gravestone", color: Color.poi.outdoor, decription: "Cemetery", - }, + }, taxi: { classes: { office: ["taxi"],