Merge branch 'LKajan-control_events'

Author: Peter Hegman

dist/Mapbox.js

@@ -397,6 +397,8 @@ exports.default = {
 			});
 		},
 		addControls: function addControls(map) {
+			var _this2 = this;
+
 			//Nav Control
 			if (this.navControl.show) {
 				var nav = new mapboxgl.NavigationControl();
@@ -407,6 +409,22 @@ exports.default = {
 			if (this.geolocateControl.show) {
 				var geolocate = new mapboxgl.GeolocateControl(this.geolocateControl.options);
 				map.addControl(geolocate, this.geolocateControl.position);
+
+				geolocate.on('geolocate', function (position) {
+					_this2.$emit('geolocate-geolocate', geolocate, position);
+				});
+
+				geolocate.on('trackuserlocationstart', function () {
+					_this2.$emit('geolocate-trackuserlocationstart', geolocate);
+				});
+
+				geolocate.on('trackuserlocationend', function () {
+					_this2.$emit('geolocate-trackuserlocationend', geolocate);
+				});
+
+				geolocate.on('error', function (positionError) {
+					_this2.$emit('geolocate-error', geolocate, positionError);
+				});
 			}
 
 			//Scale Control

dist/app.js

@@ -440,6 +440,8 @@ exports.default = {
 			});
 		},
 		addControls: function addControls(map) {
+			var _this2 = this;
+
 			//Nav Control
 			if (this.navControl.show) {
 				var nav = new mapboxgl.NavigationControl();
@@ -450,6 +452,22 @@ exports.default = {
 			if (this.geolocateControl.show) {
 				var geolocate = new mapboxgl.GeolocateControl(this.geolocateControl.options);
 				map.addControl(geolocate, this.geolocateControl.position);
+
+				geolocate.on('geolocate', function (position) {
+					_this2.$emit('geolocate-geolocate', geolocate, position);
+				});
+
+				geolocate.on('trackuserlocationstart', function () {
+					_this2.$emit('geolocate-trackuserlocationstart', geolocate);
+				});
+
+				geolocate.on('trackuserlocationend', function () {
+					_this2.$emit('geolocate-trackuserlocationend', geolocate);
+				});
+
+				geolocate.on('error', function (positionError) {
+					_this2.$emit('geolocate-error', geolocate, positionError);
+				});
 			}
 
 			//Scale Control
@@ -539,6 +557,18 @@ var app = new Vue({
 			var features = map.queryRenderedFeatures(e.point, { layers: ['points'] });
 			map.getCanvas().style.cursor = features.length ? 'pointer' : '';
 		},
+		geolocate: function geolocate(control, position) {
+			console.log('User position: ' + position.coords.latitude + ', ' + position.coords.longitude);
+		},
+		geolocateError: function geolocateError(control, positionError) {
+			console.log(positionError);
+		},
+		geolocateStart: function geolocateStart(control) {
+			console.log('geolocate started');
+		},
+		geolocateEnd: function geolocateEnd(control) {
+			console.log('geolocate ended');
+		},
 		addPopUp: function addPopUp(map, e) {
 			var features = map.queryRenderedFeatures(e.point, { layers: ['points'] });
 			if (!features.length) {

index.html

@@ -29,7 +29,13 @@
 			    }"
 				:geolocate-control="{
 					show: true, 
-					position: 'top-left'
+					position: 'top-left',
+					options: {
+						positionOptions: {
+							enableHighAccuracy: true
+						},
+						trackUserLocation: true
+					}
 				}"
 				:scale-control="{
 					show: true,
@@ -42,10 +48,15 @@
 				@map-init="mapInit"
 				@map-load="mapLoaded"
 				@map-click="mapClicked"
-				@map-mousemove="mapMouseMoved">
+				@map-mousemove="mapMouseMoved"
+				@geolocate-geolocate="geolocate"
+				@geolocate-error="geolocateError"
+				@geolocate-trackuserlocationstart="geolocateStart"
+				@geolocate-trackuserlocationend="geolocateEnd"
+				>
 			</mapbox>
 		</div><!-- /#app -->
 		<script src="https://unpkg.com/vue"></script>
-		<script src="/dist/app.js"></script>
+		<script src="dist/app.js"></script>
     </body>
 </html>

readme.md

@@ -170,9 +170,17 @@ access-token="your access token"
 
 All Mapbox GL JS events are available for use. For a list of events look here: [https://www.mapbox.com/mapbox-gl-js/api/#map.event:resize](https://www.mapbox.com/mapbox-gl-js/api/#map.event:resize)
 
-Events can be used by prepending `map-` to the beginning of the Mapbox event. For example for the Mapbox `click` event `@map-click` can be used.
+Map and control events can be used by adding a prefix introduced in the following table to the beginning of the Mapbox event name.
+
+| Object | Prefix |
+|  ----- | ------ |
+| Map    | `map-` |
+| GeolocateControl | `geolocate-` |
+
+For example for the Mapbox Map `click` event `@map-click` can be used and for the GeolocateControl geolocate event `@geolocate-geolocate` can be used.
+
+All events are passed the `map` or `control` object and the event or position object if it has one.
 
-All events are passed the `map` object and the event if it has one.
 
 Example:
 
@@ -183,6 +191,8 @@ HTML File:
   <mapbox
     @map-load="mapLoaded"
     @map-click="mapClicked"
+    @geolocate-error="geolocateError"
+    @geolocate-geolocate="geolocate"
   >
   </mapbox>
 </div>
@@ -238,6 +248,12 @@ const app = new Vue({
     mapClicked(map, e) {
       alert('Map Clicked!');
     },
+    geolocateError(control, positionError) {
+      console.log(positionError);
+    },
+    geolocate(control, position) {
+      console.log(`User position: ${position.coords.latitude}, ${position.coords.longitude}`);
+    }
   }
 });
 ```

src/app.js

@@ -56,6 +56,18 @@ const app = new Vue({
 			const features = map.queryRenderedFeatures(e.point, { layers: ['points'] });
 			map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
 		},
+		geolocate(control, position) {
+			console.log(`User position: ${position.coords.latitude}, ${position.coords.longitude}`);
+		},
+		geolocateError(control, positionError) {
+			console.log(positionError);
+		},
+		geolocateStart(control) {
+			console.log('geolocate started');
+		},
+		geolocateEnd(control) {
+			console.log('geolocate ended');
+		},
 		addPopUp(map, e) {
 			const features = map.queryRenderedFeatures(e.point, { layers: ['points'] });
 			if (!features.length) {

src/components/Mapbox.vue

@@ -316,6 +316,22 @@
 				if (this.geolocateControl.show) {
 					const geolocate = new mapboxgl.GeolocateControl(this.geolocateControl.options);
 					map.addControl(geolocate, this.geolocateControl.position);
+
+					geolocate.on('geolocate', position => {
+						this.$emit('geolocate-geolocate', geolocate, position);
+					});
+
+					geolocate.on('trackuserlocationstart', () => {
+						this.$emit('geolocate-trackuserlocationstart', geolocate);
+					});
+
+					geolocate.on('trackuserlocationend', () => {
+						this.$emit('geolocate-trackuserlocationend', geolocate);
+					});
+
+					geolocate.on('error', positionError => {
+						this.$emit('geolocate-error', geolocate, positionError);
+					});
 				}
 
 				//Scale Control