mapbox-gl-vue - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/app.js

@@ -1,1 +0,489 @@
-!function(t){function o(e){if(n[e])return n[e].exports;var i=n[e]={i:e,l:!1,exports:{}};return t[e].call(i.exports,i,i.exports,o),i.l=!0,i.exports}var n={};o.m=t,o.c=n,o.i=function(t){return t},o.d=function(t,n,e){o.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:e})},o.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(n,"a",n),n},o.o=function(t,o){return Object.prototype.hasOwnProperty.call(t,o)},o.p="",o(o.s=5)}([function(t,o,n){Vue.component("mapbox",n(2));new Vue({el:"#app",methods:{mapLoaded:function(t){t.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,.6],"text-anchor":"top"}})},mapClicked:function(t,o){this.addPopUp(t,o)},mapMouseMoved:function(t,o){var n=t.queryRenderedFeatures(o.point,{layers:["points"]});t.getCanvas().style.cursor=n.length?"pointer":""},addPopUp:function(t,o){var n=t.queryRenderedFeatures(o.point,{layers:["points"]});if(n.length){var e=n[0],i=Vue.extend({template:'<button @click="popupClicked">Click Me!</button>',methods:{popupClicked:function(){alert("Popup Clicked!")}}});(new mapboxgl.Popup).setLngLat(e.geometry.coordinates).setHTML('<div id="vue-popup-content"></div>').addTo(t);(new i).$mount("#vue-popup-content")}}}})},function(t,o,n){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.default={data:function(){return{}},props:{accessToken:{type:String,required:!0},mapOptions:{type:Object,required:!0},navControl:{type:Object,default:function(){return{show:!0,position:"top-right"}}},geolocateControl:{type:Object,default:function(){return{show:!1,position:"top-left",options:{}}}},scaleControl:{type:Object,default:function(){return{show:!1,position:"top-left",options:{}}}},fullscreenControl:{type:Object,default:function(){return{show:!1,position:"top-right"}}}},mounted:function(){var t=this.mapInit();this.addControls(t),this.registerEvents(t)},methods:{mapInit:function(){return mapboxgl.accessToken=this.accessToken,this.mapOptions.container="map",new mapboxgl.Map(this.mapOptions)},registerEvents:function(t){var o=this;t.on("load",function(){o.$emit("map-load",t),t.on("mousemove",function(n){o.$emit("map-mousemove",t,n)}),t.on("click",function(n){o.$emit("map-click",t,n)}),t.on("contextmenu",function(n){o.$emit("map-contextmenu",t,n)})}),t.on("resize",function(){o.$emit("map-resize",t)}),t.on("resize",function(n){o.$emit("map-webglcontextlost",t,n)}),t.on("resize",function(n){o.$emit("map-webglcontextrestored",t,n)}),t.on("remove",function(){o.$emit("map-remove",t)}),t.on("sourcedataloading",function(n){o.$emit("map-sourcedataloading",t,n)}),t.on("touchstart",function(n){o.$emit("map-touchstart",t,n)}),t.on("movestart",function(n){o.$emit("map-movestart",t,n)}),t.on("movestart",function(n){o.$emit("map-movestart",t,n)}),t.on("move",function(n){o.$emit("map-move",t,n)}),t.on("moveend",function(n){o.$emit("map-moveend",t,n)}),t.on("error",function(n){o.$emit("map-error",t,n)}),t.on("data",function(n){o.$emit("map-data",t,n)}),t.on("styledata",function(n){o.$emit("map-styledata",t,n)}),t.on("mouseup",function(n){o.$emit("map-mouseup",t,n)}),t.on("touchcancel",function(n){o.$emit("map-touchcancel",t,n)}),t.on("sourcedata",function(n){o.$emit("map-sourcedata",t,n)}),t.on("dataloading",function(n){o.$emit("map-dataloading",t,n)}),t.on("styledataloading",function(n){o.$emit("map-styledataloading",t,n)}),t.on("dblclick",function(n){o.$emit("map-dblclick",t,n)}),t.on("render",function(){o.$emit("map-render",t)}),t.on("mouseout",function(n){o.$emit("map-mouseout",t,n)}),t.on("mousedown",function(n){o.$emit("map-mousedown",t,n)}),t.on("touchend",function(n){o.$emit("map-touchend",t,n)}),t.on("zoomstart",function(n){o.$emit("map-zoomstart",t,n)}),t.on("zoomend",function(n){o.$emit("map-zoomend",t,n)}),t.on("zoom",function(n){o.$emit("map-zoom",t,n)}),t.on("boxzoomcancel",function(n){o.$emit("map-boxzoomcancel",t,n)}),t.on("boxzoomend",function(n){o.$emit("map-boxzoomend",t,n)}),t.on("boxzoomstart",function(n){o.$emit("map-boxzoomstart",t,n)}),t.on("rotatestart",function(n){o.$emit("map-rotatestart",t,n)}),t.on("rotate",function(n){o.$emit("map-rotate",t,n)}),t.on("rotateend",function(n){o.$emit("map-rotateend",t,n)}),t.on("dragend",function(n){o.$emit("map-dragend",t,n)}),t.on("drag",function(n){o.$emit("map-drag",t,n)}),t.on("dragstart",function(n){o.$emit("map-dragstart",t,n)}),t.on("pitch",function(n){o.$emit("map-pitch",t,n)}),t.on("pitchstart",function(n){o.$emit("map-pitchstart",t,n)}),t.on("pitchend",function(n){o.$emit("map-pitchend",t,n)})},addControls:function(t){if(this.navControl.show){var o=new mapboxgl.NavigationControl;t.addControl(o,this.navControl.position)}if(this.geolocateControl.show){var n=new mapboxgl.GeolocateControl(this.geolocateControl.options);t.addControl(n,this.geolocateControl.position)}if(this.scaleControl.show){var e=new mapboxgl.ScaleControl(this.scaleControl.options);t.addControl(e,this.scaleControl.position)}if(this.fullscreenControl.show){var i=new mapboxgl.FullscreenControl;t.addControl(i,this.fullscreenControl.position)}}}}},function(t,o,n){var e=n(3)(n(1),n(4),null,null);t.exports=e.exports},function(t,o){t.exports=function(t,o,n,e){var i,a=t=t||{},r=typeof t.default;"object"!==r&&"function"!==r||(i=t,a=t.default);var c="function"==typeof a?a.options:a;if(o&&(c.render=o.render,c.staticRenderFns=o.staticRenderFns),n&&(c._scopeId=n),e){var u=Object.create(c.computed||null);Object.keys(e).forEach(function(t){var o=e[t];u[t]=function(){return o}}),c.computed=u}return{esModule:i,exports:a,options:c}}},function(t,o){t.exports={render:function(){var t=this,o=t.$createElement;return(t._self._c||o)("div",{attrs:{id:"map"}})},staticRenderFns:[]}},function(t,o,n){t.exports=n(0)}]);
+/******/ (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 = 1);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony default export */ __webpack_exports__["default"] = ({
+	template: '<div id="map"></div>',
+	data () {
+		return {
+
+		};
+	},
+	props: {
+		accessToken: {
+			type: String,
+			required: true
+		},
+		mapOptions: {
+			type: Object,
+			required: true
+		},
+		navControl: {
+			type: Object,
+			default: () => {
+				return {
+					show: true,
+					position: 'top-right'
+				};
+			}
+		},
+		geolocateControl: {
+			type: Object,
+			default: () => {
+				return {
+					show: false,
+					position: 'top-left',
+					options: {}
+				};
+			}
+		},
+		scaleControl: {
+			type: Object,
+			default: () => {
+				return {
+					show: false,
+					position: 'top-left',
+					options: {}
+				};
+			}
+		},
+		fullscreenControl: {
+			type: Object,
+			default: () => {
+				return {
+					show: false,
+					position: 'top-right'
+				};
+			}
+		}
+	},
+	mounted () {
+		//Initialze Map
+		const map = this.mapInit();
+
+		//Add Controls to map
+		this.addControls(map);
+
+		//Register Map Events
+		this.registerEvents(map);
+	},
+	methods: {
+		mapInit () {
+			//Mapbox GL access token
+			mapboxgl.accessToken = this.accessToken;
+
+			//Add container to options object
+			if (!this.mapOptions.hasOwnProperty('container')) {
+				this.mapOptions.container = 'map';
+			}
+
+			//New Mapbox Instance
+			const map = new mapboxgl.Map(this.mapOptions);
+
+			return map;
+		},
+		registerEvents (map) {
+			//Map Loaded
+			map.on('load', () => {
+				this.$emit('map-load', map);
+
+				//Map Mouse Move
+				map.on('mousemove', (e) => {
+					this.$emit('map-mousemove', map, e);
+				});
+
+				//Map Clicked
+				map.on('click', (e) => {
+					this.$emit('map-click', map, e);
+				});
+
+				//Map Context Menu
+				map.on('contextmenu', (e) => {
+					this.$emit('map-contextmenu', map, e);
+				});
+			});
+
+			//Map Resized
+			map.on('resize', () => {
+				this.$emit('map-resize', map);
+			});
+
+			//Map Webgl Context Lost 
+			map.on('resize', (e) => {
+				this.$emit('map-webglcontextlost', map, e);
+			});
+
+			//Map Webgl Context Restored
+			map.on('resize', (e) => {
+				this.$emit('map-webglcontextrestored', map, e);
+			});
+
+			//Map Removed
+			map.on('remove', () => {
+				this.$emit('map-remove', map);
+			});
+
+			//Map Source Data Loading
+			map.on('sourcedataloading', (e) => {
+				this.$emit('map-sourcedataloading', map, e);
+			});
+
+			//Map Touch Start
+			map.on('touchstart', (e) => {
+				this.$emit('map-touchstart', map, e);
+			});
+
+			//Map Move Start
+			map.on('movestart', (e) => {
+				this.$emit('map-movestart', map, e);
+			});
+
+			//Map Touch Move
+			map.on('movestart', (e) => {
+				this.$emit('map-movestart', map, e);
+			});
+
+			//Map Move
+			map.on('move', (e) => {
+				this.$emit('map-move', map, e);
+			});
+
+			//Map Move End
+			map.on('moveend', (e) => {
+				this.$emit('map-moveend', map, e);
+			});
+
+			//Map Error
+			map.on('error', (e) => {
+				this.$emit('map-error', map, e);
+			});
+
+			//Map Data
+			map.on('data', (e) => {
+				this.$emit('map-data', map, e);
+			});
+
+			//Map Style Data
+			map.on('styledata', (e) => {
+				this.$emit('map-styledata', map, e);
+			});
+
+			//Map Mouse Up
+			map.on('mouseup', (e) => {
+				this.$emit('map-mouseup', map, e);
+			});
+
+			//Map Touch Cancel
+			map.on('touchcancel', (e) => {
+				this.$emit('map-touchcancel', map, e);
+			});
+
+			//Map Source Data
+			map.on('sourcedata', (e) => {
+				this.$emit('map-sourcedata', map, e);
+			});
+
+			//Map Data Loading
+			map.on('dataloading', (e) => {
+				this.$emit('map-dataloading', map, e);
+			});
+
+			//Map Style Data Loading
+			map.on('styledataloading', (e) => {
+				this.$emit('map-styledataloading', map, e);
+			});
+
+			//Map Double Click
+			map.on('dblclick', (e) => {
+				this.$emit('map-dblclick', map, e);
+			});
+
+			//Map Render
+			map.on('render', () => {
+				this.$emit('map-render', map);
+			});
+
+			//Map Mouse Out
+			map.on('mouseout', (e) => {
+				this.$emit('map-mouseout', map, e);
+			});
+
+			//Map Mouse Down
+			map.on('mousedown', (e) => {
+				this.$emit('map-mousedown', map, e);
+			});
+
+			//Map Touch End
+			map.on('touchend', (e) => {
+				this.$emit('map-touchend', map, e);
+			});
+
+			//Map Zoom Start
+			map.on('zoomstart', (e) => {
+				this.$emit('map-zoomstart', map, e);
+			});
+
+			//Map Zoom End
+			map.on('zoomend', (e) => {
+				this.$emit('map-zoomend', map, e);
+			});
+
+			//Map Zoom
+			map.on('zoom', (e) => {
+				this.$emit('map-zoom', map, e);
+			});
+
+			//Map Box Zoom Cancel
+			map.on('boxzoomcancel', (e) => {
+				this.$emit('map-boxzoomcancel', map, e);
+			});
+
+			//Map Box Zoom End
+			map.on('boxzoomend', (e) => {
+				this.$emit('map-boxzoomend', map, e);
+			});
+
+			//Map Box Zoom Start
+			map.on('boxzoomstart', (e) => {
+				this.$emit('map-boxzoomstart', map, e);
+			});
+
+			//Map Rotate Start
+			map.on('rotatestart', (e) => {
+				this.$emit('map-rotatestart', map, e);
+			});
+
+			//Map Rotate
+			map.on('rotate', (e) => {
+				this.$emit('map-rotate', map, e);
+			});
+
+			//Map Rotate End
+			map.on('rotateend', (e) => {
+				this.$emit('map-rotateend', map, e);
+			});
+
+			//Map Drag End
+			map.on('dragend', (e) => {
+				this.$emit('map-dragend', map, e);
+			});
+
+			//Map Drag
+			map.on('drag', (e) => {
+				this.$emit('map-drag', map, e);
+			});
+
+			//Map Drag
+			map.on('dragstart', (e) => {
+				this.$emit('map-dragstart', map, e);
+			});
+
+			//Map Pitch
+			map.on('pitch', (e) => {
+				this.$emit('map-pitch', map, e);
+			});
+
+			//Map Pitch Start
+			map.on('pitchstart', (e) => {
+				this.$emit('map-pitchstart', map, e);
+			});
+
+			//Map Pitch End
+			map.on('pitchend', (e) => {
+				this.$emit('map-pitchend', map, e);
+			});
+
+		},
+		addControls (map) {
+			//Nav Control
+			if (this.navControl.show) {
+				const nav = new mapboxgl.NavigationControl();
+				map.addControl(nav, this.navControl.position);
+			}
+
+			//Geolocation Control
+			if (this.geolocateControl.show) {
+				const geolocate = new mapboxgl.GeolocateControl(this.geolocateControl.options);
+				map.addControl(geolocate, this.geolocateControl.position);
+			}
+
+			//Scale Control
+			if (this.scaleControl.show) {
+				const scale = new mapboxgl.ScaleControl(this.scaleControl.options);
+				map.addControl(scale, this.scaleControl.position);
+			}
+
+			//Fullscreen Control
+			if (this.fullscreenControl.show) {
+				const fullscreen = new mapboxgl.FullscreenControl();
+				map.addControl(fullscreen, this.fullscreenControl.position);
+			}
+
+		}
+	},
+});
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _Mapbox = __webpack_require__(0);
+
+var _Mapbox2 = _interopRequireDefault(_Mapbox);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var app = new Vue({
+	el: '#app',
+	components: {
+		'mapbox': _Mapbox2.default
+	},
+	methods: {
+		mapLoaded: function 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: function mapClicked(map, e) {
+			this.addPopUp(map, e);
+		},
+		mapMouseMoved: function mapMouseMoved(map, e) {
+			var features = map.queryRenderedFeatures(e.point, { layers: ['points'] });
+			map.getCanvas().style.cursor = features.length ? 'pointer' : '';
+		},
+		addPopUp: function addPopUp(map, e) {
+			var features = map.queryRenderedFeatures(e.point, { layers: ['points'] });
+			if (!features.length) {
+				return;
+			}
+
+			var feature = features[0];
+
+			var popupContent = Vue.extend({
+				template: '<button @click="popupClicked">Click Me!</button>',
+				methods: {
+					popupClicked: function popupClicked() {
+						alert('Popup Clicked!');
+					}
+				}
+			});
+
+			// Populate the popup and set its coordinates
+			// based on the feature found.
+			var popup = new mapboxgl.Popup().setLngLat(feature.geometry.coordinates).setHTML('<div id="vue-popup-content"></div>').addTo(map);
+
+			new popupContent().$mount('#vue-popup-content');
+		}
+	}
+});
+
+/***/ })
+/******/ ]);

package.json

 {
   "name": "mapbox-gl-vue",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A Vue.js component for Mapbox GL js",
-  "main": "src/components/Mapbox.js",
+  "main": "dist/Mapbox.js",
   "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-preset-env": "^1.5.1",
     "eslint": "^3.19.0",
@@ -11,12 +15,7 @@ "eslint-config-vue": "^2.0.2",
     "eslint-plugin-vue": "^2.0.1",
-    "laravel-mix": "0.*"
+    "webpack": "^2.6.1"
   },
   "scripts": {
-    "dev": "npm run development",
-    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch-poll": "npm run watch -- --watch-poll",
-    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "prod": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    "build": "babel src/components/Mapbox.js -o dist/Mapbox.js; node_modules/.bin/webpack",
+    "prepublishOnly": "npm run build"
   },
@@ -23,0 +22,0 @@ "repository": {

src/app.js

@@ -1,5 +0,8 @@
-Vue.component('mapbox', require('./components/Mapbox.vue'));
+import Mapbox from './components/Mapbox.js';
 
 const app = new Vue({
 	el: '#app',
+	components: {
+		'mapbox': Mapbox
+	},
 	methods: {
@@ -6,0 +9,0 @@ mapLoaded(map) {

src/components/Mapbox.js

@@ -72,3 +72,5 @@ export default {
 			//Add container to options object
-			this.mapOptions.container = 'map';
+			if (!this.mapOptions.hasOwnProperty('container')) {
+				this.mapOptions.container = 'map';
+			}
 
@@ -75,0 +77,0 @@ //New Mapbox Instance

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

80563

increased by16.54%

Number of package files

13

increased by8.33%

Lines of code

1101

increased by179.44%

Worsened metrics

Dev dependency count

9

increased by80%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes