@geoql/v-mapkit.js
Version:
MapKit with the power of Vue 3
304 lines (303 loc) • 9.11 kB
JavaScript
;
/*!
* @geoql/v-mapkit.js v0.3.0
* (c) 2022 Vinayak Kulkarni
* @license MIT
*/ Object.defineProperties(exports, {
__esModule: { value: !0 },
[Symbol.toStringTag]: { value: 'Module' },
});
const p = require('@vueuse/core'),
r = require('vue'),
d = p.createGlobalState(() => ({
mapkit: r.shallowRef({}),
ui: r.reactive({ init: !1, load: !1, geocoderLoad: !1, searchLoad: !1 }),
map: r.shallowRef({}),
geocoder: r.shallowRef({}),
search: r.shallowRef({}),
})),
m = (o) => {
const a = d(),
t = r.shallowRef(a.mapkit.value);
if (a.ui.init && a.ui.load && a.map.value) {
const e = new t.value.Coordinate(o.coordinates[0], o.coordinates[1]),
i = r.ref(o.annotation),
l = new t.value.ImageAnnotation(e, i.value);
a.map.value.addAnnotation(l);
}
},
f = (o) => {
const a = d(),
t = r.shallowRef(a.mapkit.value);
if (a.ui.init && a.ui.load && a.map.value) {
const e = new t.value.Coordinate(o.coordinates[0], o.coordinates[1]),
i = r.ref(o.annotation || {}),
l = new t.value.MarkerAnnotation(e, i.value);
a.map.value.addAnnotation(l);
}
},
y = (o) => {
const a = d(),
t = r.shallowRef(a.mapkit.value);
if (a.ui.init && a.ui.load && a.map.value) {
const e = r.ref(o['circle-radius'] || 1),
i = new t.value.Coordinate(
o['circle-coordinates'][0],
o['circle-coordinates'][1],
),
l = new t.value.Style(o['circle-style'] || {}),
c = new t.value.CircleOverlay(i, e.value, { style: l });
a.map.value.addOverlay(c);
}
},
h = (o) => {
const a = d(),
t = r.shallowRef(a.mapkit.value);
if (a.ui.init && a.ui.load && a.map.value) {
const e = o['polygon-coordinates'].map(
(c) => new t.value.Coordinate(c[0], c[1]),
),
i = new t.value.Style(o['polygon-style']),
l = new t.value.PolygonOverlay(e, { style: i });
a.map.value.addOverlay(l);
}
},
g = (o) => {
const a = d(),
t = r.shallowRef(a.mapkit.value);
if (a.ui.init && a.ui.load && a.map.value) {
const e = o['polyline-coordinates'].map(
(c) => new t.value.Coordinate(c[0], c[1]),
),
i = new t.value.Style(o['polyline-style']),
l = new t.value.PolylineOverlay(e, { style: i });
a.map.value.addOverlay(l);
}
},
w = (o) => {
const a = d(),
t = r.shallowRef(a.mapkit.value);
if (a.ui.init && a.ui.load && a.map.value) {
const e = r.ref(o.options || {}),
i = r.ref(o.url),
l = new t.value.TileOverlay(i.value, e.value);
a.map.value.addTileOverlay(l);
}
},
T = [
'region-change-start',
'region-change-end',
'rotation-start',
'rotation-end',
'scroll-start',
'scroll-end',
'zoom-start',
'zoom-end',
'map-type-change',
],
C = ['select', 'deselect', 'drag-start', 'dragging', 'drag-end'],
_ = ['user-location-change', 'user-location-error'],
q = ['single-tap', 'double-tap', 'long-press'],
R = async (o) =>
new Promise((a, t) => {
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 = (l) => t(l)),
document.body.appendChild(i),
(i.src = e);
}),
O = r.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: t }) {
const e = d();
let i = r.reactive({});
t('map-initialized', e.ui.init),
t('map-loaded', e.ui.load),
t('geocoder-loaded', e.ui.geocoderLoad),
t('search-loaded', e.ui.searchLoad),
p.tryOnMounted(async () => {
try {
(i = await R(o.version)), (e.mapkit.value = i);
} catch (n) {
throw new Error(n);
}
if (!e.ui.init) {
try {
await l();
} catch (n) {
throw new Error(n);
}
if (e.ui.init && !e.ui.load) {
try {
await c(), M();
} catch (n) {
throw new Error(n);
}
if (o.geocoderOptions.enabled)
try {
await k();
} catch (n) {
throw new Error(n);
}
if (o.searchOptions.enabled)
try {
await E();
} catch (n) {
throw new Error(n);
}
}
}
}),
p.tryOnUnmounted(() => {
e.map.value instanceof i.Map &&
(e.map.value.destroy(), t('map-destroyed', !0));
});
async function l() {
return new Promise((n, s) => {
const P = {
authorizationCallback: (u) => {
u(o.accessToken);
},
};
i.init({ ...P, ...o.initOptions }),
(e.ui.init = !0),
n('Map Initialized'),
t('map-initialized', e.ui.init),
i.addEventListener('error', (u) => {
(e.ui.init = !1), s(`Failed to initialize Map: ${u}`);
});
});
}
async function c() {
return new Promise((n, s) => {
(e.map.value = new i.Map('map', { ...o.mapOptions })),
e.map.value instanceof i.Map
? ((e.ui.load = !0), n('Map Loaded'))
: ((e.ui.load = !1), s('Failed to load Map')),
t('map-loaded', e.ui.load),
t('map', e.map.value);
});
}
async function k() {
return new Promise((n, s) => {
(e.geocoder.value = new i.Geocoder(o.geocoderOptions.options)),
e.geocoder.value instanceof i.Geocoder
? ((e.ui.geocoderLoad = !0), n('Geocoder Loaded'))
: ((e.ui.geocoderLoad = !1), s('Failed to load Geocoder')),
t('geocoder-loaded', e.ui.geocoderLoad);
});
}
async function E() {
return new Promise((n, s) => {
(e.search.value = new i.Search(o.searchOptions.options)),
e.search.value instanceof i.Search
? ((e.ui.searchLoad = !0), n('Search Loaded'))
: ((e.ui.searchLoad = !1), s('Failed to load Search')),
t('search-loaded', e.ui.searchLoad);
});
}
function M() {
L(), S(), A(), b();
}
function L() {
T.forEach((n) => {
e.map.value.addEventListener(n, (s) => {
console.log(`Map Display Event ${n}`, s);
});
});
}
function b() {
q.forEach((n) => {
e.map.value.addEventListener(n, (s) => {
console.log(`Map Interaction Event ${n}`, s);
});
});
}
function S() {
C.forEach((n) => {
e.map.value.addEventListener(n, (s) => {
console.log(`Map Annotation & Overlay Event ${n}`, s);
});
});
}
function A() {
_.forEach((n) => {
e.map.value.addEventListener(n, (s) => {
console.log(`Map User Location Event ${n}`, s);
});
});
}
return () => r.h('div', { id: 'map' }, a && a.default ? a.default() : {});
},
});
const z = (o) => {};
let v = !1;
const I = (o) => {
v ||
(z(),
o.component('VMap', O),
o.component('ImageAnnotation', m),
o.component('MarkerAnnotation', f),
o.component('CircleOverlay', y),
o.component('PolygonOverlay', h),
o.component('PolylineOverlay', g),
o.component('TileOverlay', w),
(v = !0));
},
j = I;
exports.CircleOverlay = y;
exports.ImageAnnotation = m;
exports.MarkerAnnotation = f;
exports.PolygonOverlay = h;
exports.PolylineOverlay = g;
exports.TileOverlay = w;
exports.VMap = O;
exports.default = j;
//# sourceMappingURL=v-mapkit.js.map