X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fmap%2FPin.js;h=9d9b471430e5c21602725ca5e1264cd813358361;hb=e0925d5b97ab0804222195eb4231c63b33703942;hp=69b6d77e389eccc9609033a8babb7a03afdac8fa;hpb=f17b9f3b6f7f9e678c681c719eea6fb5c41a387f;p=alttp.git

diff --git a/resources/js/components/map/Pin.js b/resources/js/components/map/Pin.js
index 69b6d77..9d9b471 100644
--- a/resources/js/components/map/Pin.js
+++ b/resources/js/components/map/Pin.js
@@ -2,13 +2,16 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
+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';
 
 const Pin = ({ pin }) => {
+	const { storePosition } = useOpenSeadragon();
 	const [showPopover, setShowPopover] = React.useState(false);
 	const ref = React.useRef();
 
@@ -17,21 +20,31 @@ const Pin = ({ pin }) => {
 	const onClick = React.useCallback((e) => {
 		if (ref.current && ref.current.contains(e.originalTarget)) {
 			if (e.originalTarget.tagName === 'A') {
+				storePosition();
 				navigate(new URL(e.originalTarget.href).pathname);
 			}
 		} else {
 			if (pin.technique.type === 'location') {
 				setShowPopover(s => !s);
 			} else {
+				storePosition();
 				navigate(getLink(pin.technique));
 			}
 		}
 	}, [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}>
@@ -44,6 +57,7 @@ const Pin = ({ pin }) => {
 
 Pin.propTypes = {
 	pin: PropTypes.shape({
+		marker: PropTypes.string,
 		technique: PropTypes.shape({
 			type: PropTypes.string,
 		}),