sticker panel with ability to choose

src/modules/Editor.js

@@ -12,6 +12,7 @@ export class Editor {
     setMode,
     setRouterPoints,
     setTotalDist,
+    setActiveSticker,
   }) {
     this.map = new Map({ container });
 
@@ -19,7 +20,9 @@ export class Editor {
       lockMapClicks, routerMoveStart, changeMode, pushPolyPoints, map: { map }
     } = this;
 
-    this.poly = new Poly({ map, routerMoveStart, lockMapClicks, setTotalDist });
+    this.poly = new Poly({
+      map, routerMoveStart, lockMapClicks, setTotalDist
+    });
     this.stickers = new Stickers({ map, lockMapClicks });
     this.router = new Router({
       map, lockMapClicks, setRouterPoints, changeMode, pushPolyPoints
@@ -43,15 +46,26 @@ export class Editor {
     };
 
     this.clickHandlers = {
-      [MODES.STICKERS]: this.stickers.createOnClick,
+      [MODES.STICKERS]: this.createStickerOnClick,
       [MODES.ROUTER]: this.router.pushWaypointOnClick,
     };
 
+    this.activeSticker = null;
+    this.setActiveSticker = setActiveSticker;
+
     map.addEventListener('mouseup', this.onClick);
     map.addEventListener('dragstart', () => lockMapClicks(true));
     map.addEventListener('dragstop', () => lockMapClicks(false));
   }
 
+  createStickerOnClick = (e) => {
+    if (!e || !e.latlng || !this.activeSticker) return;
+    const { latlng } = e;
+
+    this.stickers.createSticker({ latlng, sticker: this.activeSticker });
+    this.setSticker(null);
+  };
+
   changeMode = mode => {
     if (this.mode === mode) {
       this.disableMode(mode);
@@ -108,5 +122,10 @@ export class Editor {
 
   pushPolyPoints = latlngs => {
     this.poly.pushPoints(latlngs);
-  }
+  };
+
+  setSticker = sticker => {
+    this.activeSticker = sticker;
+    this.setActiveSticker(sticker);
+  };
 }

src/modules/Sticker.js

@@ -7,7 +7,7 @@ import stickers from '$sprites/stickers.svg';
 
 export class Sticker {
   constructor({
-    latlng, deleteSticker, map, lockMapClicks
+    latlng, deleteSticker, map, lockMapClicks, sticker
   }) {
     this.angle = 2.2;
     this.isDragging = false;
@@ -26,7 +26,7 @@ export class Sticker {
     this.stickerArrow.className = 'sticker-arrow';
     this.stickerDelete.className = 'sticker-delete';
 
-    this.stickerImage.innerHTML = this.generateStickerSVG('green-sm');
+    this.stickerImage.innerHTML = this.generateStickerSVG(sticker);
 
     this.element.appendChild(this.stickerArrow);
     this.element.appendChild(this.stickerImage);

src/modules/Stickers.js

@@ -19,17 +19,18 @@ export class Stickers {
     this.createSticker({ latlng });
   };
 
-  createSticker = ({ latlng }) => {
-    const sticker = new Sticker({
+  createSticker = ({ latlng, sticker }) => {
+    const marker = new Sticker({
       latlng,
       deleteSticker: this.deleteStickerByReference,
       map: this.map,
       lockMapClicks: this.lockMapClicks,
+      sticker,
     });
-    this.stickers.push(sticker);
+    this.stickers.push(marker);
 
-    sticker.sticker.addTo(this.map);
-    sticker.sticker.enableEdit();
+    marker.sticker.addTo(this.map);
+    marker.sticker.enableEdit();
   };
 
   deleteStickerByReference = ref => {