Add icons to search result markers

app/components/map.gjs

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import { modifier } from 'ember-modifier';
 import 'ol/ol.css';
-import Map from 'ol/Map.js';
+import OlMap from 'ol/Map.js';
 import { defaults as defaultControls, Control } from 'ol/control.js';
 import { defaults as defaultInteractions, DragPan } from 'ol/interaction.js';
 import Kinetic from 'ol/Kinetic.js';
@@ -18,6 +18,8 @@ import Point from 'ol/geom/Point.js';
 import Geolocation from 'ol/Geolocation.js';
 import { Style, Circle, Fill, Stroke, Icon } from 'ol/style.js';
 import { apply } from 'ol-mapbox-style';
+import { getIcon } from '../utils/icons';
+import { getIconNameForTags } from '../utils/osm-icons';
 
 export default class MapComponent extends Component {
   @service osm;
@@ -113,15 +115,66 @@ export default class MapComponent extends Component {
 
     // Create a vector source and layer for search results
     this.searchResultsSource = new VectorSource();
-    let cachedSearchResultSvgUrl = null;
+    const cachedIconUrls = new Map();
 
-      const searchResultStyle = (feature) => {
+    const searchResultStyle = (feature) => {
-      if (!cachedSearchResultSvgUrl) {
+      const originalPlace = feature.get('originalPlace');
+      // Some search results might be just the place object without separate tags
+      // If it's a raw place object, it might have osmTags property.
+      // Or it might be the tags object itself.
+      const tags = originalPlace.osmTags || originalPlace;
+      const iconName = getIconNameForTags(tags);
+
+      // Use 'default' key for the standard red dot marker. Use iconName as key if present.
+      const cacheKey = iconName || 'default';
+
+      if (!cachedIconUrls.has(cacheKey)) {
         const markerColor =
           getComputedStyle(document.documentElement)
             .getPropertyValue('--marker-color-primary')
             .trim() || '#ea4335';
 
+        // Default content: Red circle
+        let innerContent = `<circle cx="12" cy="12" r="8" fill="${markerColor}"/>`;
+
+        if (iconName) {
+          const rawSvg = getIcon(iconName);
+          if (rawSvg) {
+            // Pinhead icons are usually 15x15 viewBox="0 0 15 15".
+            // We want to center it on 12,12.
+            // A 12x12 icon centered at 12,12 means top-left at 6,6.
+            // However, since we are embedding a new SVG, we can just use x/y/width/height.
+            // But we need to strip the outer <svg> tag to embed the paths cleanly if we want full control,
+            // or we can nest the SVG. Nesting is safer.
+
+            // The rawSvg string contains <svg ...>...</svg>.
+            // We want to make it white. We can add a group with fill="white".
+            // But if the SVG has fill attributes, they override. Pinhead icons usually don't have fills.
+
+            // Let's strip the outer SVG tag to get the path content.
+            let content = rawSvg.trim();
+            const svgStart = content.indexOf('<svg');
+            const svgEnd = content.indexOf('>', svgStart);
+            const contentStart = svgEnd + 1;
+            const contentEnd = content.lastIndexOf('</svg>');
+
+            if (svgStart !== -1 && contentEnd !== -1) {
+              content = content.substring(contentStart, contentEnd);
+            }
+
+            // We render the red circle background, then the icon on top.
+            // Icon is scaled down slightly to fit nicely inside the circle.
+            // 15x15 scaled by 0.8 is 12x12.
+            // Translate to 6,6 to center.
+            innerContent = `
+              <circle cx="12" cy="12" r="8" fill="${markerColor}"/>
+              <g transform="translate(6, 6) scale(0.8)" fill="white">
+                ${content}
+              </g>
+            `;
+          }
+        }
+
         const svg = `
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 32 40" width="40" height="50">
             <defs>
@@ -130,16 +183,19 @@ export default class MapComponent extends Component {
               </filter>
             </defs>
             <path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 12 24 12 24C12 24 22 17.5 22 12C22 6.5 17.5 2 12 2Z" fill="white" filter="url(#shadow)"/>
-            <circle cx="12" cy="12" r="8" fill="${markerColor}"/>
+            ${innerContent}
           </svg>
         `;
-        cachedSearchResultSvgUrl =
+
-          'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg.trim());
+        cachedIconUrls.set(
+          cacheKey,
+          'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg.trim())
+        );
       }
 
       return new Style({
         image: new Icon({
-          src: cachedSearchResultSvgUrl,
+          src: cachedIconUrls.get(cacheKey),
           anchor: [0.5, 0.65],
           scale: 1,
         }),
@@ -183,9 +239,14 @@ export default class MapComponent extends Component {
       projection: 'EPSG:3857',
     });
 
-    this.mapInstance = new Map({
+    this.mapInstance = new OlMap({
       target: element,
-      layers: [openfreemap, selectedShapeLayer, searchResultLayer, bookmarkLayer],
+      layers: [
+        openfreemap,
+        selectedShapeLayer,
+        searchResultLayer,
+        bookmarkLayer,
+      ],
       view: view,
       controls: defaultControls({
         zoom: true,

app/utils/icons.js

@@ -1,5 +1,5 @@
-import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
 import activity from 'feather-icons/dist/icons/activity.svg?raw';
+import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
 import bookmark from 'feather-icons/dist/icons/bookmark.svg?raw';
 import checkSquare from 'feather-icons/dist/icons/check-square.svg?raw';
 import clock from 'feather-icons/dist/icons/clock.svg?raw';
@@ -20,53 +20,109 @@ import menu from 'feather-icons/dist/icons/menu.svg?raw';
 import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
 import phone from 'feather-icons/dist/icons/phone.svg?raw';
 import plus from 'feather-icons/dist/icons/plus.svg?raw';
-import server from 'feather-icons/dist/icons/server.svg?raw';
 import search from 'feather-icons/dist/icons/search.svg?raw';
+import server from 'feather-icons/dist/icons/server.svg?raw';
 import settings from 'feather-icons/dist/icons/settings.svg?raw';
 import target from 'feather-icons/dist/icons/target.svg?raw';
 import user from 'feather-icons/dist/icons/user.svg?raw';
 import x from 'feather-icons/dist/icons/x.svg?raw';
 import zap from 'feather-icons/dist/icons/zap.svg?raw';
+
+import angelfish from '@waysidemapping/pinhead/dist/icons/angelfish.svg?raw';
+import beachUmbrellaInGround from '@waysidemapping/pinhead/dist/icons/beach_umbrella_in_ground.svg?raw';
+import beerMugWithFoam from '@waysidemapping/pinhead/dist/icons/beer_mug_with_foam.svg?raw';
+import burgerAndDrinkCupWithStraw from '@waysidemapping/pinhead/dist/icons/burger_and_drink_cup_with_straw.svg?raw';
 import camera from '@waysidemapping/pinhead/dist/icons/camera.svg?raw';
+import classicalBuilding from '@waysidemapping/pinhead/dist/icons/classical_building.svg?raw';
+import classicalBuildingWithDomeAndFlag from '@waysidemapping/pinhead/dist/icons/classical_building_with_dome_and_flag.svg?raw';
+import classicalBuildingWithFlag from '@waysidemapping/pinhead/dist/icons/classical_building_with_flag.svg?raw';
+import cleaver from '@waysidemapping/pinhead/dist/icons/cleaver.svg?raw';
+import coffeeBean from '@waysidemapping/pinhead/dist/icons/coffee_bean.svg?raw';
+import comedyMaskAndTragedyMask from '@waysidemapping/pinhead/dist/icons/comedy_mask_and_tragedy_mask.svg?raw';
+import croissant from '@waysidemapping/pinhead/dist/icons/croissant.svg?raw';
 import cupAndSaucer from '@waysidemapping/pinhead/dist/icons/cup_and_saucer.svg?raw';
+import donut from '@waysidemapping/pinhead/dist/icons/donut.svg?raw';
+import film from '@waysidemapping/pinhead/dist/icons/film.svg?raw';
+import flagCheckered from '@waysidemapping/pinhead/dist/icons/flag_checkered.svg?raw';
+import fort from '@waysidemapping/pinhead/dist/icons/fort.svg?raw';
 import forkAndKnife from '@waysidemapping/pinhead/dist/icons/fork_and_knife.svg?raw';
+import iceCreamOnCone from '@waysidemapping/pinhead/dist/icons/ice_cream_on_cone.svg?raw';
+import memorialStoneWithInscription from '@waysidemapping/pinhead/dist/icons/memorial_stone_with_inscription.svg?raw';
+import palace from '@waysidemapping/pinhead/dist/icons/palace.svg?raw';
+import personCricketBattingAtCricketBall from '@waysidemapping/pinhead/dist/icons/person_cricket_batting_at_cricket_ball.svg?raw';
+import personJockeyingRacehorse from '@waysidemapping/pinhead/dist/icons/person_jockeying_racehorse.svg?raw';
+import personRunning from '@waysidemapping/pinhead/dist/icons/person_running.svg?raw';
 import personSleepingInBed from '@waysidemapping/pinhead/dist/icons/person_sleeping_in_bed.svg?raw';
+import personSwimmingInWater from '@waysidemapping/pinhead/dist/icons/person_swimming_in_water.svg?raw';
+import personSwingingGolfClub from '@waysidemapping/pinhead/dist/icons/person_swinging_golf_club.svg?raw';
+import roundStructureWithFlag from '@waysidemapping/pinhead/dist/icons/round_structure_with_flag.svg?raw';
+import sailingShipInWater from '@waysidemapping/pinhead/dist/icons/sailing_ship_in_water.svg?raw';
 import shoppingBasket from '@waysidemapping/pinhead/dist/icons/shopping_basket.svg?raw';
+import shoppingCart from '@waysidemapping/pinhead/dist/icons/shopping_cart.svg?raw';
+import wallHangingWithMountainsAndSun from '@waysidemapping/pinhead/dist/icons/wall_hanging_with_mountains_and_sun.svg?raw';
+
 import wikipedia from '../icons/wikipedia.svg?raw';
 
 const ICONS = {
-  'arrow-left': arrowLeft,
   activity,
+  angelfish,
+  'arrow-left': arrowLeft,
+  'beach-umbrella-in-ground': beachUmbrellaInGround,
+  'beer-mug-with-foam': beerMugWithFoam,
   bookmark,
+  'burger-and-drink-cup-with-straw': burgerAndDrinkCupWithStraw,
   camera,
   'check-square': checkSquare,
+  'classical-building': classicalBuilding,
+  'classical-building-with-dome-and-flag': classicalBuildingWithDomeAndFlag,
+  'classical-building-with-flag': classicalBuildingWithFlag,
+  cleaver,
   clock,
+  'coffee-bean': coffeeBean,
+  'comedy-mask-and-tragedy-mask': comedyMaskAndTragedyMask,
+  croissant,
   'cup-and-saucer': cupAndSaucer,
+  donut,
   edit,
   facebook,
+  film,
+  'flag-checkered': flagCheckered,
+  'fork-and-knife': forkAndKnife,
+  fort,
   gift,
   globe,
   heart,
   home,
+  'ice-cream-on-cone': iceCreamOnCone,
   info,
   instagram,
-  'fork-and-knife': forkAndKnife,
   'log-in': logIn,
   'log-out': logOut,
   mail,
   map,
   'map-pin': mapPin,
+  'memorial-stone-with-inscription': memorialStoneWithInscription,
   menu,
   navigation,
+  palace,
+  'person-cricket-batting-at-cricket-ball': personCricketBattingAtCricketBall,
+  'person-jockeying-racehorse': personJockeyingRacehorse,
+  'person-running': personRunning,
   'person-sleeping-in-bed': personSleepingInBed,
+  'person-swimming-in-water': personSwimmingInWater,
+  'person-swinging-golf-club': personSwingingGolfClub,
   phone,
   plus,
-  server,
+  'round-structure-with-flag': roundStructureWithFlag,
+  'sailing-ship-in-water': sailingShipInWater,
   search,
+  server,
   settings,
   'shopping-basket': shoppingBasket,
+  'shopping-cart': shoppingCart,
   target,
   user,
+  'wall-hanging-with-mountains-and-sun': wallHangingWithMountainsAndSun,
   wikipedia,
   x,
   zap,
@@ -76,6 +132,7 @@ const FILLED_ICONS = [
   'fork-and-knife',
   'wikipedia',
   'cup-and-saucer',
+  'coffee-bean',
   'shopping-basket',
   'camera',
   'person-sleeping-in-bed',

app/utils/osm-icons.js

@@ -0,0 +1,131 @@
+import { getIcon } from './icons';
+
+// Rules for mapping OSM tags to icons.
+// Rules are evaluated in order. The first rule where all specified tags match is used.
+export const POI_ICON_RULES = [
+  // Specific Cuisine
+  { tags: { cuisine: 'donut' }, icon: 'donut' },
+  { tags: { cuisine: 'doughnut' }, icon: 'donut' },
+  { tags: { cuisine: 'coffee_shop' }, icon: 'coffee-bean' },
+  { tags: { cuisine: 'coffee' }, icon: 'coffee-bean' },
+
+  // General Amenity/Shop Types
+  { tags: { amenity: 'ice_cream' }, icon: 'ice-cream-on-cone' },
+  { tags: { cuisine: 'ice_cream' }, icon: 'ice-cream-on-cone' },
+  { tags: { shop: 'ice_cream' }, icon: 'ice-cream-on-cone' },
+
+  { tags: { amenity: 'cafe' }, icon: 'cup-and-saucer' },
+  { tags: { amenity: 'restaurant' }, icon: 'fork-and-knife' },
+  { tags: { amenity: 'fast_food' }, icon: 'burger-and-drink-cup-with-straw' },
+  { tags: { amenity: 'pub' }, icon: 'beer-mug-with-foam' },
+  { tags: { amenity: 'food_court' }, icon: 'fork-and-knife' },
+
+  { tags: { shop: 'coffee' }, icon: 'coffee-bean' },
+  { tags: { shop: 'tea' }, icon: 'coffee-bean' },
+  { tags: { shop: 'pastry' }, icon: 'donut' }, // Pastry shops often have donuts
+
+  // Groceries
+  { tags: { shop: 'supermarket' }, icon: 'shopping-cart' },
+  { tags: { shop: 'convenience' }, icon: 'shopping-basket' },
+  { tags: { shop: 'grocery' }, icon: 'shopping-basket' },
+  { tags: { shop: 'greengrocer' }, icon: 'shopping-basket' },
+  { tags: { shop: 'bakery' }, icon: 'croissant' },
+  { tags: { shop: 'butcher' }, icon: 'cleaver' },
+  { tags: { shop: 'deli' }, icon: 'shopping-basket' },
+
+  // Natural
+  { tags: { natural: 'beach' }, icon: 'beach-umbrella-in-ground' },
+
+  // Tourism
+  { tags: { tourism: 'museum' }, icon: 'classical-building' },
+  { tags: { tourism: 'gallery' }, icon: 'wall-hanging-with-mountains-and-sun' },
+  { tags: { tourism: 'aquarium' }, icon: 'angelfish' },
+  { tags: { tourism: 'theme_park' }, icon: 'camera' },
+  { tags: { tourism: 'attraction' }, icon: 'camera' },
+  { tags: { tourism: 'viewpoint' }, icon: 'camera' },
+  { tags: { tourism: 'zoo' }, icon: 'camera' },
+  { tags: { tourism: 'artwork' }, icon: 'camera' },
+  { tags: { amenity: 'cinema' }, icon: 'film' },
+  { tags: { amenity: 'theatre' }, icon: 'camera' },
+  { tags: { amenity: 'arts_centre' }, icon: 'comedy-mask-and-tragedy-mask' },
+  { tags: { amenity: 'arts_center' }, icon: 'comedy-mask-and-tragedy-mask' },
+
+  // Historic
+  { tags: { historic: 'fort' }, icon: 'fort' },
+  { tags: { historic: 'castle' }, icon: 'palace' },
+  { tags: { historic: 'building' }, icon: 'classical-building-with-flag' },
+  { tags: { historic: 'archaeological_site' }, icon: 'camera' },
+  { tags: { historic: 'memorial' }, icon: 'memorial-stone-with-inscription' },
+  {
+    tags: { historic: 'monument' },
+    icon: 'classical-building-with-dome-and-flag',
+  },
+  { tags: { historic: 'ship' }, icon: 'sailing-ship-in-water' },
+
+  // Accommodation
+  { tags: { tourism: 'hotel' }, icon: 'person-sleeping-in-bed' },
+  { tags: { tourism: 'hostel' }, icon: 'person-sleeping-in-bed' },
+  { tags: { tourism: 'motel' }, icon: 'person-sleeping-in-bed' },
+  { tags: { tourism: 'guest_house' }, icon: 'person-sleeping-in-bed' },
+
+  // Sports / Motorsports
+  { tags: { sport: 'motor' }, icon: 'flag-checkered' },
+  { tags: { sport: 'karting' }, icon: 'flag-checkered' },
+  { tags: { sport: 'motocross' }, icon: 'flag-checkered' },
+  {
+    tags: { sport: 'cricket' },
+    icon: 'person-cricket-batting-at-cricket-ball',
+  },
+  { tags: { leisure: 'water_park' }, icon: 'person-swimming-in-water' },
+  { tags: { sport: 'golf' }, icon: 'person-swinging-golf-club' },
+  { tags: { leisure: 'golf_course' }, icon: 'person-swinging-golf-club' },
+  { tags: { sport: 'horse_racing' }, icon: 'person-jockeying-racehorse' },
+  { tags: { leisure: 'stadium' }, icon: 'round-structure-with-flag' },
+  { tags: { sport: 'stadium' }, icon: 'round-structure-with-flag' },
+
+  { tags: { leisure: 'sports_centre' }, icon: 'person-running' },
+  { tags: { sport: 'fitness_centre' }, icon: 'person-running' },
+];
+
+/**
+ * Finds the appropriate icon name based on the place's OSM tags.
+ * @param {Object} tags - The OSM tags of the place.
+ * @returns {string|null} - The name of the icon or null if no match found.
+ */
+export function getIconNameForTags(tags) {
+  if (!tags) return null;
+
+  for (const rule of POI_ICON_RULES) {
+    let match = true;
+    for (const [key, expectedValue] of Object.entries(rule.tags)) {
+      const tagValue = tags[key];
+      if (!tagValue) {
+        match = false;
+        break;
+      }
+
+      // Check for exact match or if value is in a semicolon-separated list
+      // e.g. "donut;coffee_shop"
+      const values = tagValue.split(';').map((v) => v.trim());
+      if (!values.includes(expectedValue)) {
+        match = false;
+        break;
+      }
+    }
+    if (match) {
+      return rule.icon;
+    }
+  }
+  return null;
+}
+
+/**
+ * Returns the raw SVG string for the icon corresponding to the given tags.
+ * @param {Object} tags - The OSM tags.
+ * @returns {string|null} - The raw SVG string or null.
+ */
+export function getIconSvgForTags(tags) {
+  const iconName = getIconNameForTags(tags);
+  if (!iconName) return null;
+  return getIcon(iconName);
+}