add events for GeolocateControl

Author: LKajan

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 if it has one.
 
-All events are passed the `map` object and the event if it has one.
 
 Example:
 
@@ -183,6 +191,7 @@ HTML File:
   <mapbox
     @map-load="mapLoaded"
     @map-click="mapClicked"
+    @geolocate-error="geolocateError"
   >
   </mapbox>
 </div>
@@ -238,6 +247,9 @@ const app = new Vue({
     mapClicked(map, e) {
       alert('Map Clicked!');
     },
+    geolocateError(control, positionError) {
+      alert('Error in locating:' + positionError);
+    }
   }
 });
 ```

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);
+		},
+		geolocateError(control, positionError) {
+			console.log('Position Error:' + 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