map marker icons

diff --git a/database/migrations/2023_07_28_121522_map_marker.php b/database/migrations/2023_07_28_121522_map_marker.php
new file mode 100644 (file)
index 0000000..fdc831a
--- /dev/null
+++ b/database/migrations/2023_07_28_121522_map_marker.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+       /**
+        * Run the migrations.
+        *
+        * @return void
+        */
+       public function up()
+       {
+               Schema::table('technique_maps', function(Blueprint $table) {
+                       $table->string('marker')->nullable()->default(null);
+               });
+       }
+
+       /**
+        * Reverse the migrations.
+        *
+        * @return void
+        */
+       public function down()
+       {
+               Schema::table('technique_maps', function(Blueprint $table) {
+                       $table->dropColumn('marker');
+               });
+       }
+};

diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index 9194cde7fc2f58b250f2e021a58c47e59bde9910..ef07b9207f3ecbc5bc0d9b28f76889b5be0a8495 100644 (file)
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -83,20 +83,21 @@ const getIconURL = name => {
        }
 };
 
-const ZeldaIcon = ({ name }) => {
+const ZeldaIcon = ({ name, title }) => {
        const { t } = useTranslation();
 
        const invert = name.startsWith('not-');
        const strippedName = invert ? name.substr(4) : name;
        const src = getIconURL(strippedName);
-       const title = t(`icon.zelda.${name}`);
+       const alt = t(`icon.zelda.${name}`);
+       const realTitle = title !== '' ? title || alt : null;
 
        return <span className="zelda-icon">
                {src ?
                        <img
-                               alt={title}
+                               alt={alt}
                                src={src}
-                               title={title}
+                               title={realTitle}
                        />
                : null}
                {invert ?
@@ -109,6 +110,7 @@ const ZeldaIcon = ({ name }) => {
 
 ZeldaIcon.propTypes = {
        name: PropTypes.string,
+       title: PropTypes.string,
 };
 
 export default ZeldaIcon;

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,
                }),

diff --git a/resources/sass/map.scss b/resources/sass/map.scss
index 78c9a2b7ed36eb008e207810ba2d629df160ffcb..8b80adaf54626d71cd55e944820bebd70b7003b4 100644 (file)
--- a/resources/sass/map.scss
+++ b/resources/sass/map.scss
@@ -5,6 +5,10 @@
                stroke-width: 1px;
                vector-effect: non-scaling-stroke;
        }
+       > a .zelda-icon {
+               height: 1em;
+               width: 1em;
+       }
 }
 
 .map-popover {