add leaflet

package-lock.json

@@ -10,7 +10,8 @@
         "@turf/flip": "^6.5.0",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
-        "leaflet": "^1.7.1",
+        "leaflet": "^1.5.1",
+        "leaflet-draw": "^1.0.4",
         "register-service-worker": "^1.7.1",
         "vue": "^2.6.11",
         "vue-frag": "^1.1.5",
@@ -8289,9 +8290,14 @@
       }
     },
     "node_modules/leaflet": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
-      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.5.1.tgz",
+      "integrity": "sha512-ekM9KAeG99tYisNBg0IzEywAlp0hYI5XRipsqRXyRTeuU8jcuntilpp+eFf5gaE0xubc9RuSNIVtByEKwqFV0w=="
+    },
+    "node_modules/leaflet-draw": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/leaflet-draw/-/leaflet-draw-1.0.4.tgz",
+      "integrity": "sha512-rsQ6saQO5ST5Aj6XRFylr5zvarWgzWnrg46zQ1MEOEIHsppdC/8hnN8qMoFvACsPvTioAuysya/TVtog15tyAQ=="
     },
     "node_modules/less": {
       "version": "3.13.1",
@@ -13652,6 +13658,7 @@
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
       "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
       "dev": true,
+      "hasInstallScript": true,
       "optional": true,
       "os": [
         "darwin"
@@ -13982,6 +13989,7 @@
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
       "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
       "dev": true,
+      "hasInstallScript": true,
       "optional": true,
       "os": [
         "darwin"
@@ -21836,9 +21844,14 @@
       }
     },
     "leaflet": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
-      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.5.1.tgz",
+      "integrity": "sha512-ekM9KAeG99tYisNBg0IzEywAlp0hYI5XRipsqRXyRTeuU8jcuntilpp+eFf5gaE0xubc9RuSNIVtByEKwqFV0w=="
+    },
+    "leaflet-draw": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/leaflet-draw/-/leaflet-draw-1.0.4.tgz",
+      "integrity": "sha512-rsQ6saQO5ST5Aj6XRFylr5zvarWgzWnrg46zQ1MEOEIHsppdC/8hnN8qMoFvACsPvTioAuysya/TVtog15tyAQ=="
     },
     "less": {
       "version": "3.13.1",

package.json

@@ -13,7 +13,8 @@
     "@turf/flip": "^6.5.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
-    "leaflet": "^1.7.1",
+    "leaflet": "^1.5.1",
+    "leaflet-draw": "^1.0.4",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
     "vue-frag": "^1.1.5",

src/assets/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.css

+/* required styles */
+/* For input, we add the strong #map selector to avoid conflicts with semantic-ui */
+
+#map .leaflet-control-geocoder {
+  border-radius: 4px;
+  background: white;
+  min-width: 26px;
+  min-height: 26px;
+}
+
+.leaflet-touch .leaflet-control-geocoder {
+  min-width: 30px;
+  min-height: 30px;
+}
+
+.leaflet-control-geocoder a,
+.leaflet-control-geocoder .leaflet-control-geocoder-icon {
+  border-bottom: none;
+  display: inline-block;
+}
+
+.leaflet-control-geocoder .leaflet-control-geocoder-alternatives a {
+  width: inherit;
+  height: inherit;
+  line-height: inherit;
+}
+
+.leaflet-control-geocoder a:hover,
+.leaflet-control-geocoder .leaflet-control-geocoder-icon:hover {
+  border-bottom: none;
+  display: inline-block;
+}
+
+.leaflet-control-geocoder-form {
+  display: none;
+  vertical-align: middle;
+}
+.leaflet-control-geocoder-expanded .leaflet-control-geocoder-form {
+  display: inline-block;
+}
+#map .leaflet-control-geocoder-form input {
+  font-size: 120%;
+  border: 0;
+  background-color: transparent;
+  width: 246px;
+}
+
+.leaflet-control-geocoder-icon {
+  border-radius: 4px;
+  width: 26px;
+  height: 26px;
+  border: none;
+  background-color: white;
+  background-image: url(./images/geocoder.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+}
+
+.leaflet-touch .leaflet-control-geocoder-icon {
+  width: 30px;
+  height: 30px;
+}
+
+.leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon {
+  background-image: url(./images/throbber.gif);
+}
+
+.leaflet-control-geocoder-form-no-error {
+  display: none;
+}
+
+#map .leaflet-control-geocoder-form input:focus {
+  outline: none;
+}
+
+.leaflet-control-geocoder-form button {
+  display: none;
+}
+.leaflet-control-geocoder-error {
+  margin-top: 8px;
+  margin-left: 8px;
+  display: block;
+  color: #444;
+}
+.leaflet-control-geocoder-alternatives {
+  display: block;
+  width: 272px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.leaflet-control-geocoder-alternatives-minimized {
+  display: none;
+  height: 0;
+}
+.leaflet-control-geocoder-alternatives li {
+  white-space: nowrap;
+  display: block;
+  overflow: hidden;
+  padding: 5px 8px;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid #ccc;
+  cursor: pointer;
+}
+
+.leaflet-control-geocoder-alternatives li a,
+.leaflet-control-geocoder-alternatives li a:hover {
+  width: inherit;
+  height: inherit;
+  line-height: inherit;
+  background: inherit;
+  border-radius: inherit;
+  text-align: left;
+}
+
+.leaflet-control-geocoder-alternatives li:last-child {
+  border-bottom: none;
+}
+.leaflet-control-geocoder-alternatives li:hover,
+.leaflet-control-geocoder-selected {
+  background-color: #f5f5f5;
+}
+
+
+/* Custom style */
+.leaflet-control-geocoder-icon {
+  border-radius: 4px;
+  width: 35px;
+  height: 35px;
+}
+
+#map .leaflet-control-geocoder-form input {
+  height: 35px;
+}
+
+.leaflet-control-geocoder-alternatives li:first-of-type {
+  border-top: 1px solid #ccc;
+}
+
+.leaflet-control-geocoder-address-item {
+	font-weight: 600;
+}
+
+.leaflet-control-geocoder-address-detail {
+	font-size: 12px;
+	font-weight: normal;
+}
+
+.leaflet-control-geocoder-address-context {
+	color: #666;
+	font-size: 12px;
+	font-weight: lighter;
+}

src/assets/resources/leaflet-control-geocoder-1.13.0/images/geocoder.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
\ No newline at end of file

src/main.js

@@ -5,7 +5,9 @@ import App from './App.vue'
 import './registerServiceWorker'
 import router from './router'
 import store from './store'
-
+import 'leaflet/dist/leaflet.css';
+import 'leaflet-draw/dist/leaflet.draw.css';
+import '@/assets/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.css';
 Vue.config.productionTip = false
 
 axios.all([store.dispatch("USER_INFO"),