X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fmap%2FPin.js;fp=resources%2Fjs%2Fcomponents%2Fmap%2FPin.js;h=9d9b471430e5c21602725ca5e1264cd813358361;hb=1811c6021240a95f505cc2d49f592dc1bf56ac89;hp=442e16d638675ba8574bf46316e158fa003da2b9;hpb=6976d85a7117de53f7d42dee3de1f6b8fcb9726d;p=alttp.git

diff --git a/resources/js/components/map/Pin.js b/resources/js/components/map/Pin.js
index 442e16d..9d9b471 100644
--- 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,
 		}),