From 806526380d2963e8fd1caaafd36680865c15ecfb Mon Sep 17 00:00:00 2001
From: Linus Groh <mail@linusgroh.de>
Date: Tue, 3 Mar 2020 08:11:45 +0000
Subject: [PATCH] Replace default Leaflet marker with a custom one

Closes #2
---
 src/components/LCustomMarker.js | 19 +++++++++++++++++
 src/styles/_base.scss           |  1 +
 src/styles/_map.scss            | 36 ++++++++++++++++++++++++++++++++-
 src/views/Map.vue               | 15 +++-----------
 4 files changed, 58 insertions(+), 13 deletions(-)
 create mode 100644 src/components/LCustomMarker.js

diff --git a/src/components/LCustomMarker.js b/src/components/LCustomMarker.js
new file mode 100644
index 0000000..a8121eb
--- /dev/null
+++ b/src/components/LCustomMarker.js
@@ -0,0 +1,19 @@
+/* eslint-disable max-len */
+const svg = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="691.429"
+  height="1007.429"
+  viewBox="0 0 182.94 266.549"
+>
+  <path
+    d="M182.94 91.47c0 50.518-55.748 139.357-91.47 175.079C55.75 230.827 0 141.988 0 91.47 0 40.953 40.953 0 91.47 0c50.518 0 91.47 40.953 91.47 91.47z"
+  />
+</svg>
+`;
+/* eslint-enable */
+
+export default L.divIcon({
+  className: "",
+  html: `<span class="pin">${svg}</span>`,
+});
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index c91f5e8..3451fde 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -11,6 +11,7 @@
   --color-primary-text: #fff;
   --drop-shadow: drop-shadow(0 10px 10px rgb(0, 0, 0, 0.2));
   --dropdown-arrow: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2210%22%3E%3Cpath%20fill%3D%22%23333%22%20fill-opacity%3D%221%22%20stroke%3D%22none%22%20d%3D%22M0%2C0%20L0%2C0%20L1%2C0%20L1%2C6%20L7%2C6%20L7%2C7%20L0%2C7%20z%22%20transform%3D%22rotate(-45%205%200)%22%20%2F%3E%3C%2Fsvg%3E");
+  --pin-width: 32px;
 }
 
 html, body {
diff --git a/src/styles/_map.scss b/src/styles/_map.scss
index f12f547..a0b629e 100644
--- a/src/styles/_map.scss
+++ b/src/styles/_map.scss
@@ -4,7 +4,7 @@
 
   .leaflet-popup {
     filter: var(--drop-shadow);
-    margin-bottom: 25px;
+    margin-bottom: calc(var(--pin-width) * 1.5 + 20px);
 
     .leaflet-popup-content-wrapper {
       border-radius: 3px;
@@ -44,4 +44,38 @@
       color: var(--color-primary);
     }
   }
+
+  .leaflet-marker-icon {
+    width: 0 !important;
+    height: 0 !important;
+    margin: 0 !important;
+
+    .pin {
+      display: block;
+      margin-left: calc(-1 * var(--pin-width) / 2);
+      margin-top: calc(-1 * var(--pin-width) * 1.5);
+      position: relative;
+      width: var(--pin-width);
+
+      &::before {
+        background: var(--color-background);
+        border-radius: 100%;
+        content: "";
+        position: absolute;
+        width: calc(var(--pin-width) / 2);
+        height: calc(var(--pin-width) / 2);
+        top: calc(var(--pin-width) / 4);
+        left: calc(var(--pin-width) / 4);
+      }
+
+      svg {
+        height: auto;
+        width: 100%;
+
+        path {
+          fill: var(--color-primary);
+        }
+      }
+    }
+  }
 }
diff --git a/src/views/Map.vue b/src/views/Map.vue
index 021203e..0da3cbe 100644
--- a/src/views/Map.vue
+++ b/src/views/Map.vue
@@ -37,6 +37,7 @@
         v-for="l in lastLocations"
         :key="`${l.topic}-marker`"
         :lat-lng="[l.lat, l.lon]"
+        :icon="markerIcon"
       >
         <LDeviceLocationPopup
           :user="l.username"
@@ -119,22 +120,11 @@ import {
   LPolyline,
 } from "vue2-leaflet";
 import "leaflet/dist/leaflet.css";
-import markerIcon from "leaflet/dist/images/marker-icon.png";
-import markerIcon2x from "leaflet/dist/images/marker-icon-2x.png";
-import markerShadow from "leaflet/dist/images/marker-shadow.png";
-
 import * as types from "@/store/mutation-types";
+import LCustomMarker from "@/components/LCustomMarker";
 import LHeatmap from "@/components/LHeatmap";
 import LDeviceLocationPopup from "@/components/LDeviceLocationPopup";
 
-// See https://github.com/KoRiGaN/Vue2Leaflet/issues/28#issuecomment-299038157
-delete L.Icon.Default.prototype._getIconUrl;
-L.Icon.Default.mergeOptions({
-  iconUrl: markerIcon,
-  iconRetinaUrl: markerIcon2x,
-  shadowUrl: markerShadow,
-});
-
 export default {
   components: {
     LMap,
@@ -154,6 +144,7 @@ export default {
       center: this.$store.state.map.center,
       controls: this.$config.map.controls,
       heatmap: this.$config.map.heatmap,
+      markerIcon: LCustomMarker,
       maxZoom: this.$config.map.maxZoom,
       maxNativeZoom: this.$config.map.maxNativeZoom,
       url: this.$config.map.url,