Add map location picker

package-lock.json

@@ -15,6 +15,7 @@
       "devDependencies": {
         "@babel/core": "^7.12.16",
         "@babel/eslint-parser": "^7.12.16",
+        "@vue-leaflet/vue-leaflet": "^0.6.1",
         "@vue/cli-plugin-babel": "~5.0.0",
         "@vue/cli-plugin-eslint": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
@@ -2061,6 +2062,13 @@
         "@types/range-parser": "*"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.8",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
+      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -2082,6 +2090,16 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.9.tgz",
+      "integrity": "sha512-H8vPgD49HKzqM41ArHGZM70g/tfhp8W+JcPxfnF+5H/Xvp+xiP+KQOUNWU8U89fqS1Jj3cpRY/+nbnaHFzwnFA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -2167,6 +2185,17 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@vue-leaflet/vue-leaflet": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.6.1.tgz",
+      "integrity": "sha512-/sm0bdrdftXh5nSGEPsoKrJI1D/GtKiEsBo9X/TA2yu4lYTDcaem6U4t1Ea5CoLleiZRCNUrZr9PG/xHdUPXYA==",
+      "dev": true,
+      "peerDependencies": {
+        "@types/leaflet": "^1.5.7",
+        "leaflet": "^1.6.0",
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
@@ -6907,6 +6936,13 @@
         "launch-editor": "^2.3.0"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -12721,6 +12757,13 @@
         "@types/range-parser": "*"
       }
     },
+    "@types/geojson": {
+      "version": "7946.0.8",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
+      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
+      "dev": true,
+      "peer": true
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -12742,6 +12785,16 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "@types/leaflet": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.9.tgz",
+      "integrity": "sha512-H8vPgD49HKzqM41ArHGZM70g/tfhp8W+JcPxfnF+5H/Xvp+xiP+KQOUNWU8U89fqS1Jj3cpRY/+nbnaHFzwnFA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -12827,6 +12880,13 @@
         "@types/node": "*"
       }
     },
+    "@vue-leaflet/vue-leaflet": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.6.1.tgz",
+      "integrity": "sha512-/sm0bdrdftXh5nSGEPsoKrJI1D/GtKiEsBo9X/TA2yu4lYTDcaem6U4t1Ea5CoLleiZRCNUrZr9PG/xHdUPXYA==",
+      "dev": true,
+      "requires": {}
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
@@ -16392,6 +16452,13 @@
         "launch-editor": "^2.3.0"
       }
     },
+    "leaflet": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==",
+      "dev": true,
+      "peer": true
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",

package.json

@@ -15,6 +15,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@vue-leaflet/vue-leaflet": "^0.6.1",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",

src/StartPage.vue

@@ -11,34 +11,71 @@
       </select>
     </div>
 
-    <div>
+    <l-map
-      Location: <input type="number" v-model="lat" step="any" required /><input
+      @click="onMapClick"
-        type="number"
+      ref="map"
-        v-model="lon"
+      style="height: 50vh"
-        step="any"
+      :zoom="11"
-        required
+      :center="[48.210033, 16.363449]"
-      />
+    >
-    </div>
+      <l-tile-layer
+        url="http://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
+      ></l-tile-layer>
+      <l-marker
+        v-if="position.lat && position.lng"
+        visible
+        draggable
+        :icon="icon"
+        v-model:lat-lng="position"
+        @dragstart="dragging = true"
+        @dragend="dragging = false"
+      ></l-marker
+    ></l-map>
 
     <button type="submit">Go</button>
   </form>
 </template>
 
 <script>
+import "leaflet/dist/leaflet.css";
+import { LMap, LTileLayer, LMarker } from "@vue-leaflet/vue-leaflet";
+
 export default {
   name: "StartPage",
 
+  components: {
+    LMap,
+    LTileLayer,
+    LMarker,
+  },
+
   data() {
     return {
       skinType: "",
       lat: "",
       lon: "",
+      position: {},
     };
   },
 
+  methods: {
+    onMapClick(value) {
+      this.position = value.latlng;
+      console.log(value.latlng);
+    },
+  },
+
   computed: {
     urlAction() {
-      return "/" + this.skinType + "/" + +this.lat + "/" + this.lon + "/";
+      return (
+        "/" +
+        this.skinType +
+        "/" +
+        (this.position ? this.position.lat : 0.0) +
+        "/" +
+        (this.position ? this.position.lng : 0.0) +
+        "/"
+      );
     },
   },
 };