cleaning up documentation a bit

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) {

readme.md

@@ -172,14 +172,14 @@ All Mapbox GL JS events are available for use. For a list of events look here: [
 
 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 |
+| 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 if it has one.
+All events are passed the `map` or `control` object and the event or position object if it has one.
 
 
 Example:
@@ -192,6 +192,7 @@ HTML File:
     @map-load="mapLoaded"
     @map-click="mapClicked"
     @geolocate-error="geolocateError"
+    @geolocate-geolocate="geolocate"
   >
   </mapbox>
 </div>
@@ -248,7 +249,10 @@ const app = new Vue({
       alert('Map Clicked!');
     },
     geolocateError(control, positionError) {
-      alert('Error in locating:' + positionError);
+      console.log(positionError);
+    },
+    geolocate(control, position) {
+      console.log(`User position: ${position.coords.latitude}, ${position.coords.longitude}`);
     }
   }
 });

src/app.js

@@ -57,10 +57,10 @@ const app = new Vue({
 			map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
 		},
 		geolocate(control, position) {
-			console.log('User position:' + position);
+			console.log(`User position: ${position.coords.latitude}, ${position.coords.longitude}`);
 		},
 		geolocateError(control, positionError) {
-			console.log('Position Error:' + positionError);
+			console.log(positionError);
 		},
 		geolocateStart(control) {
 			console.log('geolocate started');