Skip to content

Commit 211dbf7

Browse files
soalsoal
authored
Lazy-loading Mapbox and Marker DOM events (#119)
* Mapbox-gl as a prop of MglMap (#118) * Marker DOM events implementation (#117) * 0.4.0
1 parent 43660a6 commit 211dbf7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+2559
-5875
lines changed

‎dist/vue-mapbox.common.js‎

Lines changed: 147 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,62 @@
11
module.exports = /******/ (function(modules) {
22
// webpackBootstrap
3-
/******/ // The module cache
4-
/******/ var installedModules = {}; // The require function
3+
/******/ // install a JSONP callback for chunk loading
4+
/******/ function webpackJsonpCallback(data) {
5+
/******/ var chunkIds = data[0];
6+
/******/ var moreModules = data[1]; // add "moreModules" to the modules object, // then flag all "chunkIds" as loaded and fire callback
7+
/******/
8+
/******/
9+
/******/ /******/ /******/ var moduleId,
10+
chunkId,
11+
i = 0,
12+
resolves = [];
13+
/******/ for (; i < chunkIds.length; i++) {
14+
/******/ chunkId = chunkIds[i];
15+
/******/ if (installedChunks[chunkId]) {
16+
/******/ resolves.push(installedChunks[chunkId][0]);
17+
/******/
18+
}
19+
/******/ installedChunks[chunkId] = 0;
20+
/******/
21+
}
22+
/******/ for (moduleId in moreModules) {
23+
/******/ if (
24+
Object.prototype.hasOwnProperty.call(moreModules, moduleId)
25+
) {
26+
/******/ modules[moduleId] = moreModules[moduleId];
27+
/******/
28+
}
29+
/******/
30+
}
31+
/******/ if (parentJsonpFunction) parentJsonpFunction(data);
32+
/******/
33+
/******/ while (resolves.length) {
34+
/******/ resolves.shift()();
35+
/******/
36+
}
37+
/******/
38+
/******/
39+
} // The module cache
40+
/******/
41+
/******/
42+
/******/ /******/ var installedModules = {}; // object to store loaded and loading chunks // undefined = chunk not loaded, null = chunk preloaded/prefetched // Promise = chunk loading, 0 = chunk loaded
43+
/******/
44+
/******/ /******/ /******/ /******/ var installedChunks = {
45+
/******/ 0: 0
46+
/******/
47+
}; // script path function
48+
/******/
49+
/******/
50+
/******/
51+
/******/ /******/ function jsonpScriptSrc(chunkId) {
52+
/******/ return (
53+
__webpack_require__.p +
54+
"vue-mapbox.common." +
55+
({}[chunkId] || chunkId) +
56+
".js"
57+
);
58+
/******/
59+
} // The require function
560
/******/
661
/******/ /******/ function __webpack_require__(moduleId) {
762
/******/
@@ -107,7 +162,24 @@ module.exports = /******/ (function(modules) {
107162
return Object.prototype.hasOwnProperty.call(object, property);
108163
}; // __webpack_public_path__
109164
/******/
110-
/******/ /******/ __webpack_require__.p = ""; // Load entry module and return exports
165+
/******/ /******/ __webpack_require__.p = ""; // on error function for async loading
166+
/******/
167+
/******/ /******/ __webpack_require__.oe = function(err) {
168+
console.error(err);
169+
throw err;
170+
};
171+
/******/
172+
/******/ var jsonpArray = ((typeof self !== "undefined" ? self : this)[
173+
"webpackJsonpvue_mapbox"
174+
] =
175+
(typeof self !== "undefined" ? self : this)["webpackJsonpvue_mapbox"] ||
176+
[]);
177+
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
178+
/******/ jsonpArray.push = webpackJsonpCallback;
179+
/******/ jsonpArray = jsonpArray.slice();
180+
/******/ for (var i = 0; i < jsonpArray.length; i++)
181+
webpackJsonpCallback(jsonpArray[i]);
182+
/******/ var parentJsonpFunction = oldJsonpFunction; // Load entry module and return exports
111183
/******/
112184
/******/
113185
/******/ /******/ return __webpack_require__(
@@ -1772,6 +1844,20 @@ module.exports = /******/ (function(modules) {
17721844
/***/
17731845
},
17741846

1847+
/***/ "8615": /***/ function(module, exports, __webpack_require__) {
1848+
// https://github.com/tc39/proposal-object-values-entries
1849+
var $export = __webpack_require__("5ca1");
1850+
var $values = __webpack_require__("504c")(false);
1851+
1852+
$export($export.S, "Object", {
1853+
values: function values(it) {
1854+
return $values(it);
1855+
}
1856+
});
1857+
1858+
/***/
1859+
},
1860+
17751861
/***/ "86cc": /***/ function(module, exports, __webpack_require__) {
17761862
var anObject = __webpack_require__("cb7c");
17771863
var IE8_DOM_DEFINE = __webpack_require__("c69a");
@@ -2530,7 +2616,7 @@ module.exports = /******/ (function(modules) {
25302616
// Indicate to webpack that this file can be concatenated
25312617
/* harmony default export */ var setPublicPath = null;
25322618

2533-
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"47f5d000-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/map/GlMap.vue?vue&type=template&id=a6b1c212&
2619+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"47f5d000-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/map/GlMap.vue?vue&type=template&id=b8a4f864&
25342620
var render = function() {
25352621
var _vm = this;
25362622
var _h = _vm.$createElement;
@@ -2551,7 +2637,7 @@ module.exports = /******/ (function(modules) {
25512637
}
25522638
];
25532639

2554-
// CONCATENATED MODULE: ./src/components/map/GlMap.vue?vue&type=template&id=a6b1c212&
2640+
// CONCATENATED MODULE: ./src/components/map/GlMap.vue?vue&type=template&id=b8a4f864&
25552641

25562642
// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom.iterable.js
25572643
var web_dom_iterable = __webpack_require__("ac6a");
@@ -2562,13 +2648,8 @@ module.exports = /******/ (function(modules) {
25622648
// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.object.keys.js
25632649
var es6_object_keys = __webpack_require__("456d");
25642650

2565-
// EXTERNAL MODULE: external {"commonjs":"mapbox-gl","commonjs2":"mapbox-gl","amd":"mapbox-gl","root":"mapbox-gl"}
2566-
var external_commonjs_mapbox_gl_commonjs2_mapbox_gl_amd_mapbox_gl_root_mapbox_gl_ = __webpack_require__(
2567-
"2ff6"
2568-
);
2569-
var external_commonjs_mapbox_gl_commonjs2_mapbox_gl_amd_mapbox_gl_root_mapbox_gl_default = /*#__PURE__*/ __webpack_require__.n(
2570-
external_commonjs_mapbox_gl_commonjs2_mapbox_gl_amd_mapbox_gl_root_mapbox_gl_
2571-
);
2651+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.promise.js
2652+
var es6_promise = __webpack_require__("551c");
25722653

25732654
// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js
25742655
function _defineProperty(obj, key, value) {
@@ -3070,9 +3151,6 @@ module.exports = /******/ (function(modules) {
30703151
/* harmony default export */ var withWatchers = {
30713152
watch: makeWatchers()
30723153
};
3073-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.promise.js
3074-
var es6_promise = __webpack_require__("551c");
3075-
30763154
// CONCATENATED MODULE: ./src/components/map/mixins/withPrivateMethods.js
30773155

30783156
/* harmony default export */ var withPrivateMethods = {
@@ -3132,17 +3210,20 @@ module.exports = /******/ (function(modules) {
31323210
$_loadMap: function $_loadMap() {
31333211
var _this3 = this;
31343212

3135-
return new Promise(function(resolve) {
3136-
if (_this3.accessToken)
3137-
_this3.mapbox.accessToken = _this3.accessToken;
3138-
var map = new _this3.mapbox.Map(
3139-
_objectSpread({}, _this3._props, {
3140-
container: _this3.$refs.container,
3141-
style: _this3.mapStyle
3142-
})
3143-
);
3144-
map.on("load", function() {
3145-
return resolve(map);
3213+
return this.mapboxPromise.then(function(mapbox) {
3214+
_this3.mapbox = mapbox.default ? mapbox.default : mapbox;
3215+
return new Promise(function(resolve) {
3216+
if (_this3.accessToken)
3217+
_this3.mapbox.accessToken = _this3.accessToken;
3218+
var map = new _this3.mapbox.Map(
3219+
_objectSpread({}, _this3._props, {
3220+
container: _this3.$refs.container,
3221+
style: _this3.mapStyle
3222+
})
3223+
);
3224+
map.on("load", function() {
3225+
return resolve(map);
3226+
});
31463227
});
31473228
});
31483229
},
@@ -3230,7 +3311,15 @@ module.exports = /******/ (function(modules) {
32303311
withPrivateMethods,
32313312
withEvents
32323313
],
3233-
props: options,
3314+
props: _objectSpread(
3315+
{
3316+
mapboxGl: {
3317+
type: Object,
3318+
default: null
3319+
}
3320+
},
3321+
options
3322+
),
32343323
provide: function provide() {
32353324
var self = this;
32363325
return {
@@ -3286,8 +3375,11 @@ module.exports = /******/ (function(modules) {
32863375
created: function created() {
32873376
this.map = null;
32883377
this.propsIsUpdating = {};
3289-
this.mapbox =
3290-
external_commonjs_mapbox_gl_commonjs2_mapbox_gl_amd_mapbox_gl_root_mapbox_gl_default.a;
3378+
this.mapboxPromise = this.mapboxGl
3379+
? Promise.resolve(this.mapboxGl)
3380+
: Promise.resolve(/* import() */).then(
3381+
__webpack_require__.t.bind(null, "2ff6", 7)
3382+
);
32913383
},
32923384
mounted: function mounted() {
32933385
var _this = this;
@@ -3666,8 +3758,8 @@ module.exports = /******/ (function(modules) {
36663758
this.$_addControl();
36673759
}
36683760
};
3669-
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"47f5d000-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/UI/Marker.vue?vue&type=template&id=5c629593&
3670-
var Markervue_type_template_id_5c629593_render = function() {
3761+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"47f5d000-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/UI/Marker.vue?vue&type=template&id=63af2177&
3762+
var Markervue_type_template_id_63af2177_render = function() {
36713763
var _vm = this;
36723764
var _h = _vm.$createElement;
36733765
var _c = _vm._self._c || _h;
@@ -3678,9 +3770,12 @@ module.exports = /******/ (function(modules) {
36783770
2
36793771
);
36803772
};
3681-
var Markervue_type_template_id_5c629593_staticRenderFns = [];
3773+
var Markervue_type_template_id_63af2177_staticRenderFns = [];
3774+
3775+
// CONCATENATED MODULE: ./src/components/UI/Marker.vue?vue&type=template&id=63af2177&
36823776

3683-
// CONCATENATED MODULE: ./src/components/UI/Marker.vue?vue&type=template&id=5c629593&
3777+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.values.js
3778+
var es7_object_values = __webpack_require__("8615");
36843779

36853780
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/UI/Marker.vue?vue&type=script&lang=js&
36863781

@@ -3699,6 +3794,11 @@ module.exports = /******/ (function(modules) {
36993794
dragstart: "dragstart",
37003795
dragend: "dragend"
37013796
};
3797+
var markerDOMEvents = {
3798+
click: "click",
3799+
mouseenter: "mouseenter",
3800+
mouseleave: "mouseleave"
3801+
};
37023802
/* harmony default export */ var Markervue_type_script_lang_js_ = {
37033803
name: "MapMarker",
37043804
mixins: [withEvents, withSelfEvents],
@@ -3792,6 +3892,7 @@ module.exports = /******/ (function(modules) {
37923892
methods: {
37933893
$_addMarker: function $_addMarker() {
37943894
this.marker.setLngLat(this.coordinates).addTo(this.map);
3895+
this.$_bindMarkerDOMEvents();
37953896
this.$_emitEvent("added", {
37963897
marker: this.marker
37973898
});
@@ -3801,6 +3902,17 @@ module.exports = /******/ (function(modules) {
38013902
marker: this.marker
38023903
});
38033904
},
3905+
$_bindMarkerDOMEvents: function $_bindMarkerDOMEvents() {
3906+
var _this2 = this;
3907+
3908+
Object.keys(this.$listeners).forEach(function(key) {
3909+
if (Object.values(markerDOMEvents).includes(key)) {
3910+
_this2.marker._element.addEventListener(key, function(event) {
3911+
_this2.$_emitSelfEvent(event);
3912+
});
3913+
}
3914+
});
3915+
},
38043916
remove: function remove() {
38053917
this.marker.remove();
38063918
this.$_emitEvent("removed");
@@ -3818,8 +3930,8 @@ module.exports = /******/ (function(modules) {
38183930

38193931
var Marker_component = normalizeComponent(
38203932
UI_Markervue_type_script_lang_js_,
3821-
Markervue_type_template_id_5c629593_render,
3822-
Markervue_type_template_id_5c629593_staticRenderFns,
3933+
Markervue_type_template_id_63af2177_render,
3934+
Markervue_type_template_id_63af2177_staticRenderFns,
38233935
false,
38243936
null,
38253937
null,

0 commit comments

Comments
 (0)