map marker icons

[alttp.git] / resources / js / components / map / Pin.js

diff --git a/resources/js/components/map/Pin.js b/resources/js/components/map/Pin.js
index 442e16d638675ba8574bf46316e158fa003da2b9..9d9b471430e5c21602725ca5e1264cd813358361 100644 (file)
--- a/resources/js/components/map/Pin.js
+++ b/resources/js/components/map/Pin.js
@@ -6,6 +6,7 @@ import { useOpenSeadragon } from './OpenSeadragon';
 import Overlay from './Overlay';
 import Popover from './Popover';
 import Icon from '../common/Icon';
+import ZeldaIcon from '../common/ZeldaIcon';
 import { getLink, getTranslation } from '../../helpers/Technique';
 import i18n from '../../i18n';
 
@@ -32,10 +33,18 @@ const Pin = ({ pin }) => {
                }
        }, [pin]);
 
+       const title = React.useMemo(() => {
+               return getTranslation(pin.technique, 'title', i18n.language);
+       }, [pin, i18n.language]);
+
        return <Overlay onClick={onClick} x={pin.x} y={pin.y}>
                <div className="map-pin">
                        <Link to={getLink(pin.technique)}>
-                               <Icon.PIN title={getTranslation(pin.technique, 'title', i18n.language)} />
+                               {pin.marker ?
+                                       <ZeldaIcon title={title} name={pin.marker} />
+                               :
+                                       <Icon.PIN title={title} />
+                               }
                        </Link>
                        {pin.technique.type === 'location' ?
                                <div ref={ref}>
@@ -48,6 +57,7 @@ const Pin = ({ pin }) => {
 
 Pin.propTypes = {
        pin: PropTypes.shape({
+               marker: PropTypes.string,
                technique: PropTypes.shape({
                        type: PropTypes.string,
                }),