From 4ee593d1ebd1570d20801a8aff3cd5e60002cf66 Mon Sep 17 00:00:00 2001
From: Artemiy Solopov <art-solopov@yandex.ru>
Date: Wed, 8 Nov 2023 21:20:51 +0200
Subject: [PATCH] Maki icons, first attempt

---
 .../components/map/icons/amusement-park.svg   | 12 ++++++++
 assets/js/components/map/icons/castle.svg     |  5 ++++
 assets/js/components/map/icons/grocery.svg    |  1 +
 assets/js/components/map/icons/home.svg       |  5 ++++
 assets/js/components/map/icons/museum.svg     |  2 ++
 assets/js/components/map/icons/rail-light.svg |  4 +++
 assets/js/components/map/icons/restaurant.svg |  4 +++
 .../components/map/icons/triangle-stroked.svg |  4 +++
 assets/js/components/map/lib/index.js         | 30 +++++++++++--------
 .../map/lib/marker-styles.module.scss         |  4 +--
 10 files changed, 56 insertions(+), 15 deletions(-)
 create mode 100644 assets/js/components/map/icons/amusement-park.svg
 create mode 100644 assets/js/components/map/icons/castle.svg
 create mode 100644 assets/js/components/map/icons/grocery.svg
 create mode 100644 assets/js/components/map/icons/home.svg
 create mode 100644 assets/js/components/map/icons/museum.svg
 create mode 100644 assets/js/components/map/icons/rail-light.svg
 create mode 100644 assets/js/components/map/icons/restaurant.svg
 create mode 100644 assets/js/components/map/icons/triangle-stroked.svg

diff --git a/assets/js/components/map/icons/amusement-park.svg b/assets/js/components/map/icons/amusement-park.svg
new file mode 100644
index 0000000..ec1dbcf
--- /dev/null
+++ b/assets/js/components/map/icons/amusement-park.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" height="21" width="21"><title>amusement-park.svg</title><rect fill="none" x="0" y="0" width="21" height="21"></rect><rect x="0" y="0" width="21" height="21" rx="10.5" ry="10.5" fill="#ffffff"></rect><path fill="#000" transform="translate(3 3)" d="M7.5,0C3.919,0,1,2.919,1,6.5c0,2.3161,1.2251,4.3484,3.0566,5.5H4l-1,2h9l-1-2h-0.0566
+	C12.7749,10.8484,14,8.8161,14,6.5C14,2.919,11.081,0,7.5,0z M7.375,1.5059v3.5c-0.3108,0.026-0.6057,0.1482-0.8438,0.3496
+	L4.0566,2.8809C4.9243,2.0555,6.0851,1.5376,7.375,1.5059z M7.625,1.5059c1.2899,0.0317,2.4507,0.5496,3.3184,1.375L8.4688,5.3555
+	c-0.0007-0.0007-0.0013-0.0013-0.002-0.002C8.229,5.1532,7.9348,5.0317,7.625,5.0059V1.5059z M3.8809,3.0566l2.4746,2.4746
+	c-0.0007,0.0007-0.0013,0.0013-0.002,0.002C6.1532,5.771,6.0317,6.0652,6.0059,6.375h-3.5
+	C2.5376,5.0851,3.0555,3.9243,3.8809,3.0566z M11.1191,3.0566c0.8254,0.8676,1.3433,2.0285,1.375,3.3184h-3.5
+	c-0.026-0.3108-0.1482-0.6057-0.3496-0.8438L11.1191,3.0566z M2.5059,6.625h3.5c0.026,0.3108,0.1482,0.6057,0.3496,0.8438
+	L3.8809,9.9434C3.0555,9.0757,2.5376,7.9149,2.5059,6.625z M8.9941,6.625h3.5c-0.0317,1.2899-0.5496,2.4507-1.375,3.3184
+	L8.6445,7.4688c0.0007-0.0007,0.0013-0.0013,0.002-0.002C8.8468,7.229,8.9683,6.9348,8.9941,6.625z M6.5312,7.6445
+	c0.0007,0.0007,0.0013,0.0013,0.002,0.002C6.6716,7.7624,6.8297,7.8524,7,7.9121v3.5625c-1.1403-0.1124-2.1606-0.6108-2.9434-1.3555
+	L6.5312,7.6445z M8.4688,7.6445l2.4746,2.4746c-0.7828,0.7447-1.803,1.243-2.9434,1.3555V7.9121
+	C8.1711,7.852,8.33,7.7613,8.4688,7.6445z"></path></svg>
\ No newline at end of file
diff --git a/assets/js/components/map/icons/castle.svg b/assets/js/components/map/icons/castle.svg
new file mode 100644
index 0000000..dd96272
--- /dev/null
+++ b/assets/js/components/map/icons/castle.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" height="21" width="21"><title>castle.svg</title><rect fill="none" x="0" y="0" width="21" height="21"></rect><rect x="0" y="0" width="21" height="21" rx="10.5" ry="10.5" fill="#ffffff"></rect><path fill="#000" transform="translate(3 3)" d="M11,4H4C3.4477,4,3,3.5523,3,3V0.5C3,0.2239,3.2239,0,3.5,0S4,0.2239,4,0.5V2h1V1c0-0.5523,0.4477-1,1-1s1,0.4477,1,1v1h1V1
+	c0-0.5523,0.4477-1,1-1s1,0.4477,1,1v1h1V0.5C11,0.2239,11.2239,0,11.5,0S12,0.2239,12,0.5V3C12,3.5523,11.5523,4,11,4z M14,14.5
+	c0,0.2761-0.2239,0.5-0.5,0.5h-12C1.2239,15,1,14.7761,1,14.5S1.2239,14,1.5,14H2c0.5523,0,1-0.4477,1-1c0,0,1-6,1-7
+	c0-0.5523,0.4477-1,1-1h5c0.5523,0,1,0.4477,1,1c0,1,1,7,1,7c0,0.5523,0.4477,1,1,1h0.5c0.2723-0.0001,0.4946,0.2178,0.5,0.49V14.5z
+	 M9,10.5C9,9.6716,8.3284,9,7.5,9S6,9.6716,6,10.5V14h3V10.5z"></path></svg>
\ No newline at end of file
diff --git a/assets/js/components/map/icons/grocery.svg b/assets/js/components/map/icons/grocery.svg
new file mode 100644
index 0000000..432a504
--- /dev/null
+++ b/assets/js/components/map/icons/grocery.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" height="21" width="21"><title>grocery.svg</title><rect fill="none" x="0" y="0" width="21" height="21"></rect><rect x="0" y="0" width="21" height="21" rx="10.5" ry="10.5" fill="#ffffff"></rect><path fill="#000" transform="translate(3 3)" d="M 13.199219 1.5 C 13.199219 1.5 11.808806 1.4588 11.253906 2 C 10.720406 2.5202 10.5 2.9177 10.5 4 L 1.1992188 4 L 2.59375 8.8144531 C 2.59725 8.8217531 2.6036219 8.8287375 2.6074219 8.8359375 C 2.8418219 9.4932375 3.4545469 9.9666406 4.1855469 9.9941406 C 4.1885469 9.9954406 4.1992187 10 4.1992188 10 L 10.699219 10 L 10.699219 10.199219 C 10.699219 10.199219 10.7 10.500391 10.5 10.900391 C 10.3 11.300391 10.200391 11.5 9.4003906 11.5 L 2.9003906 11.5 C 1.9003906 11.5 1.9003906 13 2.9003906 13 L 4.0996094 13 L 4.1992188 13 L 9.0996094 13 L 9.1992188 13 L 9.3007812 13 C 10.500781 13 11.399219 12.299609 11.699219 11.599609 C 11.999219 10.899609 12 10.300781 12 10.300781 L 12 10 L 12 4 C 12 3.4764 12.228619 3 12.699219 3 L 13.25 3 C 13.6642 3 14 2.6642 14 2.25 C 14 1.8358 13.6642 1.5 13.25 1.5 L 13.199219 1.5 z M 9.1992188 13 C 8.5992188 13 8.1992188 13.4 8.1992188 14 C 8.1992188 14.6 8.5992187 15 9.1992188 15 C 9.7992187 15 10.199219 14.6 10.199219 14 C 10.199219 13.4 9.7992188 13 9.1992188 13 z M 4.1992188 13 C 3.5992188 13 3.1992188 13.4 3.1992188 14 C 3.1992188 14.6 3.5992187 15 4.1992188 15 C 4.7992188 15 5.1992188 14.6 5.1992188 14 C 5.1992188 13.4 4.7992187 13 4.1992188 13 z "></path></svg>
\ No newline at end of file
diff --git a/assets/js/components/map/icons/home.svg b/assets/js/components/map/icons/home.svg
new file mode 100644
index 0000000..c47a082
--- /dev/null
+++ b/assets/js/components/map/icons/home.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" height="21" width="21"><title>home.svg</title><rect fill="none" x="0" y="0" width="21" height="21"></rect><rect x="0" y="0" width="21" height="21" rx="10.5" ry="10.5" fill="#ffffff"></rect><path fill="#000" transform="translate(3 3)" d="M2,13.7478c0,0.13807,0.11193,0.25,0.25,0.25h3.749v-3h3v3h3.749c0.13807,0,0.25-0.11193,0.25-0.25V7.9987H2
+	C2,7.9987,2,13.7478,2,13.7478z M13.93,6.5778l-0.9319-0.8189V2c0-0.55228-0.44771-1-1-1s-1,0.44772-1,1v2L7.6808,1.09
+	C7.5863,0.9897,7.42846,0.98478,7.3279,1.079L7.3169,1.09L1.0678,6.553C0.9734,6.65376,0.97856,6.81197,1.07932,6.90637
+	C1.12478,6.94896,1.18451,6.97304,1.2468,6.9739L3,6.9989h10.7468c0.13807,0.00046,0.25037-0.1111,0.25083-0.24917
+	C13.99784,6.68592,13.97365,6.62445,13.93,6.5779V6.5778z"></path></svg>
\ No newline at end of file
diff --git a/assets/js/components/map/icons/museum.svg b/assets/js/components/map/icons/museum.svg
new file mode 100644
index 0000000..e80d17c
--- /dev/null
+++ b/assets/js/components/map/icons/museum.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" height="21" width="21"><title>museum.svg</title><rect fill="none" x="0" y="0" width="21" height="21"></rect><rect x="0" y="0" width="21" height="21" rx="10.5" ry="10.5" fill="#ffffff"></rect><path fill="#000" transform="translate(3 3)" d="M7.5,0L1,3.5V4h13V3.5L7.5,0z M2,5v5l-1,1.6V13h13v-1.4L13,10V5H2z M4,6h1v5.5H4V6z M7,6h1v5.5H7V6z M10,6h1
+	v5.5h-1V6z"></path></svg>
\ No newline at end of file
diff --git a/assets/js/components/map/icons/rail-light.svg b/assets/js/components/map/icons/rail-light.svg
new file mode 100644
index 0000000..361a8af
--- /dev/null
+++ b/assets/js/components/map/icons/rail-light.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" height="21" width="21"><title>rail-light.svg</title><rect fill="none" x="0" y="0" width="21" height="21"></rect><rect x="0" y="0" width="21" height="21" rx="10.5" ry="10.5" fill="#ffffff"></rect><path fill="#000" transform="translate(3 3)" d="M5.5,0C5,0,5,0.5,5,0.5v1C5,1.777,5.223,2,5.5,2S6,1.777,6,1.5V1h1v2H6c0,0-2,0-2,2v3c0,3,3,3,3,3h1
+	c0,0,3,0,3-3V5c0-2-2-2-2-2H8V1h1v0.5C9,1.777,9.223,2,9.5,2S10,1.777,10,1.5v-1C10,0,9.5,0,9.5,0H5.5z M7.5,4l2.0449,0.7734L10,6.5
+	C10.1316,7,9.5,7,9.5,7h-4c0,0-0.6316,0-0.5-0.5l0.4551-1.7266L7.5,4z M7.5,8C7.7761,8,8,8.2239,8,8.5S7.7761,9,7.5,9
+	S7,8.7761,7,8.5S7.2239,8,7.5,8z M4.125,12L3,15h1.5l0.375-1h5.25l0.375,1H12l-1.125-3h-1.5l0.375,1h-4.5l0.375-1H4.125z"></path></svg>
\ No newline at end of file
diff --git a/assets/js/components/map/icons/restaurant.svg b/assets/js/components/map/icons/restaurant.svg
new file mode 100644
index 0000000..635aa45
--- /dev/null
+++ b/assets/js/components/map/icons/restaurant.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" height="21" width="21"><title>restaurant.svg</title><rect fill="none" x="0" y="0" width="21" height="21"></rect><rect x="0" y="0" width="21" height="21" rx="10.5" ry="10.5" fill="#ffffff"></rect><path fill="#000" transform="translate(3 3)" d="M3.5,0l-1,5.5c-0.1464,0.805,1.7815,1.181,1.75,2L4,14c-0.0384,0.9993,1,1,1,1s1.0384-0.0007,1-1L5.75,7.5
+	c-0.0314-0.8176,1.7334-1.1808,1.75-2L6.5,0H6l0.25,4L5.5,4.5L5.25,0h-0.5L4.5,4.5L3.75,4L4,0H3.5z M12,0
+	c-0.7364,0-1.9642,0.6549-2.4551,1.6367C9.1358,2.3731,9,4.0182,9,5v2.5c0,0.8182,1.0909,1,1.5,1L10,14c-0.0905,0.9959,1,1,1,1
+	s1,0,1-1V0z"></path></svg>
\ No newline at end of file
diff --git a/assets/js/components/map/icons/triangle-stroked.svg b/assets/js/components/map/icons/triangle-stroked.svg
new file mode 100644
index 0000000..74e9cc4
--- /dev/null
+++ b/assets/js/components/map/icons/triangle-stroked.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" height="21" width="21"><title>triangle-stroked.svg</title><rect fill="none" x="0" y="0" width="21" height="21"></rect><rect x="0" y="0" width="21" height="21" rx="10.5" ry="10.5" fill="#ffffff"></rect><path fill="#000" transform="translate(3 3)" d="M7.5243,1.5004
+	C7.2429,1.4913,6.9787,1.6423,6.8336,1.8952l-5.5,9.8692C1.0218,12.3078,1.395,12.9999,2,13h11
+	c0.605-0.0001,0.9782-0.6922,0.6664-1.2355l-5.5-9.8692C8.0302,1.6579,7.7884,1.5092,7.5243,1.5004z M7.5,3.8993l4.1267,7.4704
+	H3.3733L7.5,3.8993z"></path></svg>
\ No newline at end of file
diff --git a/assets/js/components/map/lib/index.js b/assets/js/components/map/lib/index.js
index 44d1f88..3813b94 100644
--- a/assets/js/components/map/lib/index.js
+++ b/assets/js/components/map/lib/index.js
@@ -12,16 +12,15 @@ const FIT_BOUND_OPTIONS = {
     maxZoom: FOCUS_ZOOM
 }
 
-// TODO: maybe inject from backend
 const ICONS = {
-    museum: 'easel',
-    sight: 'star',
-    transport: 'train-front',
-    accomodation: 'house',
-    food: 'cup-hot',
-    entertainment: 'dpad',
-    shop: 'basket3',
-    other: 'pentagon'
+    museum: 'museum',
+    sight: 'castle',
+    transport: 'rail-light',
+    accomodation: 'home',
+    food: 'restaurant',
+    entertainment: 'amusement-park',
+    shop: 'grocery',
+    other: 'triangle-stroked'
 }
 
 export async function mapInit(apiKey, options) {
@@ -83,6 +82,8 @@ function loadMap(options) {
 }
 
 function addPointsMarkers(map, points, colors) {
+    console.log(ic)
+
     for (let point of points) {
         const el = document.createElement('div')
         el.className = `${styles.marker} is-${point.category}`
@@ -92,10 +93,13 @@ function addPointsMarkers(map, points, colors) {
         // el.style.setProperty('--marker-body-color', colors[point.category])
         const icon = ICONS[point.category]
 
-        el.innerHTML = `
-            <svg class=${styles.markerBody}><use xlink:href="${iconsUrl}#geo-alt-fill"></svg>
-            <svg class=${styles.markerIcon}><use xlink:href="${iconsUrl}#${icon}-fill"></svg>
-        `
+        import(`../icons/${icon}.svg`).then(i => {
+            el.innerHTML = `
+                <svg class=${styles.markerBody}><use xlink:href="${iconsUrl}#geo-alt-fill"></svg>
+                <img class=${styles.markerIcon} src=${i.default}></img>
+            `
+        })
+
 
         new mapboxgl.Marker({
             anchor: 'bottom',
diff --git a/assets/js/components/map/lib/marker-styles.module.scss b/assets/js/components/map/lib/marker-styles.module.scss
index 40f750b..88d979b 100644
--- a/assets/js/components/map/lib/marker-styles.module.scss
+++ b/assets/js/components/map/lib/marker-styles.module.scss
@@ -2,7 +2,7 @@
 
 .marker {
   $size: 3.5rem;
-  $icon-size: 0.3 * $size;
+  $icon-size: 0.5 * $size;
 
   height: $size;
   width: $size;
@@ -21,7 +21,7 @@
     width: $icon-size;
     position: absolute;
 
-    top: 0.22 * $size;
+    top: 0.15 * $size;
     left: 0.5 * ($size - $icon-size);
   }