Added optional parameter to the aui-leaflet-locate-control to specify the zoomlevel

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 - `map` Fixed an issue where the default map layer wouldn't show on iOS devices.
 - `calendar` Fixed an issue where the calendar doesn't jump to a predefined date.
+- `map` added possibility to set the zoom level of the `aui-leaflet-locate-control`.
 - `forms/datepicker` Fixed an issue where the datepicker doesn't initialize when being cleared.
 
 ## [1.1.0] - 2019-02-05

packages/map/examples/src/map/pages/demo/demo.page.html

@@ -25,7 +25,7 @@ <h1 class="h3 u-margin-bottom">Map</h1>
 			<aui-leaflet-fullscreen-control></aui-leaflet-fullscreen-control>
 		</div>
 		<div controls bottom left>
-			<aui-leaflet-locate-control></aui-leaflet-locate-control>
+			<aui-leaflet-locate-control zoomLevel="16"></aui-leaflet-locate-control>
 		</div>
 		<div controls bottom right>
 			<aui-leaflet-zoom-control></aui-leaflet-zoom-control>

packages/map/examples/src/map/pages/demo/demo.page.ts

@@ -47,7 +47,7 @@ public ngOnInit(): void {
 		<aui-leaflet-fullscreen-control></aui-leaflet-fullscreen-control>
 	</div>
 	<div controls bottom left>
-		<aui-leaflet-locate-control></aui-leaflet-locate-control>
+		<aui-leaflet-locate-control zoomLevel="16"></aui-leaflet-locate-control>
 	</div>
 	<div controls bottom right>
 		<aui-leaflet-zoom-control></aui-leaflet-zoom-control>

packages/map/lib/README.md

@@ -33,6 +33,7 @@ Visit our [documentation site](https://acpaas-ui.digipolis.be/) for full how-to
 | -----------  | ------ | -------------------------- |
 | `@Input() leafletMap: LeafletMap;` | `-` | An instance of the [Leaflet Map class](https://leafletjs.com/reference-1.3.0.html#map-example). |
 | `@Input() hasSidebar: boolean;` | `false` | Define if the map has a sidebar. |
+| `@Input() zoomLevel: number;` | `19` | Define how far to zoom in [Leaflet Zoom Level](https://leafletjs.com/examples/zoom-levels/)
 
 Check the [Leaflet API reference](https://leafletjs.com/reference-1.3.0.html) for Leaflet specific API's.
 
@@ -67,7 +68,7 @@ public ngOnInit(): void {
         <aui-leaflet-fullscreen-control></aui-leaflet-fullscreen-control>
     </div>
     <div controls bottom left>
-        <aui-leaflet-locate-control></aui-leaflet-locate-control>
+        <aui-leaflet-locate-control zoomLevel="16"></aui-leaflet-locate-control>
     </div>
     <div controls bottom right>
         <aui-leaflet-zoom-control></aui-leaflet-zoom-control>
@@ -89,7 +90,7 @@ public ngOnInit(): void {
 - `zoomIn()`: Zoom in
 - `zoomOut()`: Zoom out
 - `toggleFullscreen()`: Toggle fullscreen
-- `locate()`: Start zooming to current location
+- `locate(zoomLevel)`: Start zooming to current location with an optional zoom level
 - `setView(center, zoom)`: Zoom to the given center and zoom values.
 - `addMarker(position, options)`: Adds a marker to the given position. (see leaflet docs)
 - `addHTMLMarker`: Adds an HTML marker to the given position.

packages/map/lib/src/leaflet/classes/leaflet-map.spec.ts

@@ -222,13 +222,13 @@ describe('The leaflet map', () => {
 		});
 
 		it('should find the current location', () => {
-			map.locate();
+			map.locate(16);
 			expect(locateSpy).toHaveBeenCalled();
 		});
 
 		it('should zoom to the current location', () => {
-			map.locate();
-			expect(setViewSpy).toHaveBeenCalledWith(options.center, 19);
+			map.locate(16);
+			expect(setViewSpy).toHaveBeenCalledWith(options.center, 16);
 		});
 	});
 

packages/map/lib/src/leaflet/classes/leaflet-map.ts

@@ -119,13 +119,13 @@ export class LeafletMap {
 	}
 
 	// CENTERING
-	locate() {
+	locate(zoomLevel: number) {
 		if (!this.locating && this.initialized) {
 			this.locating = true;
 			this.map.locate();
 			this.map.on('locationfound', (e: any) => {
 				this.locating = false;
-				this.map.setView(e.latlng, 19);
+				this.map.setView(e.latlng, zoomLevel);
 				this.map.off('locationfound');
 			});
 		}

packages/map/lib/src/leaflet/components/controls/leaflet-locate-control/leaflet-locate-control.component.html

@@ -1 +1 @@
-<aui-leaflet-control icon="crosshairs" (click)="map?.locate()" [disabled]="map?.locating"></aui-leaflet-control>
+<aui-leaflet-control icon="crosshairs" (click)="map?.locate(zoomLevel)" [disabled]="map?.locating"></aui-leaflet-control>

packages/map/lib/src/leaflet/components/controls/leaflet-locate-control/leaflet-locate-control.component.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
-
+import { Component, Input } from '@angular/core';
 import { LeafletMap } from '../../../classes/leaflet-map';
 
 @Component({
 	selector: 'aui-leaflet-locate-control',
 	templateUrl: './leaflet-locate-control.component.html',
 })
 export class LeafletLocateControlComponent {
-	map: LeafletMap;
+	@Input() public zoomLevel = 19;
+
+	public map: LeafletMap;
 }