mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-01-20 20:01:25 +00:00
WIP
This commit is contained in:
mahula
parent
0b3631c582
commit
920d86961c
@ -123,6 +123,33 @@
|
||||
</ds-chip>
|
||||
|
||||
<!-- location -->
|
||||
<!--- <Leaflet--->
|
||||
XXX
|
||||
<client-only>
|
||||
<div style="height: 350px">
|
||||
<l-geosearch :use-openstreetmap="true" @results="handleResults" />
|
||||
<l-map
|
||||
ref="map"
|
||||
:zoom="zoom"
|
||||
:center="center"
|
||||
:options="{ zoomControl: true, attributionControl: true }"
|
||||
:marker-zoom-animation="true"
|
||||
@click="addMarker"
|
||||
@update:zoom="zoomUpdated"
|
||||
@update:center="centerUpdated"
|
||||
>
|
||||
<l-tile-layer :url="url" :attribution="attribution" />
|
||||
<v-geosearch :options="geosearchOptions" ></v-geosearch>
|
||||
<l-marker ref="marker" :lat-lng="marker" draggable @update:lat-lng="latLngUpdate">
|
||||
<l-popup ref="popup">Test</l-popup>
|
||||
</l-marker>
|
||||
</l-map>
|
||||
</div>
|
||||
</client-only>
|
||||
|
||||
<!--- <Leaflet End --->
|
||||
|
||||
|
||||
<ds-select
|
||||
id="city"
|
||||
:label="$t('settings.data.labelCity') + locationNameLabelAddOnOldName"
|
||||
@ -188,6 +215,11 @@ import {
|
||||
} from '~/constants/groups.js'
|
||||
import Editor from '~/components/Editor/Editor'
|
||||
import { queryLocations } from '~/graphql/location'
|
||||
import { latLng } from "leaflet";
|
||||
import { LMap, LTileLayer, LMarker, LPopup } from "vue2-leaflet"
|
||||
import { OpenStreetMapProvider } from 'leaflet-geosearch'
|
||||
import VGeosearch from 'vue2-leaflet-geosearch'
|
||||
import 'leaflet/dist/leaflet.css'
|
||||
|
||||
let timeout
|
||||
|
||||
@ -196,8 +228,15 @@ export default {
|
||||
components: {
|
||||
CategoriesSelect,
|
||||
Editor,
|
||||
LMap,
|
||||
LTileLayer,
|
||||
LMarker,
|
||||
LPopup,
|
||||
VGeosearch,
|
||||
},
|
||||
props: {
|
||||
modelValue: { type: Array },
|
||||
title: { type: String },
|
||||
update: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
@ -217,6 +256,13 @@ export default {
|
||||
disabled: false,
|
||||
groupTypeOptions: ['public', 'closed', 'hidden'],
|
||||
actionRadiusOptions: ['regional', 'national', 'continental', 'global'],
|
||||
zoom: 6,
|
||||
resultLatlng: null,
|
||||
center: [50.9356124, 14.1483645],
|
||||
marker: [50.9356124, 14.1483645],
|
||||
markerOptions: { opacity: 0, width: '10px', height: '10px' },
|
||||
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
attribution: '<a href="http://osm.org/copyright">OpenStreetMap</a>',
|
||||
loadingGeo: false,
|
||||
cities: [],
|
||||
formData: {
|
||||
@ -395,6 +441,37 @@ export default {
|
||||
|
||||
return this.cities.find((city) => city.value === value)
|
||||
},
|
||||
addMarker(e) {
|
||||
console.log('addMarker', e)
|
||||
console.log('addMarker', e.latlng)
|
||||
this.marker = this.center
|
||||
console.log(this.marker)
|
||||
setTimeout(() => this.$refs.marker.leafletObject.openPopup(), 100)
|
||||
},
|
||||
zoomUpdated(zoom) {
|
||||
this.zoom = zoom
|
||||
},
|
||||
centerUpdated(center) {
|
||||
this.center = center
|
||||
},
|
||||
latLngUpdate(e) {
|
||||
console.log('latLngUpdate', e)
|
||||
console.log('latLngUpdate', [e.lat, e.lng])
|
||||
//this.marker = LatLng(e.latlng)
|
||||
this.$emit('update-lat-lang', e, this.zoom, this.center)
|
||||
},
|
||||
handleResults(result) {
|
||||
// Use the Overpass API to find the corresponding geodatas
|
||||
const query = '[out:json][timeout:25];(node["name"="${result}"];);out body;>;out skel qt;'
|
||||
const url = 'https://overpass-api.de/api/interpreter?data=${encodeURIComponent(query)}'
|
||||
fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const lat = data.elements[0].lat;
|
||||
const lon = data.elements[0].lon;
|
||||
this.resultLatlng = [lat, lon];
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
19
webapp/components/LocationMap.vue
Normal file
19
webapp/components/LocationMap.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div style="height: 350px">
|
||||
<l-map
|
||||
ref="map"
|
||||
:zoom="zoom"
|
||||
:center="center"
|
||||
:options="{ zoomControl: true, attributionControl: true }"
|
||||
:marker-zoom-animation="true"
|
||||
@click="addMarker"
|
||||
@update:zoom="zoomUpdated"
|
||||
@update:center="centerUpdated"
|
||||
>
|
||||
<l-tile-layer :url="url" :attribution="attribution" />
|
||||
<l-marker ref="marker" :lat-lng="marker" draggable @update:lat-lng="latLngUpdate">
|
||||
<l-popup ref="popup"> {{ title }} </l-popup>
|
||||
</l-marker>
|
||||
</l-map>
|
||||
</div>
|
||||
</template>
|
||||
@ -126,6 +126,7 @@ export default {
|
||||
{ src: '~/plugins/vue-filters.js' },
|
||||
{ src: '~/plugins/vue-infinite-loading.js', ssr: false },
|
||||
{ src: '~/plugins/vue-observe-visibility.js', ssr: false },
|
||||
{ src: '~/plugins/v-leaflet.js', ssr: false },
|
||||
{ src: '~/plugins/v-mapbox.js', mode: 'client' },
|
||||
],
|
||||
|
||||
|
||||
@ -39,6 +39,8 @@
|
||||
"graphql": "~14.7.0",
|
||||
"intersection-observer": "^0.12.0",
|
||||
"jsonwebtoken": "~9.0.0",
|
||||
"leaflet": "^1.9.3",
|
||||
"leaflet-geosearch": "^3.7.0",
|
||||
"linkify-it": "~3.0.2",
|
||||
"mapbox-gl": "1.13.2",
|
||||
"node-fetch": "^2.6.1",
|
||||
@ -60,6 +62,8 @@
|
||||
"vue-observe-visibility": "^1.0.0",
|
||||
"vue-scrollto": "^2.20.0",
|
||||
"vue-sweetalert-icons": "~4.3.1",
|
||||
"vue2-leaflet": "^2.7.1",
|
||||
"vue2-leaflet-geosearch": "^1.0.6",
|
||||
"vuex-i18n": "~1.13.1",
|
||||
"xregexp": "^4.3.0",
|
||||
"zxcvbn": "^4.4.2"
|
||||
|
||||
6
webapp/plugins/v-leaflet.js
Normal file
6
webapp/plugins/v-leaflet.js
Normal file
@ -0,0 +1,6 @@
|
||||
import Vue from 'vue';
|
||||
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
|
||||
|
||||
Vue.component('l-map', LMap);
|
||||
Vue.component('l-tile-layer', LTileLayer);
|
||||
Vue.component('l-marker', LMarker);
|
||||
100
webapp/yarn.lock
100
webapp/yarn.lock
@ -960,6 +960,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.7.tgz#66fe23b3c8569220817d5feb8b9dcdc95bb4f71b"
|
||||
integrity sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==
|
||||
|
||||
"@babel/parser@^7.18.4":
|
||||
version "7.21.4"
|
||||
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17"
|
||||
integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==
|
||||
|
||||
"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
|
||||
version "7.18.6"
|
||||
resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
|
||||
@ -3152,6 +3157,13 @@
|
||||
resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-5.1.0.tgz#cee1d77ada0d0dbbe77201d18b1ebabf432d9c0f"
|
||||
integrity sha512-0VonSKh7fBCqvY+V2FLN2ZW4pR4ZtWJalWmwSaiaB7yK7y4qp8vDfuaq9QdLjf/cdZGx3M7Wc4Q+x4fZHxI21Q==
|
||||
|
||||
"@googlemaps/js-api-loader@^1.14.3":
|
||||
version "1.15.1"
|
||||
resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-1.15.1.tgz#7d5f1d55a4ec5c99b1d8f0708f3a46b83a71384c"
|
||||
integrity sha512-AsnEgNsB7S/VdrHGEQUaUM2e5tmjFGKBAfzR/AqO8O7TPq/jQGvoRw5liPBw4EMF38RDsHmKDV89q/X+qiUREQ==
|
||||
dependencies:
|
||||
fast-deep-equal "^3.1.3"
|
||||
|
||||
"@hapi/address@2.x.x":
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.0.0.tgz#9f05469c88cb2fd3dcd624776b54ee95c312126a"
|
||||
@ -6121,6 +6133,15 @@
|
||||
"@vue/compiler-core" "3.2.45"
|
||||
"@vue/shared" "3.2.45"
|
||||
|
||||
"@vue/compiler-sfc@2.7.14":
|
||||
version "2.7.14"
|
||||
resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz#3446fd2fbb670d709277fc3ffa88efc5e10284fd"
|
||||
integrity sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==
|
||||
dependencies:
|
||||
"@babel/parser" "^7.18.4"
|
||||
postcss "^8.4.14"
|
||||
source-map "^0.6.1"
|
||||
|
||||
"@vue/compiler-sfc@^3.0.7":
|
||||
version "3.1.5"
|
||||
resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.1.5.tgz#e61e54f3a963b0f4a8e523fbb8632390dc52b0d6"
|
||||
@ -9995,6 +10016,11 @@ csstype@^2.2.0, csstype@^2.5.7:
|
||||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41"
|
||||
integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==
|
||||
|
||||
csstype@^3.1.0:
|
||||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
|
||||
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
|
||||
|
||||
cuint@^0.2.2:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
|
||||
@ -14878,6 +14904,27 @@ lcid@^1.0.0:
|
||||
dependencies:
|
||||
invert-kv "^1.0.0"
|
||||
|
||||
leaflet-geosearch@^2.6.0:
|
||||
version "2.7.0"
|
||||
resolved "https://registry.yarnpkg.com/leaflet-geosearch/-/leaflet-geosearch-2.7.0.tgz#0f7b319486ea344b00639b84b338b4087bf6b839"
|
||||
integrity sha512-6rZIZ5mp9Ifp3R37DKe7ipHV6/qnUY5kP1gNDz3oMT4hp5FqKyB2V4enoTDT1iziE8yrn0hy/OP9oI4HG1dKEw==
|
||||
dependencies:
|
||||
lodash.debounce "^4.0.8"
|
||||
nodent-runtime "^3.0.4"
|
||||
|
||||
leaflet-geosearch@^3.7.0:
|
||||
version "3.7.0"
|
||||
resolved "https://registry.yarnpkg.com/leaflet-geosearch/-/leaflet-geosearch-3.7.0.tgz#42f8918ed2584956c90d8c8798cc13aa8a22972f"
|
||||
integrity sha512-pvDiBc+gnl0eCazT8Ls88cbCQN6NVFoYYqlK6wtQFxObkNlzlj1p919XKuhKJwrLQiF97GxY8pny5mcV9kCe6g==
|
||||
optionalDependencies:
|
||||
"@googlemaps/js-api-loader" "^1.14.3"
|
||||
leaflet "^1.6.0"
|
||||
|
||||
leaflet@^1.2.0, leaflet@^1.6.0, leaflet@^1.9.3:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.3.tgz#52ec436954964e2d3d39e0d433da4b2500d74414"
|
||||
integrity sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ==
|
||||
|
||||
left-pad@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
|
||||
@ -15905,6 +15952,11 @@ nanoid@^3.1.31:
|
||||
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
|
||||
integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
|
||||
|
||||
nanoid@^3.3.4:
|
||||
version "3.3.6"
|
||||
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
|
||||
integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
|
||||
|
||||
nanomatch@^1.2.9:
|
||||
version "1.2.13"
|
||||
resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
|
||||
@ -16141,6 +16193,11 @@ nodemon@^1.19.4:
|
||||
undefsafe "^2.0.2"
|
||||
update-notifier "^2.5.0"
|
||||
|
||||
nodent-runtime@^3.0.4:
|
||||
version "3.2.1"
|
||||
resolved "https://registry.yarnpkg.com/nodent-runtime/-/nodent-runtime-3.2.1.tgz#9e2755d85e39f764288f0d4752ebcfe3e541e00e"
|
||||
integrity sha512-7Ws63oC+215smeKJQCxzrK21VFVlCFBkwl0MOObt0HOpVQXs3u483sAmtkF33nNqZ5rSOQjB76fgyPBmAUrtCA==
|
||||
|
||||
nopt@^4.0.1:
|
||||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
|
||||
@ -17920,6 +17977,15 @@ postcss@^8.1.10:
|
||||
nanoid "^3.1.23"
|
||||
source-map-js "^0.6.2"
|
||||
|
||||
postcss@^8.4.14:
|
||||
version "8.4.21"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
|
||||
integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
|
||||
dependencies:
|
||||
nanoid "^3.3.4"
|
||||
picocolors "^1.0.0"
|
||||
source-map-js "^1.0.2"
|
||||
|
||||
potpack@^1.0.1:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/potpack/-/potpack-1.0.2.tgz#23b99e64eb74f5741ffe7656b5b5c4ddce8dfc14"
|
||||
@ -20065,6 +20131,11 @@ source-map-js@^0.6.2:
|
||||
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
|
||||
integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
|
||||
|
||||
source-map-js@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
|
||||
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
|
||||
|
||||
source-map-resolve@^0.5.0:
|
||||
version "0.5.3"
|
||||
resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
|
||||
@ -22398,6 +22469,35 @@ vue2-dropzone@3.6.0:
|
||||
dependencies:
|
||||
dropzone "^5.5.1"
|
||||
|
||||
vue2-leaflet-geosearch@^1.0.6:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/vue2-leaflet-geosearch/-/vue2-leaflet-geosearch-1.0.6.tgz#7e2e78875b07f3331d4ab8223443f2837ba590ae"
|
||||
integrity sha512-Jq8DqobCG+EoFuxhzv3LqUU4ew74E+MHpO9XcEMWselnmeVe7ap+5NJAAzDdJCEMH8xPCruycGfgmB2DL7MZ/g==
|
||||
dependencies:
|
||||
leaflet-geosearch "^2.6.0"
|
||||
vue2-leaflet "^0.0.55"
|
||||
|
||||
vue2-leaflet@^0.0.55:
|
||||
version "0.0.55"
|
||||
resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-0.0.55.tgz#1a5b134ac0b7849f80513400290c9901fa3ba3b4"
|
||||
integrity sha512-o6W43I73db/aUvdk+62QopBYTi+X9yaaTAhb8DY7cSUGybnXwzGVrrr70bHrlePZgMtnMABaoFANYs14Shm2UA==
|
||||
dependencies:
|
||||
leaflet "^1.2.0"
|
||||
vue "^2.0.0-rc.8"
|
||||
|
||||
vue2-leaflet@^2.7.1:
|
||||
version "2.7.1"
|
||||
resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz#2f95c287621bf778f10804c88223877f5c049257"
|
||||
integrity sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ==
|
||||
|
||||
vue@^2.0.0-rc.8:
|
||||
version "2.7.14"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"
|
||||
integrity sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==
|
||||
dependencies:
|
||||
"@vue/compiler-sfc" "2.7.14"
|
||||
csstype "^3.1.0"
|
||||
|
||||
vue@^2.6.10:
|
||||
version "2.6.10"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user