@theseam/ui-common 0.3.1 → 0.3.2

package/fesm2015/theseam-ui-common-google-maps.js

@@ -0,0 +1,1729 @@
+import { __awaiter, __decorate } from 'tslib';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import { Injectable, NgZone, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver, Component, ChangeDetectionStrategy, Optional, Inject, Input, HostListener, ElementRef, Renderer2, EventEmitter, forwardRef, HostBinding, Output, ViewChild, Directive, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Observable, Subject, fromEvent, BehaviorSubject, from, interval } from 'rxjs';
+import { takeUntil, switchMap, tap, startWith, filter, take, mapTo } from 'rxjs/operators';
+import { AgmMap, AgmCoreModule } from '@agm/core';
+import { faFileImport, faCrosshairs, faSearchLocation } from '@fortawesome/free-solid-svg-icons';
+import { mixinDisabled, InputBoolean, InputNumber } from '@theseam/ui-common/core';
+import { MenuComponent, TheSeamMenuModule } from '@theseam/ui-common/menu';
+import { notNullOrUndefined, isNullOrUndefined, readGeoFile } from '@theseam/ui-common/utils';
+import { ESCAPE } from '@angular/cdk/keycodes';
+import booleanContains from '@turf/boolean-contains';
+import { polygon, multiPolygon } from '@turf/helpers';
+import { ObserversModule } from '@angular/cdk/observers';
+import { CommonModule } from '@angular/common';
+import { InputDirective, TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
+import { TheSeamIconModule } from '@theseam/ui-common/icon';
+import { TheSeamSharedModule } from '@theseam/ui-common/shared';
+
+var AppFeaturePropertyName;
+(function (AppFeaturePropertyName) {
+    AppFeaturePropertyName["IsSelected"] = "__app__isSelected";
+})(AppFeaturePropertyName || (AppFeaturePropertyName = {}));
+function isAppFeatureProperty(propertyName) {
+    return Object.values(AppFeaturePropertyName)
+        .findIndex(value => value === propertyName) !== -1;
+}
+function isFeatureSelected(feature) {
+    const isSelected = feature.getProperty(AppFeaturePropertyName.IsSelected);
+    return coerceBooleanProperty(isSelected);
+}
+function setFeatureSelected(feature, isSelected) {
+    feature.setProperty(AppFeaturePropertyName.IsSelected, isSelected);
+}
+// TODO: Check performance of cloning a google.maps.Data instance, so the
+// properties can be removed with the google maps api, instead of on the
+// resulting json.
+function stripAppFeaturePropertiesFromJson(json) {
+    if (notNullOrUndefined(json) && Array.isArray(json === null || json === void 0 ? void 0 : json.features)) {
+        for (const feature of json.features) {
+            if (notNullOrUndefined(feature === null || feature === void 0 ? void 0 : feature.properties)) {
+                for (const k of Object.keys(feature.properties)) {
+                    if (isAppFeatureProperty(k)) {
+                        feature.properties[k] = undefined;
+                        delete feature.properties[k];
+                    }
+                }
+            }
+        }
+    }
+}
+/**
+ * Searches for a Feature in Data that contains the provided Feature and can use
+ * it as a cutout area.
+ */
+function getPossibleExteriorFeature(data, feature) {
+    let exteriorPolygonFeature;
+    data.forEach(f => {
+        if (f !== feature && (f.getGeometry().getType() === 'Polygon' && featureContains(f, feature))) {
+            exteriorPolygonFeature = f;
+        }
+    });
+    return exteriorPolygonFeature;
+}
+function addInnerFeatureCutoutToExteriorFeature(exteriorFeature, innerFeature) {
+    // NOTE: Other geometries may support cutouts, but our map shapes editor only
+    // supports polygons currently, so we will need to handle other geometry types
+    // here if we start allowing users to draw shapes other than polygon.
+    if (exteriorFeature.getGeometry().getType() !== 'Polygon' || innerFeature.getGeometry().getType() !== 'Polygon') {
+        throw Error(`Inner cutout is only supported by Polygon gemoetry.`);
+    }
+    const featurePolygon = innerFeature.getGeometry();
+    const exteriorPolygon = exteriorFeature.getGeometry();
+    exteriorFeature.setGeometry(new google.maps.Data.Polygon([
+        ...exteriorPolygon.getArray(),
+        featurePolygon.getAt(0).getArray().reverse()
+    ]));
+}
+/**
+ * Google maps paths don't always start and stop at the exact same position, so
+ * this will fix that for turfjs.
+ */
+function fixPathDifferentStartingAndEndingPoint(coordinates) {
+    if (coordinates.length <= 1) {
+        return;
+    }
+    const start = coordinates[0];
+    const end = coordinates[coordinates.length - 1];
+    if (start[0] === end[0] && start[1] === end[1]) {
+        return;
+    }
+    coordinates.push(coordinates[0]);
+}
+function polygonCoordinates(polygon) {
+    return polygon.getArray().map(linRing => {
+        const coords = linRing.getArray().map(x => [x.lng(), x.lat()]);
+        fixPathDifferentStartingAndEndingPoint(coords);
+        return coords;
+    });
+}
+function multiPolygonCoordinates(multiPolygon) {
+    return multiPolygon.getArray().map(x => polygonCoordinates(x));
+}
+function toTurfJsPolygon(polygon$1) {
+    return polygon(polygonCoordinates(polygon$1));
+}
+function toTurfJsMultiPolygon(multiPolygon$1) {
+    return multiPolygon(multiPolygonCoordinates(multiPolygon$1));
+}
+function toTurfJsFeature(googleFeature) {
+    if (googleFeature.getGeometry().getType() === 'Polygon') {
+        return toTurfJsPolygon(googleFeature.getGeometry());
+    }
+    else if (googleFeature.getGeometry().getType() === 'MultiPolygon') {
+        return toTurfJsMultiPolygon(googleFeature.getGeometry());
+    }
+    throw Error(`Unexpected geometry.`);
+}
+function featureContains(featureA, featureB) {
+    const polygonA = toTurfJsFeature(featureA);
+    const polygonB = toTurfJsFeature(featureB);
+    return booleanContains(polygonA, polygonB);
+}
+function createDataFeatureFromPolygon(polygon) {
+    const arr = polygon.getPath().getArray();
+    return new google.maps.Data.Feature({
+        geometry: new google.maps.Data.Polygon([arr])
+    });
+}
+function getBoundsWithAllFeatures(data) {
+    const bounds = new google.maps.LatLngBounds();
+    data.forEach(feature => {
+        const geometry = feature.getGeometry();
+        geometry.forEachLatLng(latLng => {
+            bounds.extend(latLng);
+        });
+    });
+    return bounds;
+}
+function getFeatureBounds(feature) {
+    const bounds = new google.maps.LatLngBounds();
+    const geometry = feature.getGeometry();
+    geometry.forEachLatLng(latLng => {
+        bounds.extend(latLng);
+    });
+    return bounds;
+}
+function getFeatureCenter(feature) {
+    return getFeatureBounds(feature).getCenter();
+}
+function removeAllFeatures(data) {
+    data.forEach(f => data.remove(f));
+}
+function getFeaturesCount(data) {
+    let count = 0;
+    data.forEach(() => count++);
+    return count;
+}
+/**
+ * NOTE: Original events are not emitted, because filtering may omit events.
+ */
+function createFeatureChangeObservable(data, ngZone) {
+    return new Observable(subscriber => {
+        const listeners = [];
+        ngZone.runOutsideAngular(() => {
+            listeners.push(data.addListener('setgeometry', (event) => {
+                ngZone.run(() => { subscriber.next(undefined); });
+            }));
+            listeners.push(data.addListener('addfeature', (event) => {
+                ngZone.run(() => { subscriber.next(undefined); });
+            }));
+            listeners.push(data.addListener('removefeature', (event) => {
+                ngZone.run(() => { subscriber.next(undefined); });
+            }));
+            listeners.push(data.addListener('setproperty', (event) => {
+                if (!isAppFeatureProperty(event.name)) {
+                    ngZone.run(() => { subscriber.next(undefined); });
+                }
+            }));
+            listeners.push(data.addListener('removeproperty', (event) => {
+                if (!isAppFeatureProperty(event.name)) {
+                    ngZone.run(() => { subscriber.next(undefined); });
+                }
+            }));
+        });
+        return () => {
+            listeners.forEach(google.maps.event.removeListener);
+        };
+    });
+}
+
+// TODO: Close on map losing focus.
+class GoogleMapsContextMenu {
+    constructor(_map, _menu, _position, _vcr, _ngZone, _data, _feature) {
+        this._map = _map;
+        this._menu = _menu;
+        this._vcr = _vcr;
+        this._ngZone = _ngZone;
+        this._data = _data;
+        this._feature = _feature;
+        const tplRef = this._menu.templateRef;
+        if (tplRef === undefined || tplRef === null) {
+            throw Error(`Menu template is not defined.`);
+        }
+        const ref = this._vcr.createEmbeddedView(tplRef);
+        ref.detectChanges();
+        const listeners = [];
+        const ngUnsubscribe = new Subject();
+        // TODO: Fix the initial focus. setTimeout avoids the wrong contextmenu
+        // getting triggered, but the first item flashes and looks off this way.
+        setTimeout(() => {
+            this._menu.focusFirstItem('program');
+        });
+        this._menu.closed.pipe(takeUntil(ngUnsubscribe)).subscribe(v => {
+            this.close();
+        });
+        fromEvent(document, 'keydown').pipe(takeUntil(ngUnsubscribe)).subscribe((event) => {
+            if (event.keyCode === ESCAPE) {
+                this.close();
+            }
+        });
+        const __cleanup = () => this._cleanupFn();
+        class GoogleMapsContextMenuOverlayView extends google.maps.OverlayView {
+            constructor(position, content) {
+                super();
+                this.position = position;
+                this.position = position;
+                this.containerDiv = document.createElement('div');
+                this.containerDiv.style.cursor = 'auto';
+                this.containerDiv.style.height = '0',
+                    this.containerDiv.style.position = 'absolute';
+                this.containerDiv.appendChild(content);
+                // Optionally stop clicks, etc., from bubbling up to the map.
+                GoogleMapsContextMenuOverlayView.preventMapHitsAndGesturesFrom(this.containerDiv);
+            }
+            /** Called when the view is added to the map. */
+            onAdd() {
+                // tslint:disable-next-line: no-non-null-assertion
+                this.getPanes().floatPane.appendChild(this.containerDiv);
+            }
+            /** Called when the view is removed from the map. */
+            onRemove() {
+                if (this.containerDiv.parentElement) {
+                    this.containerDiv.parentElement.removeChild(this.containerDiv);
+                }
+                __cleanup();
+            }
+            /** Called each frame when the view needs to draw itself. */
+            draw() {
+                // tslint:disable-next-line: no-non-null-assertion
+                const divPosition = this.getProjection().fromLatLngToDivPixel(this.position);
+                // Hide the popup when it is far out of view.
+                const display = Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000
+                    ? 'block'
+                    : 'none';
+                if (display === 'block') {
+                    this.containerDiv.style.left = divPosition.x + 'px';
+                    this.containerDiv.style.top = divPosition.y + 'px';
+                }
+                if (this.containerDiv.style.display !== display) {
+                    this.containerDiv.style.display = display;
+                }
+            }
+        }
+        this._overlayView = new GoogleMapsContextMenuOverlayView(_position, ref.rootNodes[0]);
+        this._overlayView.setMap(this._map);
+        this._ngZone.runOutsideAngular(() => {
+            listeners.push(this._data.addListener('removefeature', (event) => {
+                if (event.feature === this._feature) {
+                    this._ngZone.run(() => { this.close(); });
+                }
+            }));
+            listeners.push(this._data.addListener('setproperty', (event) => {
+                if (event.feature === this._feature && !isFeatureSelected(this._feature)) {
+                    this._ngZone.run(() => { this.close(); });
+                }
+            }));
+            listeners.push(this._data.addListener('removeproperty', (event) => {
+                if (event.feature === this._feature && !isFeatureSelected(this._feature)) {
+                    this._ngZone.run(() => { this.close(); });
+                }
+            }));
+            listeners.push(this._map.addListener('click', (event) => {
+                this._ngZone.run(() => { this.close(); });
+            }));
+            listeners.push(this._data.addListener('click', (event) => {
+                this._ngZone.run(() => { this.close(); });
+            }));
+        });
+        this._cleanupFn = () => {
+            ngUnsubscribe.next();
+            ngUnsubscribe.complete();
+            listeners.forEach(google.maps.event.removeListener);
+        };
+    }
+    close() {
+        this._overlayView.setMap(null);
+    }
+}
+
+var MapValueSource;
+(function (MapValueSource) {
+    MapValueSource["Input"] = "input";
+    MapValueSource["FeatureChange"] = "featurechange";
+})(MapValueSource || (MapValueSource = {}));
+class MapValueManagerService {
+    constructor() {
+        this._valueChangedSubject = new Subject();
+        this.valueChanged = this._valueChangedSubject.asObservable();
+    }
+    setValue(value, source) {
+        if (value === this._value) {
+            return false;
+        }
+        if (value === null || value === undefined) {
+            this._value = value;
+            const _change = {
+                source,
+                value: this._value,
+            };
+            this._valueChangedSubject.next(_change);
+            return true;
+        }
+        if (JSON.stringify(value) === JSON.stringify(this._value)) {
+            return true;
+        }
+        // TODO: Validate object is valid geojson.
+        this._value = value;
+        const change = {
+            source,
+            value: this._value,
+        };
+        this._valueChangedSubject.next(change);
+        return true;
+    }
+    get value() {
+        return this._value;
+    }
+}
+MapValueManagerService.decorators = [
+    { type: Injectable }
+];
+MapValueManagerService.ctorParameters = () => [];
+
+const DEFAULT_POLYGON_OPTIONS = {
+    clickable: true,
+    draggable: true,
+    editable: true,
+    // fillColor: 'rgba(60,150,60,1)',
+    // strokeColor: 'rgba(155,255,0,1)'
+};
+const DEFAULT_DRAWING_MANAGER_OPTIONS = () => ({
+    drawingControl: true,
+    drawingControlOptions: {
+        drawingModes: [
+            google.maps.drawing.OverlayType.POLYGON
+        ]
+    },
+    polygonOptions: DEFAULT_POLYGON_OPTIONS,
+    drawingMode: null
+});
+const ɵ0 = DEFAULT_DRAWING_MANAGER_OPTIONS;
+const FEATURE_STYLE_OPTIONS_DEFAULT = {
+    clickable: true,
+    visible: true,
+    // zIndex?: number;
+    // cursor?: string;
+    draggable: false,
+    editable: false,
+    fillColor: 'teal',
+    fillOpacity: 0.3,
+    strokeColor: 'blue',
+    strokeOpacity: 1,
+    strokeWeight: 2,
+};
+const FEATURE_STYLE_OPTIONS_SELECTED = Object.assign(Object.assign({}, FEATURE_STYLE_OPTIONS_DEFAULT), { draggable: true, editable: true, fillColor: 'green', fillOpacity: 0.7, strokeColor: 'limegreen', strokeOpacity: 1, strokeWeight: 2 });
+class GoogleMapsService {
+    constructor(_mapValueManager, _ngZone, _vcr) {
+        this._mapValueManager = _mapValueManager;
+        this._ngZone = _ngZone;
+        this._vcr = _vcr;
+        this._ngUnsubscribe = new Subject();
+        this._mapReadySubject = new BehaviorSubject(false);
+        this._featureContextMenu = null;
+        this._activeContextMenu = null;
+        this._allowDrawingHoleInPolygon = false;
+        this.mapReady$ = this._mapReadySubject.asObservable();
+    }
+    get mapReady() { return this._mapReadySubject.value; }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    setMap(map) {
+        this.googleMap = map;
+        this._mapReadySubject.next(true);
+        this._initDrawingManager();
+        this._initFeatureStyling();
+        this._initFeatureChangeListeners();
+    }
+    setBaseLatLng(lat, lng) {
+        this._baseLatLng = { lat, lng };
+    }
+    // TODO: Refactor out of the service meant to just wrap the google maps api.
+    setFeatureContextMenu(menu) {
+        this._featureContextMenu = menu;
+    }
+    getDiv() {
+        this._assertInitialized();
+        return this.googleMap.getDiv();
+    }
+    fitBounds(bounds, padding) {
+        this._assertInitialized();
+        this.googleMap.fitBounds(bounds, padding);
+    }
+    /**
+     * Iterates the map's features and removes any that are selected.
+     */
+    deleteSelection() {
+        this._assertInitialized();
+        const mapData = this.googleMap.data;
+        mapData.forEach(f => {
+            if (isFeatureSelected(f)) {
+                mapData.remove(f);
+            }
+        });
+    }
+    /**
+     * Stops the current drawing.
+     */
+    stopDrawing() {
+        this._ngZone.runOutsideAngular(() => {
+            if (isNullOrUndefined(this._drawingManager) || this._drawingManager.getDrawingMode() === null) {
+                return;
+            }
+            // Listening for the completion event of the overlay currently being drawn
+            // and removing it. I haven't found a way to cancel the current drawing,
+            // without this hack that assumes our listeners will not run into a race
+            // condition.
+            const listener = google.maps.event.addListener(this._drawingManager, 'overlaycomplete', (event) => {
+                event.overlay.setMap(null);
+                listener.remove();
+            });
+            // To fake canceling the current drawing, without disabling the drawing
+            // mode, the drawin mode is being unset then immediately set back. When
+            // the mode is unset the 'overlaycomplete' event will fire, which will
+            // give a reference to the current overlay to remove, then it is set back
+            // to the mode the user was using. To the user is should just seem like
+            // the current drawing was canceled and they can start drawing again.
+            const mode = this._drawingManager.getDrawingMode();
+            this._drawingManager.setDrawingMode(null);
+            this._drawingManager.setDrawingMode(mode);
+            // 'overlaycomplete' should fire immediately, unless an overlay hadn't
+            // started drawing. This timeout will make sure the listener gets removed.
+            setTimeout(() => {
+                listener.remove();
+            });
+        });
+    }
+    _initDrawingManager() {
+        if (notNullOrUndefined(this._drawingManager)) {
+            throw Error(`DrawingManager is already initialized.`);
+        }
+        this._assertInitialized();
+        const options = DEFAULT_DRAWING_MANAGER_OPTIONS();
+        const drawingManager = new google.maps.drawing.DrawingManager(options);
+        drawingManager.setMap(this.googleMap);
+        this._drawingManager = drawingManager;
+        this._drawingManager.addListener('drawingmode_changed', event => {
+            var _a;
+            if (((_a = this._drawingManager) === null || _a === void 0 ? void 0 : _a.getDrawingMode()) !== null) {
+                this._assertInitialized();
+                this.googleMap.data.forEach(f => {
+                    if (isFeatureSelected(f)) {
+                        setFeatureSelected(f, false);
+                    }
+                });
+            }
+        });
+    }
+    addControl(element, position) {
+        this._assertInitialized();
+        this.googleMap.controls[position].push(element);
+    }
+    setData(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._assertInitialized();
+            removeAllFeatures(this.googleMap.data);
+            this.googleMap.data.addGeoJson(data);
+            this.googleMap.fitBounds(getBoundsWithAllFeatures(this.googleMap.data));
+        });
+    }
+    // TODO: Refactor out of the service meant to just wrap the google maps api.
+    reCenterOnFeatures() {
+        this._assertInitialized();
+        if (getFeaturesCount(this.googleMap.data) === 0) {
+            if (!this._baseLatLng) {
+                return;
+            }
+            this.googleMap.panTo(this._baseLatLng);
+            return;
+        }
+        this.googleMap.fitBounds(getBoundsWithAllFeatures(this.googleMap.data));
+        // TODO: Fix to pan to center. Currently fitBounds results in the expected
+        // result, but pantToBounds animates.
+        // this.googleMap.panToBounds(getBoundsWithAllFeatures(this.googleMap.data))
+    }
+    allowDrawingHoleInPolygon(allow) {
+        this._allowDrawingHoleInPolygon = allow;
+    }
+    setFileInputHandler(handler) {
+        this._fileInputHandler;
+    }
+    getFileInputHandler() {
+        return this._fileInputHandler;
+    }
+    _initFeatureStyling() {
+        this._assertInitialized();
+        // Disable any selection when clicking the map.
+        //
+        // TODO: There may be a better way to do this that would be more accurate or
+        // additional events that should be listened to, such as the disabling
+        // selection when the map looses focus.
+        this.googleMap.addListener('click', (even) => {
+            this._assertInitialized();
+            this.googleMap.data.forEach(f => setFeatureSelected(f, false));
+        });
+        // Determine what the style of the features are.
+        this.googleMap.data.setStyle((feature) => {
+            if (isFeatureSelected(feature)) {
+                return FEATURE_STYLE_OPTIONS_SELECTED;
+            }
+            return FEATURE_STYLE_OPTIONS_DEFAULT;
+        });
+        // Select a feature when clicked.
+        this.googleMap.data.addListener('click', (event) => {
+            this._assertInitialized();
+            setFeatureSelected(event.feature, true);
+            this.googleMap.data.forEach(f => {
+                if (f !== event.feature && isFeatureSelected(f)) {
+                    setFeatureSelected(f, false);
+                }
+            });
+        });
+        // Set a style on hovered features that can be selected.
+        this.googleMap.data.addListener('mouseover', (event) => {
+            this._assertInitialized();
+            this.googleMap.data.revertStyle();
+            if (!this.isDrawing() && !isFeatureSelected(event.feature)) {
+                this.googleMap.data.overrideStyle(event.feature, { strokeWeight: 4 });
+            }
+        });
+        // Remove any hover styles when mouse moves away.
+        this.googleMap.data.addListener('mouseout', (event) => {
+            this._assertInitialized();
+            this.googleMap.data.revertStyle();
+        });
+    }
+    _initFeatureChangeListeners() {
+        this._assertInitialized();
+        createFeatureChangeObservable(this.googleMap.data, this._ngZone).pipe(switchMap(() => from(this.getGeoJson()).pipe(tap(geoJson => this._mapValueManager.setValue(geoJson, MapValueSource.FeatureChange)))), takeUntil(this._ngUnsubscribe)).subscribe();
+        this.googleMap.data.addListener('contextmenu', (event) => {
+            if (!isFeatureSelected(event.feature)) {
+                return;
+            }
+            this._openContextMenuForFeature(event.feature, event.latLng);
+        });
+        if (notNullOrUndefined(this._drawingManager)) {
+            google.maps.event.addListener(this._drawingManager, 'polygoncomplete', (polygon) => {
+                var _a;
+                // The DrawingManager doesn't seem to have a way to access the overlays,
+                // so if the map is not set then it shouldn'y be considered a successful
+                // completion. I am canceling the active drawing by disabling drawing
+                // mode and setting the map null in the 'overlaycomplete' event, which
+                // fires before the 'polygoncomplete' event.
+                if (isNullOrUndefined(polygon.getMap())) {
+                    return;
+                }
+                this._assertInitialized();
+                // Create a map feature of the drawn polygon.
+                const feature = createDataFeatureFromPolygon(polygon);
+                // Remove the drawn polygon.
+                polygon.setMap(null);
+                // Stop drawing.
+                (_a = this._drawingManager) === null || _a === void 0 ? void 0 : _a.setDrawingMode(null);
+                // Check if the feature should be used as a cutout to an existing
+                // feature or added as it's own feature.
+                const exteriorPolygonFeature = this._allowDrawingHoleInPolygon
+                    ? getPossibleExteriorFeature(this.googleMap.data, feature)
+                    : undefined;
+                if (exteriorPolygonFeature) {
+                    addInnerFeatureCutoutToExteriorFeature(exteriorPolygonFeature, feature);
+                    setFeatureSelected(exteriorPolygonFeature, true);
+                }
+                else {
+                    this.googleMap.data.add(feature);
+                    setFeatureSelected(feature, true);
+                }
+            });
+        }
+    }
+    isDrawing() {
+        if (isNullOrUndefined(this._drawingManager)) {
+            return true;
+        }
+        return this._drawingManager.getDrawingMode() !== null;
+    }
+    // TODO: Refactor out of the service meant to just wrap the google maps api.
+    hasSelectedFeature() {
+        this._assertInitialized();
+        let isSelected = false;
+        this.googleMap.data.forEach(f => {
+            if (isFeatureSelected(f)) {
+                isSelected = true;
+            }
+        });
+        return isSelected;
+    }
+    // TODO: Refactor out of the service meant to just wrap the google maps api.
+    getSelectedFeature() {
+        this._assertInitialized();
+        let feature = null;
+        this.googleMap.data.forEach(f => {
+            if (isFeatureSelected(f)) {
+                feature = f;
+            }
+        });
+        return feature;
+    }
+    // TODO: Refactor out of the service meant to just wrap the google maps api.
+    openContextMenu() {
+        const feature = this.getSelectedFeature();
+        if (feature) {
+            this._openContextMenuForFeature(feature);
+        }
+    }
+    // TODO: Refactor out of the service meant to just wrap the google maps api.
+    _openContextMenuForFeature(feature, position) {
+        if (this._activeContextMenu) {
+            this._activeContextMenu.close();
+            this._activeContextMenu = null;
+        }
+        this._assertInitialized();
+        let _position = position;
+        if (!_position) {
+            _position = getFeatureCenter(feature);
+        }
+        if (this._featureContextMenu) {
+            this._activeContextMenu = new GoogleMapsContextMenu(this.googleMap, this._featureContextMenu, _position, this._vcr, this._ngZone, this.googleMap.data, feature);
+        }
+    }
+    getGeoJson(removeAppProperties = true) {
+        return new Promise((resolve, reject) => {
+            this._assertInitialized();
+            this.googleMap.data.toGeoJson(f => {
+                if (removeAppProperties) {
+                    stripAppFeaturePropertiesFromJson(f);
+                }
+                resolve(f);
+            });
+        });
+    }
+    /** Asserts that the map has been initialized. */
+    _assertInitialized() {
+        if (!this.googleMap && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            throw Error('Cannot access Google Map information before the API has been initialized. ' +
+                'Please wait for the API to load before trying to interact with it.');
+        }
+    }
+}
+GoogleMapsService.decorators = [
+    { type: Injectable }
+];
+GoogleMapsService.ctorParameters = () => [
+    { type: MapValueManagerService },
+    { type: NgZone },
+    { type: ViewContainerRef }
+];
+
+const MAP_CONTROLS_SERVICE = new InjectionToken('MAP_CONTROLS_SERVICE');
+const MAP_CONTROL_DATA = new InjectionToken('MAP_CONTROL_DATA');
+
+class MapControlRef {
+    constructor(_googleMaps, _componentFactoryResolver, _injector, _controlDef) {
+        var _a;
+        this._googleMaps = _googleMaps;
+        this._componentFactoryResolver = _componentFactoryResolver;
+        this._injector = _injector;
+        this._controlDef = _controlDef;
+        this._destroyedSubject = new Subject();
+        this.destroyed = this._destroyedSubject.asObservable();
+        const component = this._controlDef.component;
+        const factory = this._componentFactoryResolver.resolveComponentFactory(component);
+        const providers = [];
+        if (this._controlDef.data) {
+            providers.push({
+                provide: MAP_CONTROL_DATA,
+                useValue: this._controlDef.data
+            });
+        }
+        const injector = Injector.create({
+            providers,
+            parent: this._injector,
+        });
+        this._componentRef = factory.create(injector);
+        this._componentRef.changeDetectorRef.detectChanges();
+        const position = (_a = this._controlDef.position) !== null && _a !== void 0 ? _a : google.maps.ControlPosition.LEFT_BOTTOM;
+        this._googleMaps.addControl(this._componentRef.location.nativeElement, position);
+        this._addedAtPosition = position;
+    }
+    destroy() {
+        const googleMaps = this._googleMaps.googleMap;
+        if (googleMaps !== undefined) {
+            let idx = -1;
+            googleMaps.controls[this._addedAtPosition].forEach((elem, index) => {
+                if (elem === this._componentRef.location.nativeElement) {
+                    idx = index;
+                }
+            });
+            if (idx === -1) {
+                throw Error(`Unable to destroy control. Control not found.`);
+            }
+            googleMaps.controls[this._addedAtPosition].removeAt(idx);
+        }
+        this._componentRef.destroy();
+        this._destroyedSubject.next();
+        this._destroyedSubject.complete();
+    }
+}
+class GoogleMapsControlsService {
+    constructor(_googleMaps, _componentFactoryResolver, _injector) {
+        this._googleMaps = _googleMaps;
+        this._componentFactoryResolver = _componentFactoryResolver;
+        this._injector = _injector;
+    }
+    add(control) {
+        return new MapControlRef(this._googleMaps, this._componentFactoryResolver, this._injector, control);
+    }
+}
+GoogleMapsControlsService.decorators = [
+    { type: Injectable }
+];
+GoogleMapsControlsService.ctorParameters = () => [
+    { type: GoogleMapsService },
+    { type: ComponentFactoryResolver },
+    { type: Injector }
+];
+
+/**
+ *
+ */
+class TheSeamGoogleMapsRecenterButtonControlComponent {
+    constructor(_googleMaps, _data) {
+        this._googleMaps = _googleMaps;
+        this._ngUnsubscribe = new Subject();
+        this._listeners = [];
+        if (_data) {
+            if (_data.hasOwnProperty('label')) {
+                this.label = _data.label;
+            }
+            if (_data.hasOwnProperty('icon')) {
+                this.icon = _data.icon;
+            }
+        }
+    }
+    _onClick(event) {
+        this._googleMaps.reCenterOnFeatures();
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._listeners.forEach(l => l());
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+}
+TheSeamGoogleMapsRecenterButtonControlComponent.decorators = [
+    { type: Component, args: [{
+                // tslint:disable-next-line: component-selector
+                selector: 'button[seam-google-maps-recenter-button-control]',
+                template: "<seam-icon [icon]=\"icon\" iconType=\"image-fill\"></seam-icon>\n",
+                host: {
+                    '[attr.draggable]': 'false',
+                    '[attr.aria-label]': 'label',
+                    '[attr.title]': 'label',
+                    'type': 'button',
+                    'class': 'gmnoprint gm-control-active'
+                },
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{background:none white;border:0px;margin:10px;padding:11px;text-transform:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:2px;height:40px;width:40px;box-shadow:#0000004d 0 1px 4px -1px;overflow:hidden}\n"]
+            },] }
+];
+TheSeamGoogleMapsRecenterButtonControlComponent.ctorParameters = () => [
+    { type: GoogleMapsService },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAP_CONTROL_DATA,] }] }
+];
+TheSeamGoogleMapsRecenterButtonControlComponent.propDecorators = {
+    label: [{ type: Input }],
+    icon: [{ type: Input }],
+    _onClick: [{ type: HostListener, args: ['click', ['event'],] }]
+};
+
+/**
+ *
+ */
+class TheSeamGoogleMapsUploadButtonControlComponent {
+    constructor(_elementRef, _mapValueManager, _renderer, _googleMaps, _data) {
+        this._elementRef = _elementRef;
+        this._mapValueManager = _mapValueManager;
+        this._renderer = _renderer;
+        this._googleMaps = _googleMaps;
+        this._ngUnsubscribe = new Subject();
+        this._listeners = [];
+        if (_data) {
+            if (_data.hasOwnProperty('label')) {
+                this.label = _data.label;
+            }
+            if (_data.hasOwnProperty('icon')) {
+                this.icon = _data.icon;
+            }
+        }
+        this._fileInputElement = this._createHiddenInput();
+        this._renderer.appendChild(this._elementRef.nativeElement, this._fileInputElement);
+    }
+    _onClick(event) {
+        this._fileInputElement.click();
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._listeners.forEach(l => l());
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    _getFile(throwIfInvalidFiles = true) {
+        const files = this._fileInputElement.files;
+        if (files === null || files.length === 0) {
+            return null;
+        }
+        if (throwIfInvalidFiles) {
+            if (files.length > 1) {
+                throw Error(`Only one file can be imported at a time.`);
+            }
+        }
+        return files[0];
+    }
+    _importFile(file) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const json = yield readGeoFile(file);
+            this._mapValueManager.setValue(json, MapValueSource.Input);
+            this._resetInput();
+        });
+    }
+    _createHiddenInput() {
+        const fileInputElement = this._renderer.createElement('input');
+        this._renderer.setAttribute(fileInputElement, 'type', 'file');
+        this._renderer.setAttribute(fileInputElement, 'hidden', '');
+        this._renderer.setAttribute(fileInputElement, 'accept', '.json,.geojson,.shp,.zip');
+        this._listeners.push(this._renderer.listen(fileInputElement, 'change', (event) => {
+            const file = this._getFile();
+            if (file === null) {
+                return;
+            }
+            const fileImportHandler = this._googleMaps.getFileInputHandler();
+            if (fileImportHandler) {
+                fileImportHandler(file);
+            }
+            else {
+                this._importFile(file);
+            }
+        }));
+        return fileInputElement;
+    }
+    _createTemporaryFormElement() {
+        return this._renderer.createElement('form');
+    }
+    /**
+     * Reset input element, so that the same file can be added again.
+     */
+    _resetInput() {
+        const formElement = this._createTemporaryFormElement();
+        this._renderer.appendChild(formElement, this._fileInputElement);
+        formElement.reset();
+        this._renderer.appendChild(this._elementRef.nativeElement, this._fileInputElement);
+    }
+}
+TheSeamGoogleMapsUploadButtonControlComponent.decorators = [
+    { type: Component, args: [{
+                // tslint:disable-next-line: component-selector
+                selector: 'button[seam-google-maps-upload-button-control]',
+                template: "<seam-icon [icon]=\"icon\" iconType=\"image-fill\"></seam-icon>\n",
+                host: {
+                    '[attr.draggable]': 'false',
+                    '[attr.aria-label]': 'label',
+                    '[attr.title]': 'label',
+                    'type': 'button',
+                    'class': 'gmnoprint gm-control-active'
+                },
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{background:none white;border:0px;margin:10px;padding:11px;text-transform:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:2px;height:40px;width:40px;box-shadow:#0000004d 0 1px 4px -1px;overflow:hidden}\n"]
+            },] }
+];
+TheSeamGoogleMapsUploadButtonControlComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: MapValueManagerService },
+    { type: Renderer2 },
+    { type: GoogleMapsService },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAP_CONTROL_DATA,] }] }
+];
+TheSeamGoogleMapsUploadButtonControlComponent.propDecorators = {
+    label: [{ type: Input }],
+    icon: [{ type: Input }],
+    _onClick: [{ type: HostListener, args: ['click', ['event'],] }]
+};
+
+class TheSeamGoogleMapsComponentBase {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}
+const _TheSeamGoogleMapsMixinBase = mixinDisabled(TheSeamGoogleMapsComponentBase);
+/**
+ * A wrapper for googlemap.
+ */
+class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
+    constructor(elementRef, _focusMonitor, _googleMaps, _mapValueManager) {
+        super(elementRef);
+        this._focusMonitor = _focusMonitor;
+        this._googleMaps = _googleMaps;
+        this._mapValueManager = _mapValueManager;
+        this._ngUnsubscribe = new Subject();
+        this._fileUploadControlDef = {
+            component: TheSeamGoogleMapsUploadButtonControlComponent,
+            data: { label: 'Import Geo File', icon: faFileImport },
+            position: 6 /* google.maps.ControlPosition.LEFT_BOTTOM */,
+        };
+        this._reCenterControlDef = {
+            component: TheSeamGoogleMapsRecenterButtonControlComponent,
+            data: { label: 'Center on Field', icon: faCrosshairs },
+            position: 9 /* google.maps.ControlPosition.RIGHT_BOTTOM */,
+        };
+        this._focusOrigin = null;
+        /**
+         * Set the tab index to `-1` to allow the root element of the
+         * component to receive `focus` event from javascript, but not get focused by
+         * keyboard navigation.
+         */
+        this._tabIndex = -1;
+        this.fileDropEnabled = true;
+        this.fileUploadControlEnabled = false;
+        this.fullscreenControlEnabled = true;
+        this.reCenterControlEnabled = true;
+        this.mapTypeControlEnabled = true;
+        this.streetViewControlEnabled = false;
+        this.allowDrawingHoleInPolygon = false;
+        this.zoom = 14;
+        this.longitude = -98.570209;
+        this.latitude = 37.633814;
+        this.mapReady = new EventEmitter();
+        this._focusMonitor.monitor(this._elementRef, true).pipe(tap(origin => this._focusOrigin = origin), takeUntil(this._ngUnsubscribe)).subscribe();
+        this._mapValueManager.valueChanged.pipe(tap(change => {
+            if (this.onChange) {
+                this.onChange(change.value);
+            }
+            if (this.onTouched) {
+                this.onTouched();
+            }
+        }), tap(changed => {
+            if (this._googleMaps.mapReady && changed.source !== MapValueSource.FeatureChange) {
+                this._googleMaps.setData(changed.value);
+            }
+        }), takeUntil(this._ngUnsubscribe)).subscribe();
+        this._googleMaps.setBaseLatLng(this.latitude, this.longitude);
+    }
+    set value(value) {
+        this._mapValueManager.setValue(value, MapValueSource.Input);
+    }
+    get value() {
+        return this._mapValueManager.value;
+    }
+    set tabIndex(value) { this._tabIndex = coerceNumberProperty(value); }
+    get tabIndex() { return this._tabIndex; }
+    set fileImportHandler(value) {
+        this._googleMaps.setFileInputHandler(value);
+    }
+    get _attrDisabled() { return this.disabled || null; }
+    get _attrTabIndex() { return this.disabled ? -1 : (this.tabIndex || 0); }
+    /** @ignore */
+    ngOnInit() {
+        this._googleMaps.setFeatureContextMenu(this.featureContextMenu);
+        fromEvent(window, 'keydown').pipe(tap((event) => {
+            switch (event.code) {
+                case 'Delete':
+                    this._googleMaps.deleteSelection();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                case 'Escape':
+                    this._googleMaps.stopDrawing();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                case 'ContextMenu':
+                    this._googleMaps.openContextMenu();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+            }
+        }), takeUntil(this._ngUnsubscribe)).subscribe();
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._focusMonitor.stopMonitoring(this._elementRef);
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    /** @ignore */
+    ngAfterViewInit() { }
+    ngOnChanges(changes) {
+        let updateBase = false;
+        if (changes.hasOwnProperty('latitude')) {
+            this.latitude = changes['latitude'].currentValue;
+            updateBase = true;
+        }
+        if (changes.hasOwnProperty('longitude')) {
+            this.longitude = changes['longitude'].currentValue;
+            updateBase = true;
+        }
+        if (updateBase) {
+            this._googleMaps.setBaseLatLng(this.latitude, this.longitude);
+        }
+        if (changes.hasOwnProperty('allowDrawingHoleInPolygon')) {
+            this._googleMaps.allowDrawingHoleInPolygon(this.allowDrawingHoleInPolygon);
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    fitBounds(bounds, padding) {
+        this._googleMaps.fitBounds(bounds, padding);
+    }
+    getGeoJson() {
+        return this._googleMaps.getGeoJson();
+    }
+    hasFocus() {
+        return this._focusOrigin !== null && this._focusOrigin !== undefined;
+    }
+    /** Focuses the button. */
+    focus() {
+        this._getHostElement().focus();
+    }
+    _getHostElement() {
+        return this._elementRef.nativeElement;
+    }
+    _onMapReady(theMap) {
+        var _a;
+        this._googleMaps.setMap(theMap);
+        this._googleMaps.setData(this._mapValueManager.value);
+        // NOTE: AgmMap has a race condition problem that causes the input latitude,
+        // longitude, and zoom to get ignored, before googlemaps emits
+        // 'center_changed'. This should avoid the issue, until we stop using AgmMap
+        // or upgrade to a more recent version that may not have the issue anymore.
+        this._googleMaps.reCenterOnFeatures();
+        (_a = this._googleMaps.googleMap) === null || _a === void 0 ? void 0 : _a.setZoom(this.zoom);
+    }
+    _onClickDeleteFeature() {
+        this._googleMaps.deleteSelection();
+    }
+}
+TheSeamGoogleMapsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-google-maps',
+                template: "<agm-map\n  [latitude]=\"latitude\"\n  [longitude]=\"longitude\"\n  [zoom]=\"zoom\"\n  [mapTypeControl]=\"true\"\n  mapTypeId=\"hybrid\"\n  [streetViewControl]=\"false\"\n  (mapReady)=\"_onMapReady($event)\"\n  [fullscreenControl]=\"$any(fullscreenControlEnabled)\">\n</agm-map>\n<seam-menu #featureContextMenu>\n  <button seamMenuItem (click)=\"_onClickDeleteFeature()\">Delete</button>\n</seam-menu>\n<seam-map-file-drop *ngIf=\"fileDropEnabled\"></seam-map-file-drop>\n\n<seam-map-control *ngIf=\"fileUploadControlEnabled\" [def]=\"_fileUploadControlDef\"></seam-map-control>\n<seam-map-control *ngIf=\"reCenterControlEnabled\" [def]=\"_reCenterControlDef\"></seam-map-control>\n",
+                inputs: [
+                    'disabled'
+                ],
+                providers: [
+                    MapValueManagerService,
+                    GoogleMapsService,
+                    { provide: MAP_CONTROLS_SERVICE, useClass: GoogleMapsControlsService },
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        // tslint:disable-next-line: no-use-before-declare
+                        useExisting: forwardRef(() => TheSeamGoogleMapsComponent),
+                        multi: true
+                    }
+                ],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                exportAs: 'seamGoogleMaps',
+                styles: [":host{display:block;position:relative;height:400px;width:100%}:host.show-focus-border.cdk-focused{outline:0;box-shadow:0 0 0 .2rem #357ebd40}:host.show-focus-border[disabled]{opacity:.65}agm-map{height:inherit;width:inherit}\n"]
+            },] }
+];
+TheSeamGoogleMapsComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: FocusMonitor },
+    { type: GoogleMapsService },
+    { type: MapValueManagerService }
+];
+TheSeamGoogleMapsComponent.propDecorators = {
+    value: [{ type: Input }],
+    tabIndex: [{ type: Input }],
+    fileDropEnabled: [{ type: Input }],
+    fileUploadControlEnabled: [{ type: Input }],
+    fullscreenControlEnabled: [{ type: Input }],
+    reCenterControlEnabled: [{ type: Input }],
+    mapTypeControlEnabled: [{ type: Input }],
+    streetViewControlEnabled: [{ type: Input }],
+    allowDrawingHoleInPolygon: [{ type: Input }],
+    fileImportHandler: [{ type: Input }],
+    _attrDisabled: [{ type: HostBinding, args: ['attr.disabled',] }],
+    _attrTabIndex: [{ type: HostBinding, args: ['attr.tabindex',] }],
+    zoom: [{ type: Input }],
+    longitude: [{ type: Input }],
+    latitude: [{ type: Input }],
+    mapReady: [{ type: Output }],
+    agmMap: [{ type: ViewChild, args: [AgmMap, { static: true },] }],
+    featureContextMenu: [{ type: ViewChild, args: ['featureContextMenu', { static: true, read: MenuComponent },] }],
+    agmMapTpl: [{ type: ViewChild, args: [AgmMap, { static: true, read: ElementRef },] }]
+};
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "fileDropEnabled", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "fileUploadControlEnabled", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "fullscreenControlEnabled", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "reCenterControlEnabled", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "mapTypeControlEnabled", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "streetViewControlEnabled", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "allowDrawingHoleInPolygon", void 0);
+__decorate([
+    InputNumber()
+], TheSeamGoogleMapsComponent.prototype, "zoom", void 0);
+__decorate([
+    InputNumber()
+], TheSeamGoogleMapsComponent.prototype, "longitude", void 0);
+__decorate([
+    InputNumber()
+], TheSeamGoogleMapsComponent.prototype, "latitude", void 0);
+
+const SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS = {
+    componentRestrictions: { country: 'US' }
+};
+class TheSeamGoogleMapsPlacesAutocompleteDirective {
+    constructor(_elementRef, _ngZone) {
+        this._elementRef = _elementRef;
+        this._ngZone = _ngZone;
+        this._autoCompleteReadySubject = new Subject();
+        this._ngUnsubscribe = new Subject();
+        this._placeChangedPending = [];
+        this._listeners = [];
+        this._options = SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS;
+        this._attrType = 'text';
+        this.placeChanged = this._autoCompleteReadySubject.pipe(startWith(undefined), switchMap(() => this._createPlaceChangedObservable()));
+    }
+    set options(value) {
+        this._options = value || SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS;
+    }
+    ngOnInit() {
+        this._ngZone.runOutsideAngular(() => {
+            this._untilGoogleMapsApiLoaded().pipe(takeUntil(this._ngUnsubscribe)).subscribe(() => {
+                this.autoComplete = new google.maps.places.Autocomplete(this.getHostElement(), this._options);
+                this._placeChangedPending.forEach(pending => pending.observable.subscribe(pending.subscriber));
+                this._autoCompleteReadySubject.next();
+            });
+        });
+    }
+    ngOnDestroy() {
+        this._listeners.forEach(l => l.remove());
+        this._listeners = [];
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    ngOnChanges(changes) {
+        if (this.autoComplete && changes['options']) {
+            this.autoComplete.setOptions(this._options);
+        }
+    }
+    _untilGoogleMapsApiLoaded() {
+        return interval(500).pipe(filter(() => !!(window.google && window.google.maps && window.google.maps.version)), take(1), mapTo(undefined));
+    }
+    /**
+     * Returns the bounds to which predictions are biased.
+     */
+    getBounds() {
+        this._assertInitialized();
+        return this.autoComplete.getBounds();
+    }
+    /**
+     * Returns the fields to be included for the Place in the details response
+     * when the details are successfully retrieved. For a list of fields see
+     * [PlaceResult](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult).
+     */
+    getFields() {
+        this._assertInitialized();
+        return this.autoComplete.getFields();
+    }
+    /**
+     * Returns the details of the Place selected by user if the details were
+     * successfully retrieved. Otherwise returns a stub Place object, with the
+     * name property set to the current value of the input field.
+     */
+    getPlace() {
+        this._assertInitialized();
+        return this.autoComplete.getPlace();
+    }
+    /**
+     * Sets the preferred area within which to return Place results. Results are
+     * biased towards, but not restricted to, this area.
+     */
+    setBounds(bounds) {
+        this._assertInitialized();
+        // tslint:disable-next-line: no-non-null-assertion
+        return this.autoComplete.setBounds(bounds);
+    }
+    /**
+     * Sets the component restrictions. Component restrictions are used to
+     * restrict predictions to only those within the parent component. For
+     * example, the country.
+     */
+    setComponentRestrictions(restrictions) {
+        this._assertInitialized();
+        // tslint:disable-next-line: no-non-null-assertion
+        return this.autoComplete.setComponentRestrictions(restrictions);
+    }
+    /**
+     * Sets the fields to be included for the Place in the details response when
+     * the details are successfully retrieved. For a list of fields see
+     * [PlaceResult](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult).
+     */
+    setFields(fields) {
+        this._assertInitialized();
+        // tslint:disable-next-line: no-non-null-assertion
+        return this.autoComplete.setFields(fields);
+    }
+    /** */
+    setOptions(options) {
+        this._assertInitialized();
+        // tslint:disable-next-line: no-non-null-assertion
+        return this.autoComplete.setOptions(options);
+    }
+    /**
+     * Sets the types of predictions to be returned. For supported types, see the
+     * [developer's guide](https://developers.google.com/maps/documentation/javascript/places-autocomplete#constrain-place-types).
+     * If no types are specified, all types will be returned.
+     */
+    setTypes(types) {
+        this._assertInitialized();
+        // tslint:disable-next-line: no-non-null-assertion
+        return this.autoComplete.setTypes(types);
+    }
+    /** Focuses the input. */
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /** Unfocuses the input. */
+    blur() {
+        this._elementRef.nativeElement.blur();
+    }
+    getHostElement() {
+        return this._elementRef.nativeElement;
+    }
+    _createPlaceChangedObservable() {
+        const observable = new Observable(subscriber => {
+            if (!this.autoComplete) {
+                this._placeChangedPending.push({ observable, subscriber });
+                return undefined;
+            }
+            const listener = this.autoComplete.addListener('place_changed', (event) => {
+                this._ngZone.run(() => subscriber.next(event));
+            });
+            this._listeners.push(listener);
+            return () => listener.remove();
+        });
+        return observable;
+    }
+    /** Asserts that the map has been initialized. */
+    _assertInitialized() {
+        if (!this.autoComplete && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            throw Error('Cannot access Google Map Places information before the API has been initialized. ' +
+                'Please wait for the API to load before trying to interact with it.');
+        }
+    }
+}
+TheSeamGoogleMapsPlacesAutocompleteDirective.decorators = [
+    { type: Directive, args: [{
+                selector: 'input[seamGoogleMapsPlacesAutocomplete]',
+                exportAs: 'seamGoogleMapsPlacesAutocomplete'
+            },] }
+];
+TheSeamGoogleMapsPlacesAutocompleteDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: NgZone }
+];
+TheSeamGoogleMapsPlacesAutocompleteDirective.propDecorators = {
+    options: [{ type: Input }],
+    placeChanged: [{ type: Output }],
+    _attrType: [{ type: HostBinding, args: ['attr.type',] }]
+};
+
+/**
+ *
+ */
+class TheSeamGoogleMapsPlacesAutoCompleteComponent {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        this._ngUnsubscribe = new Subject();
+        this._autoCompleteReadySubject = new Subject();
+        this._placeChangedPending = [];
+        this.label = 'Search by address, place or name';
+        this.icon = faSearchLocation;
+        this.disabled = false;
+        this.placeholder = 'Enter address, place or name';
+        this.autocorrect = 'off';
+        this.autocapitalize = 'off';
+        this._tabIndex = -1;
+        this._options = SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS;
+        this.placeChanged = this._autoCompleteReadySubject.pipe(startWith(undefined), switchMap(() => this._createPlaceChangedObservable()));
+    }
+    /**
+     * Set the tab index to `-1` to allow the root element of the
+     * component to receive `focus` event from javascript, but not get focused by
+     * keyboard navigation.
+     */
+    set tabIndex(value) { this._tabIndex = coerceNumberProperty(value); }
+    get tabIndex() { return this._tabIndex; }
+    set options(value) {
+        this._options = value || SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS;
+    }
+    set __autocompleteDirective(value) {
+        this._autoCompleteDirective = value;
+        this._untilAutoCompleteReady().pipe(takeUntil(this._ngUnsubscribe)).subscribe(() => {
+            this.autoComplete = this._autoCompleteDirective.autoComplete;
+            this._placeChangedPending.forEach(pending => pending.observable.subscribe(pending.subscriber));
+            this._placeChangedPending = [];
+        });
+    }
+    get _attrTabIndex() { return this.disabled ? -1 : (this.tabIndex || 0); }
+    _onClick(event) {
+        this._inputDirective.focus();
+    }
+    _onFocus() {
+        var _a;
+        (_a = this._inputDirective) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    ngOnInit() { }
+    /** @ignore */
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    _untilAutoCompleteReady() {
+        return interval(500).pipe(filter(() => !!this._autoCompleteDirective.autoComplete), take(1), mapTo(undefined));
+    }
+    /**
+     * Returns the bounds to which predictions are biased.
+     */
+    getBounds() {
+        this._assertInitialized();
+        return this.autoComplete.getBounds();
+    }
+    /**
+     * Returns the fields to be included for the Place in the details response
+     * when the details are successfully retrieved. For a list of fields see
+     * [PlaceResult](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult).
+     */
+    getFields() {
+        this._assertInitialized();
+        return this.autoComplete.getFields();
+    }
+    /**
+     * Returns the details of the Place selected by user if the details were
+     * successfully retrieved. Otherwise returns a stub Place object, with the
+     * name property set to the current value of the input field.
+     */
+    getPlace() {
+        this._assertInitialized();
+        return this.autoComplete.getPlace();
+    }
+    /**
+     * Sets the preferred area within which to return Place results. Results are
+     * biased towards, but not restricted to, this area.
+     */
+    setBounds(bounds) {
+        this._assertInitialized();
+        // tslint:disable-next-line: no-non-null-assertion
+        return this.autoComplete.setBounds(bounds);
+    }
+    /**
+     * Sets the component restrictions. Component restrictions are used to
+     * restrict predictions to only those within the parent component. For
+     * example, the country.
+     */
+    setComponentRestrictions(restrictions) {
+        this._assertInitialized();
+        // tslint:disable-next-line: no-non-null-assertion
+        return this.autoComplete.setComponentRestrictions(restrictions);
+    }
+    /**
+     * Sets the fields to be included for the Place in the details response when
+     * the details are successfully retrieved. For a list of fields see
+     * [PlaceResult](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult).
+     */
+    setFields(fields) {
+        this._assertInitialized();
+        // tslint:disable-next-line: no-non-null-assertion
+        return this.autoComplete.setFields(fields);
+    }
+    /** */
+    setOptions(options) {
+        this._assertInitialized();
+        // tslint:disable-next-line: no-non-null-assertion
+        return this.autoComplete.setOptions(options);
+    }
+    /**
+     * Sets the types of predictions to be returned. For supported types, see the
+     * [developer's guide](https://developers.google.com/maps/documentation/javascript/places-autocomplete#constrain-place-types).
+     * If no types are specified, all types will be returned.
+     */
+    setTypes(types) {
+        this._assertInitialized();
+        // tslint:disable-next-line: no-non-null-assertion
+        return this.autoComplete.setTypes(types);
+    }
+    /** Focuses the input. */
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /** Unfocuses the input. */
+    blur() {
+        this._elementRef.nativeElement.blur();
+    }
+    getHostElement() {
+        return this._elementRef.nativeElement;
+    }
+    _createPlaceChangedObservable() {
+        const observable = new Observable(subscriber => {
+            if (!this.autoComplete) {
+                this._placeChangedPending.push({ observable, subscriber });
+                return undefined;
+            }
+            const sub = this._autoCompleteDirective.placeChanged.subscribe(subscriber);
+            return () => sub.unsubscribe();
+        });
+        return observable;
+    }
+    /** Asserts that the map has been initialized. */
+    _assertInitialized() {
+        if (!this.autoComplete && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            throw Error('Cannot access Google Map Places information before the API has been initialized. ' +
+                'Please wait for the API to load before trying to interact with it.');
+        }
+    }
+}
+TheSeamGoogleMapsPlacesAutoCompleteComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-google-maps-places-autocomplete',
+                template: "<div *ngIf=\"icon\" class=\"search-container--icon-wrapper\">\r\n  <seam-icon [icon]=\"icon\" class=\"text-muted\" size=\"lg\"></seam-icon>\r\n</div>\r\n<label *ngIf=\"label || placeholder\" [attr.for]=\"inp.id\" class=\"sr-only\">{{ label || placeholder }}</label>\r\n<input #inp=\"seamInput\"\r\n  seamInput\r\n  seamGoogleMapsPlacesAutocomplete\r\n  [disabled]=\"disabled\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  [attr.autocorrect]=\"autocorrect\"\r\n  [attr.autocapitalize]=\"autocapitalize\"\r\n  [options]=\"_options\"\r\n/>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                exportAs: 'seamGoogleMapsPlacesAutoComplete',
+                styles: [":host{position:relative;width:100%}:host>input{padding-left:40px}:host .search-container--icon-wrapper{position:absolute;top:6px;left:10px;bottom:0px}:host .search-container--icon-wrapper ::ng-deep .svg-inline--fa{vertical-align:middle}\n"]
+            },] }
+];
+TheSeamGoogleMapsPlacesAutoCompleteComponent.ctorParameters = () => [
+    { type: ElementRef }
+];
+TheSeamGoogleMapsPlacesAutoCompleteComponent.propDecorators = {
+    label: [{ type: Input }],
+    icon: [{ type: Input }],
+    disabled: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    autocorrect: [{ type: Input }],
+    autocapitalize: [{ type: Input }],
+    tabIndex: [{ type: Input }],
+    options: [{ type: Input }],
+    placeChanged: [{ type: Output }],
+    _inputDirective: [{ type: ViewChild, args: ['inp', { read: InputDirective, static: true },] }],
+    __autocompleteDirective: [{ type: ViewChild, args: [TheSeamGoogleMapsPlacesAutocompleteDirective, { static: true },] }],
+    _attrTabIndex: [{ type: HostBinding, args: ['attr.tabindex',] }],
+    _onClick: [{ type: HostListener, args: ['click', ['event'],] }],
+    _onFocus: [{ type: HostListener, args: ['focus', ['$event'],] }]
+};
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsPlacesAutoCompleteComponent.prototype, "disabled", void 0);
+
+class TheSeamMapsControlComponent {
+    constructor(_googleMaps, _googleMapsControls) {
+        this._googleMaps = _googleMaps;
+        this._googleMapsControls = _googleMapsControls;
+        this._ngUnsubscribe = new Subject();
+    }
+    set def(value) {
+        if (value !== this._def) {
+            this._remove();
+            this._def = value;
+        }
+    }
+    /** @ignore */
+    ngOnInit() {
+        this._googleMaps.mapReady$.pipe(tap(ready => {
+            if (ready) {
+                this._add();
+            }
+            else {
+                this._remove();
+            }
+        }), takeUntil(this._ngUnsubscribe)).subscribe();
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._remove();
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    _add() {
+        if (this._controlRef) {
+            return;
+        }
+        if (this._def === null || this._def === undefined) {
+            return;
+        }
+        this._controlRef = this._googleMapsControls.add(this._def);
+    }
+    _remove() {
+        var _a;
+        (_a = this._controlRef) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._controlRef = undefined;
+    }
+}
+TheSeamMapsControlComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-map-control',
+                template: '',
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+TheSeamMapsControlComponent.ctorParameters = () => [
+    { type: GoogleMapsService },
+    { type: GoogleMapsControlsService, decorators: [{ type: Inject, args: [MAP_CONTROLS_SERVICE,] }] }
+];
+TheSeamMapsControlComponent.propDecorators = {
+    def: [{ type: Input }]
+};
+
+/**
+ *
+ */
+class TheSeamMapFileDropComponent {
+    constructor(_elementRef, _ngZone, _googleMaps, _mapValueManager, _renderer) {
+        this._elementRef = _elementRef;
+        this._ngZone = _ngZone;
+        this._googleMaps = _googleMaps;
+        this._mapValueManager = _mapValueManager;
+        this._renderer = _renderer;
+        this._ngUnsubscribe = new Subject();
+        this._listeners = [];
+        this._globalDragInProgress = false;
+        this._handleDragOverEvent = (event) => {
+            if (!this._dropAllowed()) {
+                return;
+            }
+            if (!this._isSupportedDataTransferTypes(event.dataTransfer)) {
+                return;
+            }
+            event.preventDefault();
+            event.dataTransfer.dropEffect = 'copy';
+        };
+        this._handleDropEvent = (event) => {
+            if (!this._dropAllowed()) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this._renderer.setStyle(this._elementRef.nativeElement, 'display', 'none');
+            // TODO: Show error if multiple files?
+            if (!this._isSupportedDataTransfer(event.dataTransfer)) {
+                return;
+            }
+            const item = event.dataTransfer.items[0];
+            const file = item.getAsFile();
+            readGeoFile(file).then(json => {
+                this._mapValueManager.setValue(json, MapValueSource.Input);
+            });
+        };
+        this._handleDragEnterEvent = (event) => {
+            if (!this._dropAllowed()) {
+                return;
+            }
+            if (!this._isSupportedDataTransferTypes(event.dataTransfer)) {
+                return;
+            }
+            this._renderer.setStyle(this._elementRef.nativeElement, 'display', 'block');
+        };
+        this._handleDragLeaveEvent = (event) => {
+            if (!this._dropAllowed()) {
+                return;
+            }
+            this._renderer.setStyle(this._elementRef.nativeElement, 'display', 'none');
+        };
+    }
+    /** @ignore */
+    ngOnInit() {
+        this._googleMaps.mapReady$.pipe(tap(ready => {
+            if (ready) {
+                this._enableFileDrop();
+            }
+            else {
+                this._disableFileDrop();
+            }
+        }), takeUntil(this._ngUnsubscribe)).subscribe();
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._disableFileDrop();
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    _enableFileDrop() {
+        const divElement = this._googleMaps.getDiv();
+        if (this._mapDiv === divElement) {
+            return;
+        }
+        if (this._mapDiv !== undefined) {
+            // Disable file drop on previous map div.
+            this._disableFileDrop();
+        }
+        this._mapDiv = divElement;
+        this._ngZone.runOutsideAngular(() => {
+            this._listeners.push(this._renderer.listen('document', 'dragstart', (event) => {
+                this._globalDragInProgress = true;
+            }));
+            this._listeners.push(this._renderer.listen('document', 'dragend', (event) => {
+                this._globalDragInProgress = false;
+            }));
+            this._listeners.push(this._renderer.listen(divElement, 'dragover', this._handleDragOverEvent));
+            this._listeners.push(this._renderer.listen(this._elementRef.nativeElement, 'dragover', this._handleDragOverEvent));
+            this._listeners.push(this._renderer.listen(this._elementRef.nativeElement, 'drop', this._handleDropEvent));
+            this._listeners.push(this._renderer.listen(divElement, 'dragenter', this._handleDragEnterEvent));
+            this._listeners.push(this._renderer.listen(this._elementRef.nativeElement, 'dragleave', this._handleDragLeaveEvent));
+        });
+    }
+    _disableFileDrop() {
+        if (this._listeners.length > 0) {
+            this._listeners.forEach(l => l());
+            this._listeners = [];
+        }
+    }
+    _dropAllowed() {
+        return !this._globalDragInProgress;
+    }
+    _isSupportedDataTransfer(dataTransfer) {
+        return dataTransfer.files.length === 1 && dataTransfer.types[0] === 'Files';
+    }
+    _isSupportedDataTransferTypes(dataTransfer) {
+        return dataTransfer.types[0] === 'Files';
+    }
+}
+TheSeamMapFileDropComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'seam-map-file-drop',
+                template: "",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:9999!important;background-color:#1e1e1eb3}\n"]
+            },] }
+];
+TheSeamMapFileDropComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: NgZone },
+    { type: GoogleMapsService },
+    { type: MapValueManagerService },
+    { type: Renderer2 }
+];
+
+class TheSeamGoogleMapsModule {
+}
+TheSeamGoogleMapsModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    TheSeamGoogleMapsComponent,
+                    TheSeamMapFileDropComponent,
+                    TheSeamGoogleMapsUploadButtonControlComponent,
+                    TheSeamGoogleMapsRecenterButtonControlComponent,
+                    TheSeamMapsControlComponent,
+                    TheSeamGoogleMapsPlacesAutocompleteDirective,
+                    TheSeamGoogleMapsPlacesAutoCompleteComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    ObserversModule,
+                    TheSeamSharedModule,
+                    TheSeamMenuModule,
+                    TheSeamIconModule,
+                    TheSeamFormFieldModule,
+                    AgmCoreModule,
+                ],
+                exports: [
+                    TheSeamGoogleMapsComponent,
+                    TheSeamGoogleMapsPlacesAutocompleteDirective,
+                    TheSeamGoogleMapsPlacesAutoCompleteComponent
+                ]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppFeaturePropertyName, GoogleMapsContextMenu, GoogleMapsControlsService, GoogleMapsService, MapControlRef, MapValueManagerService, MapValueSource, SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS, TheSeamGoogleMapsComponent, TheSeamGoogleMapsModule, TheSeamGoogleMapsPlacesAutoCompleteComponent, TheSeamGoogleMapsPlacesAutocompleteDirective, TheSeamGoogleMapsRecenterButtonControlComponent, TheSeamGoogleMapsUploadButtonControlComponent, TheSeamMapFileDropComponent, TheSeamMapsControlComponent, addInnerFeatureCutoutToExteriorFeature, createDataFeatureFromPolygon, createFeatureChangeObservable, featureContains, fixPathDifferentStartingAndEndingPoint, getBoundsWithAllFeatures, getFeatureBounds, getFeatureCenter, getFeaturesCount, getPossibleExteriorFeature, isAppFeatureProperty, isFeatureSelected, multiPolygonCoordinates, polygonCoordinates, removeAllFeatures, setFeatureSelected, stripAppFeaturePropertiesFromJson, toTurfJsFeature, toTurfJsMultiPolygon, toTurfJsPolygon, ɵ0, MAP_CONTROLS_SERVICE as ɵb, MAP_CONTROL_DATA as ɵc };
+//# sourceMappingURL=theseam-ui-common-google-maps.js.map