skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 11 Packages Wiki Activity Actions 1

Map pins: use a single generic 🛹 glyph instead of per-category emojis

Browse source 
Replaced the per-category emoji map (street/park/DIY/plaza/transition) with one
generic skateboard glyph on every spot pin, per request. The pin's crisp shape,
tight halo and shelter roof-cap (covered/indoor) are unchanged. Dropped the now-
unused `category` option from createSkateSpotIcon and its call sites.

Build clean; the earlier "CATEGORY_GLYPH is not defined" console errors were
from a stale intermediate bundle and do not occur in the current build.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-09-10 18:50:34 +07:00
parent 345af97788
commit a40c86e655
1 changed files with 7 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/SpotMap.tsx
View file

@ -64,19 +64,14 @@ const defaultIcon = L.icon({
L.Marker.prototype.options.icon = defaultIcon; L.Marker.prototype.options.icon = defaultIcon;
/** Emoji glyph per spot category — turns the map into a readable language. */ /** Emoji glyph per spot category — turns the map into a readable language. */
const CATEGORY_GLYPH: Record<string, string> = { /** A single generic glyph for every skate-spot pin (kept intentionally simple). */
street: '🛹', const SPOT_GLYPH = '🛹';
park: '🏞️',
diy: '🔧',
plaza: '🏛️',
transition: '🌊',
};
/** /**
* Crisp skate-spot marker: a solid neon teardrop with a TIGHT glow halo (the * Crisp skate-spot marker: a solid neon teardrop with a TIGHT glow halo (the
* glow is an accent, not the whole blob), a category emoji inside so the pin is * glow is an accent, not the whole blob), a generic skate glyph inside, and —
* readable at a glance, and — for covered/indoor spots — a small roof "cap" so * for covered/indoor spots — a small roof "cap" so dry spots literally stand
* dry spots literally stand out on a rainy day. * out on a rainy day.
* *
* `weatherColor`/`weatherIcon` (when the weather layer is on) still override the * `weatherColor`/`weatherIcon` (when the weather layer is on) still override the
* fill + add the condition badge, exactly as before. * fill + add the condition badge, exactly as before.
@ -84,16 +79,15 @@ const CATEGORY_GLYPH: Record<string, string> = {
const createSkateSpotIcon = (opts?: { const createSkateSpotIcon = (opts?: {
weatherColor?: string; weatherColor?: string;
weatherIcon?: string; weatherIcon?: string;
category?: string;
shelter?: 'outdoor' | 'partial' | 'covered' | 'indoor'; shelter?: 'outdoor' | 'partial' | 'covered' | 'indoor';
}) => { }) => {
const { weatherColor, weatherIcon, category, shelter } = opts ?? {}; const { weatherColor, weatherIcon, shelter } = opts ?? {};
const fill = weatherColor const fill = weatherColor
? `background: ${weatherColor};` ? `background: ${weatherColor};`
: 'background: linear-gradient(135deg, #ff0040, #ff6600);'; : 'background: linear-gradient(135deg, #ff0040, #ff6600);';
const glowColor = weatherColor || '#ff0040'; const glowColor = weatherColor || '#ff0040';
const glyph = (category && CATEGORY_GLYPH[category]) || '🛹'; const glyph = SPOT_GLYPH;
const isSheltered = shelter === 'covered' || shelter === 'indoor'; const isSheltered = shelter === 'covered' || shelter === 'indoor';
// Roof cap for covered/indoor spots — a small cyan "dry" marker that sits // Roof cap for covered/indoor spots — a small cyan "dry" marker that sits
@ -1098,7 +1092,6 @@ export function SpotMap({
icon = createSkateSpotIcon({ icon = createSkateSpotIcon({
weatherColor: spotWeather?.skateability.color, weatherColor: spotWeather?.skateability.color,
weatherIcon: spotWeather?.weather.weatherIcon, weatherIcon: spotWeather?.weather.weatherIcon,
category: primarySpot?.category,
shelter: primarySpot?.shelter, shelter: primarySpot?.shelter,
}); });
} else if (!hasSpots && hasGear) { } else if (!hasSpots && hasGear) {
@ -1110,7 +1103,6 @@ export function SpotMap({
icon = createSkateSpotIcon({ icon = createSkateSpotIcon({
weatherColor: spotWeather?.skateability.color, weatherColor: spotWeather?.skateability.color,
weatherIcon: spotWeather?.weather.weatherIcon, weatherIcon: spotWeather?.weather.weatherIcon,
category: primarySpot?.category,
shelter: primarySpot?.shelter, shelter: primarySpot?.shelter,
}); });
} }