Maki icons, first attempt

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',

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