karl/sunscreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: karl:773f1b9825fd4f0adcfd70d7e3db6f1638ef8240
Branches Tags
karl:main
...
compare: karl:e4db4973cdbf0d599af1a299a410ebb02a58d4f5
Branches Tags
karl:main

2 Commits
773f1b9825 ... e4db4973cd

Author SHA1 Message Date
karl
e4db4973cd Improve footer 2022-04-17 12:20:05 +02:00
karl
1bdb942d35 Add map location picker 2022-04-17 12:07:44 +02:00
4 changed files with 114 additions and 9 deletions
Show Stats Expand all files Collapse all files

67
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

1
src/App.vue
View File

@ -36,5 +36,6 @@ export default {
background-color: lightyellow;
text-align: left;
padding: 1em;
font-size: 0.7em;
}
</style>

54
src/StartPage.vue
View File

@ -11,34 +11,70 @@
</select>
</div>
<div>
Location: <input type="number" v-model="lat" step="any" required /><input
type="number"
v-model="lon"
step="any"
required
/>
</div>
<l-map
@click="onMapClick"
ref="map"
style="height: 50vh"
:zoom="11"
:center="[48.210033, 16.363449]"
>
<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;
},
},
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) +
"/"
);
},
},
};