@geoql/v-mapkit.js
Version:
MapKit with the power of Vue 3
312 lines (311 loc) • 10 kB
JavaScript
(function (r, u) {
typeof exports == 'object' && typeof module < 'u'
? u(exports, require('@vueuse/core'), require('vue'))
: typeof define == 'function' && define.amd
? define(['exports', '@vueuse/core', 'vue'], u)
: ((r = typeof globalThis < 'u' ? globalThis : r || self),
u((r.VMapkit = {}), r.core, r.vue));
})(this, function (r, u, l) {
'use strict';
/*!
* @geoql/v-mapkit.js v0.3.0
* (c) 2022 Vinayak Kulkarni
* @license MIT
*/ const p = u.createGlobalState(() => ({
mapkit: l.shallowRef({}),
ui: l.reactive({ init: !1, load: !1, geocoderLoad: !1, searchLoad: !1 }),
map: l.shallowRef({}),
geocoder: l.shallowRef({}),
search: l.shallowRef({}),
})),
f = (o) => {
const a = p(),
n = l.shallowRef(a.mapkit.value);
if (a.ui.init && a.ui.load && a.map.value) {
const e = new n.value.Coordinate(o.coordinates[0], o.coordinates[1]),
i = l.ref(o.annotation),
s = new n.value.ImageAnnotation(e, i.value);
a.map.value.addAnnotation(s);
}
},
v = (o) => {
const a = p(),
n = l.shallowRef(a.mapkit.value);
if (a.ui.init && a.ui.load && a.map.value) {
const e = new n.value.Coordinate(o.coordinates[0], o.coordinates[1]),
i = l.ref(o.annotation || {}),
s = new n.value.MarkerAnnotation(e, i.value);
a.map.value.addAnnotation(s);
}
},
y = (o) => {
const a = p(),
n = l.shallowRef(a.mapkit.value);
if (a.ui.init && a.ui.load && a.map.value) {
const e = l.ref(o['circle-radius'] || 1),
i = new n.value.Coordinate(
o['circle-coordinates'][0],
o['circle-coordinates'][1],
),
s = new n.value.Style(o['circle-style'] || {}),
d = new n.value.CircleOverlay(i, e.value, { style: s });
a.map.value.addOverlay(d);
}
},
h = (o) => {
const a = p(),
n = l.shallowRef(a.mapkit.value);
if (a.ui.init && a.ui.load && a.map.value) {
const e = o['polygon-coordinates'].map(
(d) => new n.value.Coordinate(d[0], d[1]),
),
i = new n.value.Style(o['polygon-style']),
s = new n.value.PolygonOverlay(e, { style: i });
a.map.value.addOverlay(s);
}
},
w = (o) => {
const a = p(),
n = l.shallowRef(a.mapkit.value);
if (a.ui.init && a.ui.load && a.map.value) {
const e = o['polyline-coordinates'].map(
(d) => new n.value.Coordinate(d[0], d[1]),
),
i = new n.value.Style(o['polyline-style']),
s = new n.value.PolylineOverlay(e, { style: i });
a.map.value.addOverlay(s);
}
},
g = (o) => {
const a = p(),
n = l.shallowRef(a.mapkit.value);
if (a.ui.init && a.ui.load && a.map.value) {
const e = l.ref(o.options || {}),
i = l.ref(o.url),
s = new n.value.TileOverlay(i.value, e.value);
a.map.value.addTileOverlay(s);
}
},
E = [
'region-change-start',
'region-change-end',
'rotation-start',
'rotation-end',
'scroll-start',
'scroll-end',
'zoom-start',
'zoom-end',
'map-type-change',
],
M = ['select', 'deselect', 'drag-start', 'dragging', 'drag-end'],
L = ['user-location-change', 'user-location-error'],
b = ['single-tap', 'double-tap', 'long-press'],
S = async (o) =>
new Promise((a, n) => {
const e = `https://cdn.apple-mapkit.com/mk/${o}/mapkit.js`;
if (window.mapkit) return a(window.mapkit);
const i = document.createElement('script');
(i.onload = () => a(window.mapkit)),
(i.onerror = (s) => n(s)),
document.body.appendChild(i),
(i.src = e);
}),
O = l.defineComponent({
name: 'VMap',
props: {
version: {
type: String,
required: !1,
default: '5.x.x',
description: 'The version of mapkit.js to be map-loaded',
},
language: {
type: String,
required: !1,
default: 'en',
description: 'The language maps to be map-loaded in',
},
accessToken: {
type: String,
required: !0,
default: '',
description: 'The JWT required for loading the mapkit library',
},
initOptions: {
type: Object,
required: !1,
default: () => ({}),
description: 'The init options of loading map',
},
mapOptions: { type: Object, required: !1, default: () => ({}) },
geocoderOptions: {
type: Object,
required: !1,
default: () => ({ enabled: !1 }),
},
searchOptions: {
type: Object,
required: !1,
default: () => ({ enabled: !1 }),
},
},
emits: [
'map',
'map-initialized',
'map-loaded',
'map-destroyed',
'geocoder-loaded',
'search-loaded',
],
setup(o, { slots: a, emit: n }) {
const e = p();
let i = l.reactive({});
n('map-initialized', e.ui.init),
n('map-loaded', e.ui.load),
n('geocoder-loaded', e.ui.geocoderLoad),
n('search-loaded', e.ui.searchLoad),
u.tryOnMounted(async () => {
try {
(i = await S(o.version)), (e.mapkit.value = i);
} catch (t) {
throw new Error(t);
}
if (!e.ui.init) {
try {
await s();
} catch (t) {
throw new Error(t);
}
if (e.ui.init && !e.ui.load) {
try {
await d(), _();
} catch (t) {
throw new Error(t);
}
if (o.geocoderOptions.enabled)
try {
await P();
} catch (t) {
throw new Error(t);
}
if (o.searchOptions.enabled)
try {
await C();
} catch (t) {
throw new Error(t);
}
}
}
}),
u.tryOnUnmounted(() => {
e.map.value instanceof i.Map &&
(e.map.value.destroy(), n('map-destroyed', !0));
});
async function s() {
return new Promise((t, c) => {
const I = {
authorizationCallback: (m) => {
m(o.accessToken);
},
};
i.init({ ...I, ...o.initOptions }),
(e.ui.init = !0),
t('Map Initialized'),
n('map-initialized', e.ui.init),
i.addEventListener('error', (m) => {
(e.ui.init = !1), c(`Failed to initialize Map: ${m}`);
});
});
}
async function d() {
return new Promise((t, c) => {
(e.map.value = new i.Map('map', { ...o.mapOptions })),
e.map.value instanceof i.Map
? ((e.ui.load = !0), t('Map Loaded'))
: ((e.ui.load = !1), c('Failed to load Map')),
n('map-loaded', e.ui.load),
n('map', e.map.value);
});
}
async function P() {
return new Promise((t, c) => {
(e.geocoder.value = new i.Geocoder(o.geocoderOptions.options)),
e.geocoder.value instanceof i.Geocoder
? ((e.ui.geocoderLoad = !0), t('Geocoder Loaded'))
: ((e.ui.geocoderLoad = !1), c('Failed to load Geocoder')),
n('geocoder-loaded', e.ui.geocoderLoad);
});
}
async function C() {
return new Promise((t, c) => {
(e.search.value = new i.Search(o.searchOptions.options)),
e.search.value instanceof i.Search
? ((e.ui.searchLoad = !0), t('Search Loaded'))
: ((e.ui.searchLoad = !1), c('Failed to load Search')),
n('search-loaded', e.ui.searchLoad);
});
}
function _() {
q(), j(), z(), R();
}
function q() {
E.forEach((t) => {
e.map.value.addEventListener(t, (c) => {
console.log(`Map Display Event ${t}`, c);
});
});
}
function R() {
b.forEach((t) => {
e.map.value.addEventListener(t, (c) => {
console.log(`Map Interaction Event ${t}`, c);
});
});
}
function j() {
M.forEach((t) => {
e.map.value.addEventListener(t, (c) => {
console.log(`Map Annotation & Overlay Event ${t}`, c);
});
});
}
function z() {
L.forEach((t) => {
e.map.value.addEventListener(t, (c) => {
console.log(`Map User Location Event ${t}`, c);
});
});
}
return () =>
l.h('div', { id: 'map' }, a && a.default ? a.default() : {});
},
}),
G = '',
T = (o) => {};
let k = !1;
const A = (o) => {
k ||
(T(),
o.component('VMap', O),
o.component('ImageAnnotation', f),
o.component('MarkerAnnotation', v),
o.component('CircleOverlay', y),
o.component('PolygonOverlay', h),
o.component('PolylineOverlay', w),
o.component('TileOverlay', g),
(k = !0));
};
(r.CircleOverlay = y),
(r.ImageAnnotation = f),
(r.MarkerAnnotation = v),
(r.PolygonOverlay = h),
(r.PolylineOverlay = w),
(r.TileOverlay = g),
(r.VMap = O),
(r.default = A),
Object.defineProperties(r, {
__esModule: { value: !0 },
[Symbol.toStringTag]: { value: 'Module' },
});
});
//# sourceMappingURL=v-mapkit.umd.js.map