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';
}
}, [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}>
Pin.propTypes = {
pin: PropTypes.shape({
+ marker: PropTypes.string,
technique: PropTypes.shape({
type: PropTypes.string,
}),