mapbox-gl-vue - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

dist/app.js

@@ -66,3 +66,3 @@ /******/ (function(modules) { // webpackBootstrap
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ 	return __webpack_require__(__webpack_require__.s = 2);
 /******/ })
@@ -76,9 +76,69 @@ /************************************************************************/
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony default export */ __webpack_exports__["default"] = ({
-	template: '<div :id="(mapOptions.hasOwnProperty(\'container\') ? mapOptions.container : \'map\')"></div>',
-	data () {
-		return {
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_bustCache_Mapbox_vue__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_bustCache_Mapbox_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_bustCache_Mapbox_vue__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_d7f5bcc2_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_bustCache_Mapbox_vue__ = __webpack_require__(4);
+var disposed = false
+var normalizeComponent = __webpack_require__(3)
+/* script */
 
-		};
+/* template */
+
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_bustCache_Mapbox_vue___default.a,
+  __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_d7f5bcc2_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_bustCache_Mapbox_vue__["a" /* default */],
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "src/components/Mapbox.vue"
+if (Component.esModule && Object.keys(Component.esModule).some(function (key) {  return key !== "default" && key.substr(0, 2) !== "__"})) {  console.error("named exports are not supported in *.vue files.")}
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-d7f5bcc2", Component.options)
+  } else {
+    hotAPI.reload("data-v-d7f5bcc2", Component.options)
+' + '  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+/* harmony default export */ __webpack_exports__["default"] = (Component.exports);
+
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+//
+//
+//
+//
+
+exports.default = {
+	data: function data() {
+		return {};
 	},
+
 	props: {
@@ -95,3 +155,3 @@ accessToken: {
 			type: Object,
-			default: () => {
+			default: function _default() {
 				return {
@@ -105,3 +165,3 @@ show: true,
 			type: Object,
-			default: () => {
+			default: function _default() {
 				return {
@@ -116,3 +176,3 @@ show: false,
 			type: Object,
-			default: () => {
+			default: function _default() {
 				return {
@@ -127,3 +187,3 @@ show: false,
 			type: Object,
-			default: () => {
+			default: function _default() {
 				return {
@@ -136,5 +196,5 @@ show: false,
 	},
-	mounted () {
+	mounted: function mounted() {
 		//Initialze Map
-		const map = this.mapInit();
+		var map = this.mapInit();
 
@@ -147,4 +207,5 @@ //Add Controls to map
 	},
+
 	methods: {
-		mapInit () {
+		mapInit: function mapInit() {
 			//Mapbox GL access token
@@ -159,3 +220,3 @@ mapboxgl.accessToken = this.accessToken;
 			//New Mapbox Instance
-			const map = new mapboxgl.Map(this.mapOptions);
+			var map = new mapboxgl.Map(this.mapOptions);
 
@@ -167,218 +228,219 @@ //Emit init event passing map object
 		},
-		registerEvents (map) {
+		registerEvents: function registerEvents(map) {
+			var _this = this;
+
 			//Map Loaded
-			map.on('load', () => {
-				this.$emit('map-load', map);
+			map.on('load', function () {
+				_this.$emit('map-load', map);
+			});
 
-				//Map Mouse Move
-				map.on('mousemove', (e) => {
-					this.$emit('map-mousemove', map, e);
-				});
+			//Map Mouse Move
+			map.on('mousemove', function (e) {
+				_this.$emit('map-mousemove', map, e);
+			});
 
-				//Map Clicked
-				map.on('click', (e) => {
-					this.$emit('map-click', map, e);
-				});
+			//Map Clicked
+			map.on('click', function (e) {
+				_this.$emit('map-click', map, e);
+			});
 
-				//Map Context Menu
-				map.on('contextmenu', (e) => {
-					this.$emit('map-contextmenu', map, e);
-				});
+			//Map Context Menu
+			map.on('contextmenu', function (e) {
+				_this.$emit('map-contextmenu', map, e);
 			});
 
 			//Map Resized
-			map.on('resize', () => {
-				this.$emit('map-resize', map);
+			map.on('resize', function () {
+				_this.$emit('map-resize', map);
 			});
 
 			//Map Webgl Context Lost 
-			map.on('resize', (e) => {
-				this.$emit('map-webglcontextlost', map, e);
+			map.on('resize', function (e) {
+				_this.$emit('map-webglcontextlost', map, e);
 			});
 
 			//Map Webgl Context Restored
-			map.on('resize', (e) => {
-				this.$emit('map-webglcontextrestored', map, e);
+			map.on('resize', function (e) {
+				_this.$emit('map-webglcontextrestored', map, e);
 			});
 
 			//Map Removed
-			map.on('remove', () => {
-				this.$emit('map-remove', map);
+			map.on('remove', function () {
+				_this.$emit('map-remove', map);
 			});
 
 			//Map Source Data Loading
-			map.on('sourcedataloading', (e) => {
-				this.$emit('map-sourcedataloading', map, e);
+			map.on('sourcedataloading', function (e) {
+				_this.$emit('map-sourcedataloading', map, e);
 			});
 
 			//Map Touch Start
-			map.on('touchstart', (e) => {
-				this.$emit('map-touchstart', map, e);
+			map.on('touchstart', function (e) {
+				_this.$emit('map-touchstart', map, e);
 			});
 
 			//Map Move Start
-			map.on('movestart', (e) => {
-				this.$emit('map-movestart', map, e);
+			map.on('movestart', function (e) {
+				_this.$emit('map-movestart', map, e);
 			});
 
 			//Map Touch Move
-			map.on('movestart', (e) => {
-				this.$emit('map-movestart', map, e);
+			map.on('movestart', function (e) {
+				_this.$emit('map-movestart', map, e);
 			});
 
 			//Map Move
-			map.on('move', (e) => {
-				this.$emit('map-move', map, e);
+			map.on('move', function (e) {
+				_this.$emit('map-move', map, e);
 			});
 
 			//Map Move End
-			map.on('moveend', (e) => {
-				this.$emit('map-moveend', map, e);
+			map.on('moveend', function (e) {
+				_this.$emit('map-moveend', map, e);
 			});
 
 			//Map Error
-			map.on('error', (e) => {
-				this.$emit('map-error', map, e);
+			map.on('error', function (e) {
+				_this.$emit('map-error', map, e);
 			});
 
 			//Map Data
-			map.on('data', (e) => {
-				this.$emit('map-data', map, e);
+			map.on('data', function (e) {
+				_this.$emit('map-data', map, e);
 			});
 
 			//Map Style Data
-			map.on('styledata', (e) => {
-				this.$emit('map-styledata', map, e);
+			map.on('styledata', function (e) {
+				_this.$emit('map-styledata', map, e);
 			});
 
 			//Map Mouse Up
-			map.on('mouseup', (e) => {
-				this.$emit('map-mouseup', map, e);
+			map.on('mouseup', function (e) {
+				_this.$emit('map-mouseup', map, e);
 			});
 
 			//Map Touch Cancel
-			map.on('touchcancel', (e) => {
-				this.$emit('map-touchcancel', map, e);
+			map.on('touchcancel', function (e) {
+				_this.$emit('map-touchcancel', map, e);
 			});
 
 			//Map Source Data
-			map.on('sourcedata', (e) => {
-				this.$emit('map-sourcedata', map, e);
+			map.on('sourcedata', function (e) {
+				_this.$emit('map-sourcedata', map, e);
 			});
 
 			//Map Data Loading
-			map.on('dataloading', (e) => {
-				this.$emit('map-dataloading', map, e);
+			map.on('dataloading', function (e) {
+				_this.$emit('map-dataloading', map, e);
 			});
 
 			//Map Style Data Loading
-			map.on('styledataloading', (e) => {
-				this.$emit('map-styledataloading', map, e);
+			map.on('styledataloading', function (e) {
+				_this.$emit('map-styledataloading', map, e);
 			});
 
 			//Map Double Click
-			map.on('dblclick', (e) => {
-				this.$emit('map-dblclick', map, e);
+			map.on('dblclick', function (e) {
+				_this.$emit('map-dblclick', map, e);
 			});
 
 			//Map Render
-			map.on('render', () => {
-				this.$emit('map-render', map);
+			map.on('render', function () {
+				_this.$emit('map-render', map);
 			});
 
 			//Map Mouse Out
-			map.on('mouseout', (e) => {
-				this.$emit('map-mouseout', map, e);
+			map.on('mouseout', function (e) {
+				_this.$emit('map-mouseout', map, e);
 			});
 
 			//Map Mouse Down
-			map.on('mousedown', (e) => {
-				this.$emit('map-mousedown', map, e);
+			map.on('mousedown', function (e) {
+				_this.$emit('map-mousedown', map, e);
 			});
 
 			//Map Touch End
-			map.on('touchend', (e) => {
-				this.$emit('map-touchend', map, e);
+			map.on('touchend', function (e) {
+				_this.$emit('map-touchend', map, e);
 			});
 
 			//Map Zoom Start
-			map.on('zoomstart', (e) => {
-				this.$emit('map-zoomstart', map, e);
+			map.on('zoomstart', function (e) {
+				_this.$emit('map-zoomstart', map, e);
 			});
 
 			//Map Zoom End
-			map.on('zoomend', (e) => {
-				this.$emit('map-zoomend', map, e);
+			map.on('zoomend', function (e) {
+				_this.$emit('map-zoomend', map, e);
 			});
 
 			//Map Zoom
-			map.on('zoom', (e) => {
-				this.$emit('map-zoom', map, e);
+			map.on('zoom', function (e) {
+				_this.$emit('map-zoom', map, e);
 			});
 
 			//Map Box Zoom Cancel
-			map.on('boxzoomcancel', (e) => {
-				this.$emit('map-boxzoomcancel', map, e);
+			map.on('boxzoomcancel', function (e) {
+				_this.$emit('map-boxzoomcancel', map, e);
 			});
 
 			//Map Box Zoom End
-			map.on('boxzoomend', (e) => {
-				this.$emit('map-boxzoomend', map, e);
+			map.on('boxzoomend', function (e) {
+				_this.$emit('map-boxzoomend', map, e);
 			});
 
 			//Map Box Zoom Start
-			map.on('boxzoomstart', (e) => {
-				this.$emit('map-boxzoomstart', map, e);
+			map.on('boxzoomstart', function (e) {
+				_this.$emit('map-boxzoomstart', map, e);
 			});
 
 			//Map Rotate Start
-			map.on('rotatestart', (e) => {
-				this.$emit('map-rotatestart', map, e);
+			map.on('rotatestart', function (e) {
+				_this.$emit('map-rotatestart', map, e);
 			});
 
 			//Map Rotate
-			map.on('rotate', (e) => {
-				this.$emit('map-rotate', map, e);
+			map.on('rotate', function (e) {
+				_this.$emit('map-rotate', map, e);
 			});
 
 			//Map Rotate End
-			map.on('rotateend', (e) => {
-				this.$emit('map-rotateend', map, e);
+			map.on('rotateend', function (e) {
+				_this.$emit('map-rotateend', map, e);
 			});
 
 			//Map Drag End
-			map.on('dragend', (e) => {
-				this.$emit('map-dragend', map, e);
+			map.on('dragend', function (e) {
+				_this.$emit('map-dragend', map, e);
 			});
 
 			//Map Drag
-			map.on('drag', (e) => {
-				this.$emit('map-drag', map, e);
+			map.on('drag', function (e) {
+				_this.$emit('map-drag', map, e);
 			});
 
 			//Map Drag
-			map.on('dragstart', (e) => {
-				this.$emit('map-dragstart', map, e);
+			map.on('dragstart', function (e) {
+				_this.$emit('map-dragstart', map, e);
 			});
 
 			//Map Pitch
-			map.on('pitch', (e) => {
-				this.$emit('map-pitch', map, e);
+			map.on('pitch', function (e) {
+				_this.$emit('map-pitch', map, e);
 			});
 
 			//Map Pitch Start
-			map.on('pitchstart', (e) => {
-				this.$emit('map-pitchstart', map, e);
+			map.on('pitchstart', function (e) {
+				_this.$emit('map-pitchstart', map, e);
 			});
 
 			//Map Pitch End
-			map.on('pitchend', (e) => {
-				this.$emit('map-pitchend', map, e);
+			map.on('pitchend', function (e) {
+				_this.$emit('map-pitchend', map, e);
 			});
-
 		},
-		addControls (map) {
+		addControls: function addControls(map) {
 			//Nav Control
 			if (this.navControl.show) {
-				const nav = new mapboxgl.NavigationControl();
+				var nav = new mapboxgl.NavigationControl();
 				map.addControl(nav, this.navControl.position);
@@ -389,3 +451,3 @@ }
 			if (this.geolocateControl.show) {
-				const geolocate = new mapboxgl.GeolocateControl(this.geolocateControl.options);
+				var geolocate = new mapboxgl.GeolocateControl(this.geolocateControl.options);
 				map.addControl(geolocate, this.geolocateControl.position);
@@ -396,3 +458,3 @@ }
 			if (this.scaleControl.show) {
-				const scale = new mapboxgl.ScaleControl(this.scaleControl.options);
+				var scale = new mapboxgl.ScaleControl(this.scaleControl.options);
 				map.addControl(scale, this.scaleControl.position);
@@ -403,12 +465,11 @@ }
 			if (this.fullscreenControl.show) {
-				const fullscreen = new mapboxgl.FullscreenControl();
+				var fullscreen = new mapboxgl.FullscreenControl();
 				map.addControl(fullscreen, this.fullscreenControl.position);
 			}
-
 		}
-	},
-});
+	}
+};
 
 /***/ }),
-/* 1 */
+/* 2 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -509,3 +570,140 @@
 
+/***/ }),
+/* 3 */
+/***/ (function(module, exports) {
+
+/* globals __VUE_SSR_CONTEXT__ */
+
+// IMPORTANT: Do NOT use ES2015 features in this file.
+// This module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle.
+
+module.exports = function normalizeComponent (
+  rawScriptExports,
+  compiledTemplate,
+  functionalTemplate,
+  injectStyles,
+  scopeId,
+  moduleIdentifier /* server only */
+) {
+  var esModule
+  var scriptExports = rawScriptExports = rawScriptExports || {}
+
+  // ES6 modules interop
+  var type = typeof rawScriptExports.default
+  if (type === 'object' || type === 'function') {
+    esModule = rawScriptExports
+    scriptExports = rawScriptExports.default
+  }
+
+  // Vue.extend constructor export interop
+  var options = typeof scriptExports === 'function'
+    ? scriptExports.options
+    : scriptExports
+
+  // render functions
+  if (compiledTemplate) {
+    options.render = compiledTemplate.render
+    options.staticRenderFns = compiledTemplate.staticRenderFns
+    options._compiled = true
+  }
+
+  // functional template
+  if (functionalTemplate) {
+    options.functional = true
+  }
+
+  // scopedId
+  if (scopeId) {
+    options._scopeId = scopeId
+  }
+
+  var hook
+  if (moduleIdentifier) { // server build
+    hook = function (context) {
+      // 2.3 injection
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
+      // 2.2 with runInNewContext: true
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
+      }
+      // inject component styles
+      if (injectStyles) {
+        injectStyles.call(this, context)
+      }
+      // register component module identifier for async chunk inferrence
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier)
+      }
+    }
+    // used by ssr in case component is cached and beforeCreate
+    // never gets called
+    options._ssrRegister = hook
+  } else if (injectStyles) {
+    hook = injectStyles
+  }
+
+  if (hook) {
+    var functional = options.functional
+    var existing = functional
+      ? options.render
+      : options.beforeCreate
+
+    if (!functional) {
+      // inject component registration as beforeCreate hook
+      options.beforeCreate = existing
+        ? [].concat(existing, hook)
+        : [hook]
+    } else {
+      // for template-only hot-reload because in that case the render fn doesn't
+      // go through the normalizer
+      options._injectStyles = hook
+      // register for functioal component in vue file
+      options.render = function renderWithStyleInjection (h, context) {
+        hook.call(context)
+        return existing(h, context)
+      }
+    }
+  }
+
+  return {
+    esModule: esModule,
+    exports: scriptExports,
+    options: options
+  }
+}
+
+
+/***/ }),
+/* 4 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c("div", {
+    attrs: {
+      id: _vm.mapOptions.hasOwnProperty("container")
+        ? _vm.mapOptions.container
+        : "map"
+    }
+  })
+}
+var staticRenderFns = []
+render._withStripped = true
+var esExports = { render: render, staticRenderFns: staticRenderFns }
+/* harmony default export */ __webpack_exports__["a"] = (esExports);
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-d7f5bcc2", esExports)
+  }
+}
+
 /***/ })
 /******/ ]);

dist/Mapbox.js

@@ -1,8 +0,95 @@
-'use strict';
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define("mapbox-gl-vue", [], factory);
+	else if(typeof exports === 'object')
+		exports["mapbox-gl-vue"] = factory();
+	else
+		root["mapbox-gl-vue"] = factory();
+})(this, function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// identity function for calling harmony imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 3);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
 
+"use strict";
+
+
 Object.defineProperty(exports, "__esModule", {
 	value: true
 });
+//
+//
+//
+//
+
 exports.default = {
-	template: '<div :id="(mapOptions.hasOwnProperty(\'container\') ? mapOptions.container : \'map\')"></div>',
 	data: function data() {
@@ -95,17 +182,17 @@ return {};
 				_this.$emit('map-load', map);
+			});
 
-				//Map Mouse Move
-				map.on('mousemove', function (e) {
-					_this.$emit('map-mousemove', map, e);
-				});
+			//Map Mouse Move
+			map.on('mousemove', function (e) {
+				_this.$emit('map-mousemove', map, e);
+			});
 
-				//Map Clicked
-				map.on('click', function (e) {
-					_this.$emit('map-click', map, e);
-				});
+			//Map Clicked
+			map.on('click', function (e) {
+				_this.$emit('map-click', map, e);
+			});
 
-				//Map Context Menu
-				map.on('contextmenu', function (e) {
-					_this.$emit('map-contextmenu', map, e);
-				});
+			//Map Context Menu
+			map.on('contextmenu', function (e) {
+				_this.$emit('map-contextmenu', map, e);
 			});
@@ -330,1 +417,195 @@
 };
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+/* globals __VUE_SSR_CONTEXT__ */
+
+// IMPORTANT: Do NOT use ES2015 features in this file.
+// This module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle.
+
+module.exports = function normalizeComponent (
+  rawScriptExports,
+  compiledTemplate,
+  functionalTemplate,
+  injectStyles,
+  scopeId,
+  moduleIdentifier /* server only */
+) {
+  var esModule
+  var scriptExports = rawScriptExports = rawScriptExports || {}
+
+  // ES6 modules interop
+  var type = typeof rawScriptExports.default
+  if (type === 'object' || type === 'function') {
+    esModule = rawScriptExports
+    scriptExports = rawScriptExports.default
+  }
+
+  // Vue.extend constructor export interop
+  var options = typeof scriptExports === 'function'
+    ? scriptExports.options
+    : scriptExports
+
+  // render functions
+  if (compiledTemplate) {
+    options.render = compiledTemplate.render
+    options.staticRenderFns = compiledTemplate.staticRenderFns
+    options._compiled = true
+  }
+
+  // functional template
+  if (functionalTemplate) {
+    options.functional = true
+  }
+
+  // scopedId
+  if (scopeId) {
+    options._scopeId = scopeId
+  }
+
+  var hook
+  if (moduleIdentifier) { // server build
+    hook = function (context) {
+      // 2.3 injection
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
+      // 2.2 with runInNewContext: true
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
+      }
+      // inject component styles
+      if (injectStyles) {
+        injectStyles.call(this, context)
+      }
+      // register component module identifier for async chunk inferrence
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier)
+      }
+    }
+    // used by ssr in case component is cached and beforeCreate
+    // never gets called
+    options._ssrRegister = hook
+  } else if (injectStyles) {
+    hook = injectStyles
+  }
+
+  if (hook) {
+    var functional = options.functional
+    var existing = functional
+      ? options.render
+      : options.beforeCreate
+
+    if (!functional) {
+      // inject component registration as beforeCreate hook
+      options.beforeCreate = existing
+        ? [].concat(existing, hook)
+        : [hook]
+    } else {
+      // for template-only hot-reload because in that case the render fn doesn't
+      // go through the normalizer
+      options._injectStyles = hook
+      // register for functioal component in vue file
+      options.render = function renderWithStyleInjection (h, context) {
+        hook.call(context)
+        return existing(h, context)
+      }
+    }
+  }
+
+  return {
+    esModule: esModule,
+    exports: scriptExports,
+    options: options
+  }
+}
+
+
+/***/ }),
+/* 2 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c("div", {
+    attrs: {
+      id: _vm.mapOptions.hasOwnProperty("container")
+        ? _vm.mapOptions.container
+        : "map"
+    }
+  })
+}
+var staticRenderFns = []
+render._withStripped = true
+var esExports = { render: render, staticRenderFns: staticRenderFns }
+/* harmony default export */ __webpack_exports__["a"] = (esExports);
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-d7f5bcc2", esExports)
+  }
+}
+
+/***/ }),
+/* 3 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_bustCache_Mapbox_vue__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_bustCache_Mapbox_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_bustCache_Mapbox_vue__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_d7f5bcc2_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_bustCache_Mapbox_vue__ = __webpack_require__(2);
+var disposed = false
+var normalizeComponent = __webpack_require__(1)
+/* script */
+
+/* template */
+
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_bustCache_Mapbox_vue___default.a,
+  __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_d7f5bcc2_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_bustCache_Mapbox_vue__["a" /* default */],
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "src/components/Mapbox.vue"
+if (Component.esModule && Object.keys(Component.esModule).some(function (key) {  return key !== "default" && key.substr(0, 2) !== "__"})) {  console.error("named exports are not supported in *.vue files.")}
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-d7f5bcc2", Component.options)
+  } else {
+    hotAPI.reload("data-v-d7f5bcc2", Component.options)
+' + '  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+/* harmony default export */ __webpack_exports__["default"] = (Component.exports);
+
+
+/***/ })
+/******/ ]);
+});

package.json

 {
   "name": "mapbox-gl-vue",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "A Vue.js component for Mapbox GL js",
@@ -15,6 +15,9 @@ "main": "dist/Mapbox.js",
     "eslint-plugin-vue": "^2.0.1",
-    "webpack": "^2.6.1"
+    "vue-loader": "^13.5.0",
+    "vue-template-compiler": "^2.5.9",
+    "webpack": "^2.6.1",
+    "webpack-merge": "^4.1.1"
   },
   "scripts": {
-    "build": "babel src/components/Mapbox.js -o dist/Mapbox.js; node_modules/.bin/webpack",
+    "build": "node_modules/.bin/webpack",
     "prepublishOnly": "npm run build"
@@ -21,0 +24,0 @@ },

readme.md

@@ -18,2 +18,3 @@ # Mapbox GL JS Vue.js
 * [Events](#events)
+* [Plugins](#plugins)
 * [Popups](#popups)
@@ -31,6 +32,6 @@
 const app = new Vue({
-    el: '#app',
-    components: {
-        'mapbox': Mapbox
-    },
+  el: '#app',
+  components: {
+    'mapbox': Mapbox
+  },
 ]);
@@ -43,16 +44,6 @@ ```
 <div id="app">
-	<mapbox></mapbox>
+  <mapbox></mapbox>
 </div>
 ```
 
-#### Vueify
-If you are using [Vueify](https://github.com/vuejs/vueify) in your build script the Mapbox component can be included as follows: 
-
-```js
-Vue.component('mapbox', require('mapbox-gl-vue/src/components/Mapbox.vue'));
-const app = new Vue({
-    el: '#app'
-]);
-```
-
 #### CSS
@@ -63,4 +54,4 @@ CSS needs to be added for the map to show up. The `#map` container needs a height and a width. Example:
 #map {
-	width: 100%;
-	height: 500px;
+  width: 100%;
+  height: 500px;
 }
@@ -144,17 +135,17 @@ ```
 :map-options="{
-	style: 'mapbox://styles/mapbox/light-v9',
-	center: [-96, 37.8],
-	zoom: 3
+  style: 'mapbox://styles/mapbox/light-v9',
+  center: [-96, 37.8],
+  zoom: 3
 }"
 :geolocate-control="{
-	show: true, 
-	position: 'top-left'
+  show: true, 
+  position: 'top-left'
 }"
 :scale-control="{
-	show: true,
-	position: 'top-left'
+  show: true,
+  position: 'top-left'
 }"
 :fullscreen-control="{
-	show: true,
-	position: 'top-left'
+  show: true,
+  position: 'top-left'
 }">
@@ -178,7 +169,7 @@ </mapbox>
 <div id="app">
-	<mapbox
-		@map-load="mapLoaded"
-		@map-click="mapClicked"
-	>
-	</mapbox>
+  <mapbox
+    @map-load="mapLoaded"
+    @map-click="mapClicked"
+  >
+  </mapbox>
 </div>
@@ -191,51 +182,51 @@ ```
 const app = new Vue({
-    el: '#app',
-    components: {
-        'mapbox': Mapbox
+  el: '#app',
+  components: {
+    'mapbox': Mapbox
+  },
+  methods: {
+    mapLoaded(map) {
+      map.addLayer({
+        'id': 'points',
+        'type': 'symbol',
+        'source': {
+          'type': 'geojson',
+          'data': {
+            'type': 'FeatureCollection',
+            'features': [{
+              'type': 'Feature',
+              'geometry': {
+                'type': 'Point',
+                'coordinates': [-77.03238901390978, 38.913188059745586]
+              },
+              'properties': {
+                'title': 'Mapbox DC',
+                'icon': 'monument'
+              }
+            }, {
+              'type': 'Feature',
+              'geometry': {
+                'type': 'Point',
+                'coordinates': [-122.414, 37.776]
+              },
+              'properties': {
+                'title': 'Mapbox SF',
+                'icon': 'harbor'
+              }
+            }]
+          }
+        },
+        'layout': {
+          'icon-image': '{icon}-15',
+          'text-field': '{title}',
+          'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
+          'text-offset': [0, 0.6],
+          'text-anchor': 'top'
+        }
+      });
     },
-    methods: {
-        mapLoaded(map) {
-            map.addLayer({
-                'id': 'points',
-                'type': 'symbol',
-                'source': {
-                    'type': 'geojson',
-                    'data': {
-                        'type': 'FeatureCollection',
-                        'features': [{
-                            'type': 'Feature',
-                            'geometry': {
-                                'type': 'Point',
-                                'coordinates': [-77.03238901390978, 38.913188059745586]
-                            },
-                            'properties': {
-                                'title': 'Mapbox DC',
-                                'icon': 'monument'
-                            }
-                        }, {
-                            'type': 'Feature',
-                            'geometry': {
-                                'type': 'Point',
-                                'coordinates': [-122.414, 37.776]
-                            },
-                            'properties': {
-                                'title': 'Mapbox SF',
-                                'icon': 'harbor'
-                            }
-                        }]
-                    }
-                },
-                'layout': {
-                    'icon-image': '{icon}-15',
-                    'text-field': '{title}',
-                    'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
-                    'text-offset': [0, 0.6],
-                    'text-anchor': 'top'
-                }
-            });
-        },
-        mapClicked(map, e) {
-            alert('Map Clicked!');
-        },
-    }
+    mapClicked(map, e) {
+      alert('Map Clicked!');
+    },
+  }
 ]);
@@ -246,2 +237,47 @@ ```
 
+### Plugins
+
+The "User Interface" plugins ([https://www.mapbox.com/mapbox-gl-js/plugins/](https://www.mapbox.com/mapbox-gl-js/plugins/)) can be integrated using the `map-init` event that is fired when Mapbox is initialized. Below is an example:
+
+```
+<mapbox
+  access-token="your access token"
+  :map-options="{
+      style: 'mapbox://styles/mapbox/light-v9',
+      center: [-96, 37.8],
+      zoom: 3
+  }"
+  :geolocate-control="{
+      show: true, 
+      position: 'top-left'
+  }"
+  :scale-control="{
+      show: true,
+      position: 'top-left'
+  }"
+  :fullscreen-control="{
+      show: true,
+      position: 'top-left'
+  }"
+  @map-init="mapInitialized">
+</mapbox>
+```
+
+```
+import Mapbox from 'mapbox-gl-vue';
+const app = new Vue({
+  el: '#app',
+  components: {
+    'mapbox': Mapbox
+  },
+  methods: {
+    mapInitialized(map) {
+      const Draw = new MapboxDraw();
+
+      map.addControl(Draw);
+    }
+  }
+]);
+```
+
 ### Popups
@@ -255,82 +291,82 @@
 const app = new Vue({
-    el: '#app',
-    methods: {
-        mapLoaded(map) {
-            map.addLayer({
-                'id': 'points',
-                'type': 'symbol',
-                'source': {
-                    'type': 'geojson',
-                    'data': {
-                        'type': 'FeatureCollection',
-                        'features': [{
-                            'type': 'Feature',
-                            'geometry': {
-                                'type': 'Point',
-                                'coordinates': [-77.03238901390978, 38.913188059745586]
-                            },
-                            'properties': {
-                                'title': 'Mapbox DC',
-                                'icon': 'monument'
-                            }
-                        }, {
-                            'type': 'Feature',
-                            'geometry': {
-                                'type': 'Point',
-                                'coordinates': [-122.414, 37.776]
-                            },
-                            'properties': {
-                                'title': 'Mapbox SF',
-                                'icon': 'harbor'
-                            }
-                        }]
-                    }
-                },
-                'layout': {
-                    'icon-image': '{icon}-15',
-                    'text-field': '{title}',
-                    'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
-                    'text-offset': [0, 0.6],
-                    'text-anchor': 'top'
-                }
-            });
+  el: '#app',
+  methods: {
+    mapLoaded(map) {
+      map.addLayer({
+        'id': 'points',
+        'type': 'symbol',
+        'source': {
+          'type': 'geojson',
+          'data': {
+            'type': 'FeatureCollection',
+            'features': [{
+              'type': 'Feature',
+              'geometry': {
+                'type': 'Point',
+                'coordinates': [-77.03238901390978, 38.913188059745586]
+              },
+              'properties': {
+                'title': 'Mapbox DC',
+                'icon': 'monument'
+              }
+            }, {
+              'type': 'Feature',
+              'geometry': {
+                'type': 'Point',
+                'coordinates': [-122.414, 37.776]
+              },
+              'properties': {
+                'title': 'Mapbox SF',
+                'icon': 'harbor'
+              }
+            }]
+          }
         },
-        mapClicked(map, e) {
-            this.addPopUp(map, e);
-        },
-        mapMouseMoved(map, e) {
-            const features = map.queryRenderedFeatures(e.point, {
-                layers: ['points']
-            });
-            map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
-        },
-        addPopUp(map, e) {
-            const features = map.queryRenderedFeatures(e.point, {
-                layers: ['points']
-            });
-            if (!features.length) {
-                return;
-            }
+        'layout': {
+          'icon-image': '{icon}-15',
+          'text-field': '{title}',
+          'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
+          'text-offset': [0, 0.6],
+          'text-anchor': 'top'
+        }
+      });
+    },
+    mapClicked(map, e) {
+      this.addPopUp(map, e);
+    },
+    mapMouseMoved(map, e) {
+      const features = map.queryRenderedFeatures(e.point, {
+        layers: ['points']
+      });
+      map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
+    },
+    addPopUp(map, e) {
+      const features = map.queryRenderedFeatures(e.point, {
+        layers: ['points']
+      });
+      if (!features.length) {
+        return;
+      }
 
-            const feature = features[0];
+      const feature = features[0];
 
-            const popupContent = Vue.extend({
-                template: '<button @click="popupClicked">Click Me!</button>',
-                methods: {
-                    popupClicked() {
-                        alert('Popup Clicked!');
-                    },
-                }
-            });
+      const popupContent = Vue.extend({
+        template: '<button @click="popupClicked">Click Me!</button>',
+        methods: {
+          popupClicked() {
+            alert('Popup Clicked!');
+          },
+        }
+      });
 
-            // Populate the popup and set its coordinates
-            // based on the feature found.
-            const popup = new mapboxgl.Popup()
-                .setLngLat(feature.geometry.coordinates)
-                .setHTML('<div id="vue-popup-content"></div>')
-                .addTo(map);
+      // Populate the popup and set its coordinates
+      // based on the feature found.
+      const popup = new mapboxgl.Popup()
+        .setLngLat(feature.geometry.coordinates)
+        .setHTML('<div id="vue-popup-content"></div>')
+        .addTo(map);
 
-            new popupContent().$mount('#vue-popup-content');
-        }
+      new popupContent().$mount('#vue-popup-content');
     }
+  }
 });
@@ -337,0 +373,0 @@ ```

src/app.js

@@ -1,2 +0,2 @@
-import Mapbox from './components/Mapbox.js';
+import Mapbox from './components/Mapbox.vue';
 
@@ -3,0 +3,0 @@ const app = new Vue({

webpack.config.js

@@ -1,8 +0,9 @@
-var path = require('path');
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
 
-module.exports = {
-	entry: './src/app.js',
+var config = {
 	output: {
 		path: path.resolve(__dirname, 'dist'),
-		filename: 'app.js'
+		filename: '[name].js'
 	},
@@ -12,8 +13,10 @@ module: {
 			{
-				include: path.resolve(__dirname, 'src/app.js'),
-				use: {
-					loader: 'babel-loader',
-					options: {
-						presets: ['env']
-					}
+				test: /\.vue$/,
+				loader: 'vue-loader',
+			},
+			{
+				test: /\.js$/,
+				loader: 'babel-loader',
+				options: {
+					presets: ['env']
 				}
@@ -23,2 +26,21 @@ }
 	}
-};
+};
+
+module.exports = [
+	merge(config, {
+		entry: {
+			app: './src/app.js',
+		},
+	}),
+	merge(config, {
+		entry: {
+			Mapbox: './src/components/Mapbox.vue',
+		},
+		output: {
+			filename: 'Mapbox.js',
+			libraryTarget: 'umd',
+			library: 'mapbox-gl-vue',
+			umdNamedDefine: true
+		},
+	}),
+];

No alert changes

Improved metrics

Total package byte prevSize

216153

increased by163.63%

Lines of code

1297

increased by16.32%

Number of lines in readme file

374

increased by10.65%

Worsened metrics

Dev dependency count

12

increased by33.33%

Number of package files

12

decreased by-7.69%

No dependency changes