@bagelink/vue 0.0.637 → 0.0.640

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/MapEmbed.vue.d.ts +1 -50
  2. package/dist/components/MapEmbed.vue.d.ts.map +1 -1
  3. package/dist/index.cjs +7 -9610
  4. package/dist/index.mjs +7 -9610
  5. package/dist/style.css +0 -661
  6. package/package.json +1 -3
  7. package/src/components/MapEmbed.vue +64 -64
package/src/components/MapEmbed.vue CHANGED
@@ -1,68 +1,68 @@
1
1
  <script setup lang="ts">
2
- import 'leaflet/dist/leaflet.css'
3
- import type { LatLngExpression, Layer, Marker } from 'leaflet'
4
- import { onMounted, watch } from 'vue'
5
- import L from 'leaflet'
6
-
7
- const props = withDefaults(defineProps<{
8
- center: LatLngExpression
9
- zoom: number
10
- height: number
11
- address: string
12
- zoomControl: boolean
13
- }>(), {
14
- center: () => [31.7683, 35.2137],
15
- zoom: 13,
16
- height: 400,
17
- address: '',
18
- zoomControl: true
19
- })
20
-
21
- let map = $ref<L.Map>()
22
- const markers = $ref<Marker[]>([])
23
- const id = $ref(Math.random().toString(36).substring(2, 10))
24
-
25
- function initializeMap() {
26
- if (props.address) {
27
- geocodeAddress(props.address).catch(console.error)
28
- }
29
- map = L.map(id, {
30
- center: props.center,
31
- zoom: props.zoom,
32
- zoomControl: props.zoomControl
33
- })
34
- L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map)
35
- }
36
-
37
- onMounted(initializeMap)
38
- // eslint-disable-next-line max-len
39
- const markerSVG = '<svg width="284" height="284" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M29.859 29.266A99 99 0 0 1 198.862 99.27c0 74.25-99 183.857-99 183.857s-99-109.607-99-183.858A99 99 0 0 1 29.86 29.266Zm70.004 118.961c25.513 0 46.195-20.683 46.195-46.196 0-25.513-20.682-46.195-46.195-46.195S53.667 76.518 53.667 102.03s20.683 46.196 46.196 46.196Z" fill="#F04033"/></svg>'
40
-
41
- function addMarker(latlng: LatLngExpression) {
42
- const customIcon = L.icon({
43
- iconUrl: `data:image/svg+xml;utf8,${encodeURIComponent(markerSVG)}`,
44
- iconSize: [32, 32],
45
- })
46
-
47
- if (!map) initializeMap()
48
- const marker = L.marker(latlng, { icon: customIcon }).addTo(map as L.Map)
49
- markers.push(marker)
50
- }
51
-
52
- async function geocodeAddress(address: string) {
53
- const addressURL = address.replace(/\s+/g, '+')
54
- const geocodeUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURI(addressURL)}`
55
- const res = await fetch(geocodeUrl)
56
- const data: any[] = await res.json() || []
57
- data.forEach((element) => {
58
- addMarker([element.lat, element.lon])
59
- })
60
- map?.fitBounds(L.featureGroup(markers as unknown as Layer[]).getBounds())
61
- }
62
-
63
- watch(() => props.address, (address) => {
64
- if (address) geocodeAddress(address).catch(console.error)
65
- }, { immediate: true })
2
+ // import 'leaflet/dist/leaflet.css'
3
+ // import type { LatLngExpression, Layer, Marker } from 'leaflet'
4
+ // import { onMounted, watch } from 'vue'
5
+ // import L from 'leaflet'
6
+
7
+ // const props = withDefaults(defineProps<{
8
+ // center: LatLngExpression
9
+ // zoom: number
10
+ // height: number
11
+ // address: string
12
+ // zoomControl: boolean
13
+ // }>(), {
14
+ // center: () => [31.7683, 35.2137],
15
+ // zoom: 13,
16
+ // height: 400,
17
+ // address: '',
18
+ // zoomControl: true
19
+ // })
20
+
21
+ // let map = $ref<L.Map>()
22
+ // const markers = $ref<Marker[]>([])
23
+ // const id = $ref(Math.random().toString(36).substring(2, 10))
24
+
25
+ // function initializeMap() {
26
+ // if (props.address) {
27
+ // geocodeAddress(props.address).catch(console.error)
28
+ // }
29
+ // map = L.map(id, {
30
+ // center: props.center,
31
+ // zoom: props.zoom,
32
+ // zoomControl: props.zoomControl
33
+ // })
34
+ // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map)
35
+ // }
36
+
37
+ // onMounted(initializeMap)
38
+ // // eslint-disable-next-line max-len
39
+ // const markerSVG = '<svg width="284" height="284" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M29.859 29.266A99 99 0 0 1 198.862 99.27c0 74.25-99 183.857-99 183.857s-99-109.607-99-183.858A99 99 0 0 1 29.86 29.266Zm70.004 118.961c25.513 0 46.195-20.683 46.195-46.196 0-25.513-20.682-46.195-46.195-46.195S53.667 76.518 53.667 102.03s20.683 46.196 46.196 46.196Z" fill="#F04033"/></svg>'
40
+
41
+ // function addMarker(latlng: LatLngExpression) {
42
+ // const customIcon = L.icon({
43
+ // iconUrl: `data:image/svg+xml;utf8,${encodeURIComponent(markerSVG)}`,
44
+ // iconSize: [32, 32],
45
+ // })
46
+
47
+ // if (!map) initializeMap()
48
+ // const marker = L.marker(latlng, { icon: customIcon }).addTo(map as L.Map)
49
+ // markers.push(marker)
50
+ // }
51
+
52
+ // async function geocodeAddress(address: string) {
53
+ // const addressURL = address.replace(/\s+/g, '+')
54
+ // const geocodeUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURI(addressURL)}`
55
+ // const res = await fetch(geocodeUrl)
56
+ // const data: any[] = await res.json() || []
57
+ // data.forEach((element) => {
58
+ // addMarker([element.lat, element.lon])
59
+ // })
60
+ // map?.fitBounds(L.featureGroup(markers as unknown as Layer[]).getBounds())
61
+ // }
62
+
63
+ // watch(() => props.address, (address) => {
64
+ // if (address) geocodeAddress(address).catch(console.error)
65
+ // }, { immediate: true })
66
66
  </script>
67
67
 
68
68
  <template>