Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<template>
<div style="height: 600px; width: 100%" ref="root">
fdafsd
<l-map ref="map" v-model:zoom="zoom" :center="center" :use-global-leaflet="false">
<l-tile-layer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
layer-type="base"
name="OpenStreetMap"
></l-tile-layer>
<l-geo-json :geojson="geojson"></l-geo-json>
<l-control-attribution position="bottomright" :prefix="attribution"></l-control-attribution>
</l-map>
</div>
</template>
<script setup lang="ts">
import 'leaflet/dist/leaflet.css'
import { LMap, LTileLayer, LGeoJson, LControlAttribution } from '@vue-leaflet/vue-leaflet'
import { ref, watch } from 'vue'
const zoom = ref(2)
const center = ref([47.41322, -1.219482])
const geojson = ref(null)
const attribution = ref(
'Data © ' +
"<a href='http://openstreetmap.org/copyright'>OpenStreetMap</a> " +
"contributors <a href='https://opendatacommons.org/licenses/odbl/'>ODbL</a> | " +
"Map by <a href='https://sosm.ch/'>SOSM</a> | " +
"<a id='problem-attribution' " +
"href='http://www.openstreetmap.org/fixthemap?" +
"lat=47.41330&lon=8.65639&zoom=18'>Report a problem</a>"
)
const root = ref<HTMLElement | null>(null)
watch(zoom, () => {
updateProblemLink()
})
watch(center, () => {
updateProblemLink()
})
function updateProblemLink() {
const test = root.value
if (test === null) {
return
}
test.querySelector('#problem-attribution').href =
'http://www.openstreetmap.org/fixthemap?' +
`lat=${center.value[0]}&lon=${center.value[1]}` +
`&zoom=${zoom.value}`
}
</script>