@foodmarketmaker/mapag 0.0.26 → 0.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,16 +5,18 @@ import * as i1 from '@angular/common';
|
|
|
5
5
|
import { CommonModule } from '@angular/common';
|
|
6
6
|
import * as i1$1 from '@angular/forms';
|
|
7
7
|
import { FormsModule } from '@angular/forms';
|
|
8
|
-
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
|
9
|
-
import { faMousePointer, faExpandArrows, faDrawSquare, faDrawPolygon, faList, faBookmark, faTrashAlt, faTimes } from '@fortawesome/pro-light-svg-icons';
|
|
10
8
|
import { takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
|
|
9
|
+
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
|
10
|
+
import { faMousePointer, faList, faTrashAlt, faPrint, faGear, faEye, faEyeSlash, faFill, faPaintBrush, faImage, faChevronRight, faCircle, faFont, faFire, faThLarge } from '@fortawesome/free-solid-svg-icons';
|
|
11
|
+
import { DrawPolygon } from 'mapag/ui/icons/draw-polygon';
|
|
12
|
+
import { DrawSquare } from 'mapag/ui/icons/draw-square';
|
|
13
|
+
import { ExpandArrows } from 'mapag/ui/icons/expand-arrows';
|
|
11
14
|
import booleanContains from '@turf/boolean-contains';
|
|
12
15
|
import booleanOverlap from '@turf/boolean-overlap';
|
|
13
16
|
import { polygon, feature } from '@turf/helpers';
|
|
14
17
|
import { Subject, map, firstValueFrom } from 'rxjs';
|
|
15
18
|
import MapboxDraw from 'maplibre-gl-draw';
|
|
16
19
|
import RectangleMode from 'mapbox-gl-draw-rectangle-mode';
|
|
17
|
-
import { faPrint, faGear, faEye, faEyeSlash, faFill, faPaintBrush, faImage, faChevronRight, faCircle, faFont, faFire, faThLarge, faList as faList$1 } from '@fortawesome/free-solid-svg-icons';
|
|
18
20
|
import { saveAs } from 'file-saver';
|
|
19
21
|
import 'mapbox-gl-infobox/styles.css';
|
|
20
22
|
import maplibregl, { Popup } from 'maplibre-gl';
|
|
@@ -14047,6 +14049,10 @@ class HighlightMapper {
|
|
|
14047
14049
|
}
|
|
14048
14050
|
|
|
14049
14051
|
class MapAreaSelectComponent {
|
|
14052
|
+
// Icons
|
|
14053
|
+
faMousePointer = faMousePointer;
|
|
14054
|
+
faList = faList;
|
|
14055
|
+
faTrashAlt = faTrashAlt;
|
|
14050
14056
|
mapRef = input.required(...(ngDevMode ? [{ debugName: "mapRef" }] : []));
|
|
14051
14057
|
mapperGroup = input(new MapboxMapperGroup(), ...(ngDevMode ? [{ debugName: "mapperGroup" }] : []));
|
|
14052
14058
|
belowLayer = input(StandardLayersMapper.POLYGONS_BACKGROUND, ...(ngDevMode ? [{ debugName: "belowLayer" }] : []));
|
|
@@ -14066,15 +14072,6 @@ class MapAreaSelectComponent {
|
|
|
14066
14072
|
areaSelection = [];
|
|
14067
14073
|
// Temporary vairable that tracks the new track ID being added by the user
|
|
14068
14074
|
newTract = '';
|
|
14069
|
-
// FontAwesome icons
|
|
14070
|
-
faMousePointer = faMousePointer;
|
|
14071
|
-
faExpandArrows = faExpandArrows;
|
|
14072
|
-
faDrawSquare = faDrawSquare;
|
|
14073
|
-
faDrawPolygon = faDrawPolygon;
|
|
14074
|
-
faList = faList;
|
|
14075
|
-
faBookmark = faBookmark;
|
|
14076
|
-
faTrashAlt = faTrashAlt;
|
|
14077
|
-
faTimes = faTimes;
|
|
14078
14075
|
areaTypeSrc;
|
|
14079
14076
|
ids = new Set();
|
|
14080
14077
|
mapper;
|
|
@@ -14098,9 +14095,7 @@ class MapAreaSelectComponent {
|
|
|
14098
14095
|
}
|
|
14099
14096
|
}, ...(ngDevMode ? [{ debugName: "_e1" }] : []));
|
|
14100
14097
|
constructor() {
|
|
14101
|
-
this.selectionSvc.selection
|
|
14102
|
-
.pipe(takeUntilDestroyed())
|
|
14103
|
-
.subscribe((ids) => {
|
|
14098
|
+
this.selectionSvc.selection$.pipe(takeUntilDestroyed()).subscribe((ids) => {
|
|
14104
14099
|
this.ids = ids;
|
|
14105
14100
|
this.highlightMapper?.updateSelection(Array.from(ids));
|
|
14106
14101
|
});
|
|
@@ -14183,11 +14178,151 @@ class MapAreaSelectComponent {
|
|
|
14183
14178
|
this.mode = undefined;
|
|
14184
14179
|
}
|
|
14185
14180
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MapAreaSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14186
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: MapAreaSelectComponent, isStandalone: true, selector: "mapag-area-select", inputs: { mapRef: { classPropertyName: "mapRef", publicName: "mapRef", isSignal: true, isRequired: true, transformFunction: null }, mapperGroup: { classPropertyName: "mapperGroup", publicName: "mapperGroup", isSignal: true, isRequired: false, transformFunction: null }, belowLayer: { classPropertyName: "belowLayer", publicName: "belowLayer", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, areaTypes: { classPropertyName: "areaTypes", publicName: "areaTypes", isSignal: true, isRequired: false, transformFunction: null }, areaType: { classPropertyName: "areaType", publicName: "areaType", isSignal: false, isRequired: false, transformFunction: null }, areaSelection: { classPropertyName: "areaSelection", publicName: "areaSelection", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, ngImport: i0, template:
|
|
14181
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: MapAreaSelectComponent, isStandalone: true, selector: "mapag-area-select", inputs: { mapRef: { classPropertyName: "mapRef", publicName: "mapRef", isSignal: true, isRequired: true, transformFunction: null }, mapperGroup: { classPropertyName: "mapperGroup", publicName: "mapperGroup", isSignal: true, isRequired: false, transformFunction: null }, belowLayer: { classPropertyName: "belowLayer", publicName: "belowLayer", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, areaTypes: { classPropertyName: "areaTypes", publicName: "areaTypes", isSignal: true, isRequired: false, transformFunction: null }, areaType: { classPropertyName: "areaType", publicName: "areaType", isSignal: false, isRequired: false, transformFunction: null }, areaSelection: { classPropertyName: "areaSelection", publicName: "areaSelection", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: `
|
|
14182
|
+
<h3>Geographic Area Type</h3>
|
|
14183
|
+
<select class="ng-select-sm" [(ngModel)]="areaType" (ngModelChange)="updateAreaType()">
|
|
14184
|
+
@if (areaTypes().includes('none')) {
|
|
14185
|
+
<option value="none">None</option>
|
|
14186
|
+
} @if (areaTypes().includes('state')) {
|
|
14187
|
+
<option value="state">States</option>
|
|
14188
|
+
} @if (areaTypes().includes('county')) {
|
|
14189
|
+
<option value="county">Counties</option>
|
|
14190
|
+
} @if (areaTypes().includes('zipcode')) {
|
|
14191
|
+
<option value="zipcode">Zipcode</option>
|
|
14192
|
+
} @if (areaTypes().includes('tract')) {
|
|
14193
|
+
<option value="tract">Census Tracts</option>
|
|
14194
|
+
}
|
|
14195
|
+
</select>
|
|
14196
|
+
|
|
14197
|
+
@if (areaType != 'none') {
|
|
14198
|
+
<h3>Choose Geographic Area</h3>
|
|
14199
|
+
<div class="tools">
|
|
14200
|
+
<button class="btn-icon" title="Select area" [class.active]="mode == 'select'" (click)="changeMode('select')">
|
|
14201
|
+
<fa-icon [icon]="faMousePointer"></fa-icon>
|
|
14202
|
+
</button>
|
|
14203
|
+
<button class="btn-icon" title="Select everthing in the map window" (click)="changeMode('bounds')">
|
|
14204
|
+
<expand-arrows></expand-arrows>
|
|
14205
|
+
</button>
|
|
14206
|
+
<button
|
|
14207
|
+
class="btn-icon"
|
|
14208
|
+
title="Select with a rectangle"
|
|
14209
|
+
[class.active]="mode == 'rect'"
|
|
14210
|
+
(click)="changeMode('rect')"
|
|
14211
|
+
>
|
|
14212
|
+
<draw-square></draw-square>
|
|
14213
|
+
</button>
|
|
14214
|
+
<button
|
|
14215
|
+
class="btn-icon"
|
|
14216
|
+
title="Select using a polygon"
|
|
14217
|
+
[class.active]="mode == 'poly'"
|
|
14218
|
+
(click)="changeMode('poly')"
|
|
14219
|
+
>
|
|
14220
|
+
<draw-polygon></draw-polygon>
|
|
14221
|
+
</button>
|
|
14222
|
+
<button class="btn-icon" title="Clear the selection" (click)="changeMode('trash')">
|
|
14223
|
+
<fa-icon [icon]="faTrashAlt"></fa-icon>
|
|
14224
|
+
</button>
|
|
14225
|
+
{{ mode }}, {{ svcMode() }}
|
|
14226
|
+
</div>
|
|
14227
|
+
}
|
|
14228
|
+
@switch (mode) {
|
|
14229
|
+
@case ('select') {
|
|
14230
|
+
<h3>Select area on map</h3>
|
|
14231
|
+
<div class="help-text">Click on the map areas of interest. Selected areas will be highlighted.</div>
|
|
14232
|
+
}
|
|
14233
|
+
@case ('bounds') {
|
|
14234
|
+
<h3>Select all areas shown on map</h3>
|
|
14235
|
+
<div class="help-text">All areas on the map have been selected.</div>
|
|
14236
|
+
}
|
|
14237
|
+
@case ('rect') {
|
|
14238
|
+
<h3>Select in rectangle</h3>
|
|
14239
|
+
<div class="help-text">
|
|
14240
|
+
Click once to start the rectangle. Then move the mouse and click one more time to complete it.
|
|
14241
|
+
</div>
|
|
14242
|
+
}
|
|
14243
|
+
@case ('poly') {
|
|
14244
|
+
<h3>Select in polygon</h3>
|
|
14245
|
+
<div class="help-text">
|
|
14246
|
+
Draw one or more polygons on the map. Double click or press "Enter" to end the current polygon. Everything in that
|
|
14247
|
+
polygon will be added. Hold down the "Shift" key to pan the map. Press "Esc" to cancel.
|
|
14248
|
+
</div>
|
|
14249
|
+
}
|
|
14250
|
+
}
|
|
14251
|
+
`, isInline: true, styles: ["h3{margin-top:.75em;font-size:13pt;color:var(--mm-secondary)}.active{background-color:var(--mapag-accent, #e5541c);color:var(--mapag-accent-clr, #ffffff)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DrawPolygon, selector: "draw-polygon" }, { kind: "component", type: DrawSquare, selector: "draw-square" }, { kind: "component", type: ExpandArrows, selector: "expand-arrows" }] });
|
|
14187
14252
|
}
|
|
14188
14253
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MapAreaSelectComponent, decorators: [{
|
|
14189
14254
|
type: Component,
|
|
14190
|
-
args: [{ selector: 'mapag-area-select', imports: [FormsModule, FaIconComponent, CommonModule
|
|
14255
|
+
args: [{ selector: 'mapag-area-select', imports: [FormsModule, FaIconComponent, CommonModule, DrawPolygon, DrawSquare, ExpandArrows], template: `
|
|
14256
|
+
<h3>Geographic Area Type</h3>
|
|
14257
|
+
<select class="ng-select-sm" [(ngModel)]="areaType" (ngModelChange)="updateAreaType()">
|
|
14258
|
+
@if (areaTypes().includes('none')) {
|
|
14259
|
+
<option value="none">None</option>
|
|
14260
|
+
} @if (areaTypes().includes('state')) {
|
|
14261
|
+
<option value="state">States</option>
|
|
14262
|
+
} @if (areaTypes().includes('county')) {
|
|
14263
|
+
<option value="county">Counties</option>
|
|
14264
|
+
} @if (areaTypes().includes('zipcode')) {
|
|
14265
|
+
<option value="zipcode">Zipcode</option>
|
|
14266
|
+
} @if (areaTypes().includes('tract')) {
|
|
14267
|
+
<option value="tract">Census Tracts</option>
|
|
14268
|
+
}
|
|
14269
|
+
</select>
|
|
14270
|
+
|
|
14271
|
+
@if (areaType != 'none') {
|
|
14272
|
+
<h3>Choose Geographic Area</h3>
|
|
14273
|
+
<div class="tools">
|
|
14274
|
+
<button class="btn-icon" title="Select area" [class.active]="mode == 'select'" (click)="changeMode('select')">
|
|
14275
|
+
<fa-icon [icon]="faMousePointer"></fa-icon>
|
|
14276
|
+
</button>
|
|
14277
|
+
<button class="btn-icon" title="Select everthing in the map window" (click)="changeMode('bounds')">
|
|
14278
|
+
<expand-arrows></expand-arrows>
|
|
14279
|
+
</button>
|
|
14280
|
+
<button
|
|
14281
|
+
class="btn-icon"
|
|
14282
|
+
title="Select with a rectangle"
|
|
14283
|
+
[class.active]="mode == 'rect'"
|
|
14284
|
+
(click)="changeMode('rect')"
|
|
14285
|
+
>
|
|
14286
|
+
<draw-square></draw-square>
|
|
14287
|
+
</button>
|
|
14288
|
+
<button
|
|
14289
|
+
class="btn-icon"
|
|
14290
|
+
title="Select using a polygon"
|
|
14291
|
+
[class.active]="mode == 'poly'"
|
|
14292
|
+
(click)="changeMode('poly')"
|
|
14293
|
+
>
|
|
14294
|
+
<draw-polygon></draw-polygon>
|
|
14295
|
+
</button>
|
|
14296
|
+
<button class="btn-icon" title="Clear the selection" (click)="changeMode('trash')">
|
|
14297
|
+
<fa-icon [icon]="faTrashAlt"></fa-icon>
|
|
14298
|
+
</button>
|
|
14299
|
+
{{ mode }}, {{ svcMode() }}
|
|
14300
|
+
</div>
|
|
14301
|
+
}
|
|
14302
|
+
@switch (mode) {
|
|
14303
|
+
@case ('select') {
|
|
14304
|
+
<h3>Select area on map</h3>
|
|
14305
|
+
<div class="help-text">Click on the map areas of interest. Selected areas will be highlighted.</div>
|
|
14306
|
+
}
|
|
14307
|
+
@case ('bounds') {
|
|
14308
|
+
<h3>Select all areas shown on map</h3>
|
|
14309
|
+
<div class="help-text">All areas on the map have been selected.</div>
|
|
14310
|
+
}
|
|
14311
|
+
@case ('rect') {
|
|
14312
|
+
<h3>Select in rectangle</h3>
|
|
14313
|
+
<div class="help-text">
|
|
14314
|
+
Click once to start the rectangle. Then move the mouse and click one more time to complete it.
|
|
14315
|
+
</div>
|
|
14316
|
+
}
|
|
14317
|
+
@case ('poly') {
|
|
14318
|
+
<h3>Select in polygon</h3>
|
|
14319
|
+
<div class="help-text">
|
|
14320
|
+
Draw one or more polygons on the map. Double click or press "Enter" to end the current polygon. Everything in that
|
|
14321
|
+
polygon will be added. Hold down the "Shift" key to pan the map. Press "Esc" to cancel.
|
|
14322
|
+
</div>
|
|
14323
|
+
}
|
|
14324
|
+
}
|
|
14325
|
+
`, styles: ["h3{margin-top:.75em;font-size:13pt;color:var(--mm-secondary)}.active{background-color:var(--mapag-accent, #e5541c);color:var(--mapag-accent-clr, #ffffff)}\n"] }]
|
|
14191
14326
|
}], ctorParameters: () => [], propDecorators: { mapRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapRef", required: true }] }], mapperGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapperGroup", required: false }] }], belowLayer: [{ type: i0.Input, args: [{ isSignal: true, alias: "belowLayer", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], selection: [{
|
|
14192
14327
|
type: Input
|
|
14193
14328
|
}], areaTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaTypes", required: false }] }], areaType: [{
|
|
@@ -24292,7 +24427,7 @@ class MapagDetails {
|
|
|
24292
24427
|
<ng-content></ng-content>
|
|
24293
24428
|
</div>
|
|
24294
24429
|
</div>
|
|
24295
|
-
`, isInline: true, styles: [".mapag-details{display:block}.summary{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;font-size:1em;font-weight:600;color:#000;padding:4px 0;border-bottom:2px solid gray;margin-bottom:8px}.
|
|
24430
|
+
`, isInline: true, styles: [".mapag-details{display:block}.summary{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;font-size:1em;font-weight:600;color:#000;padding:4px 0;border-bottom:2px solid gray;margin-bottom:8px}.marker{display:inline-block;transition:transform .15s ease-out}.marker.open{transform:rotate(90deg);transform-origin:center}.content{max-height:0;overflow:hidden;transition:max-height .15s ease-out}.content.open{max-height:100vh;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
|
|
24296
24431
|
}
|
|
24297
24432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MapagDetails, decorators: [{
|
|
24298
24433
|
type: Component,
|
|
@@ -24306,7 +24441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
24306
24441
|
<ng-content></ng-content>
|
|
24307
24442
|
</div>
|
|
24308
24443
|
</div>
|
|
24309
|
-
`, styles: [".mapag-details{display:block}.summary{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;font-size:1em;font-weight:600;color:#000;padding:4px 0;border-bottom:2px solid gray;margin-bottom:8px}.
|
|
24444
|
+
`, styles: [".mapag-details{display:block}.summary{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;font-size:1em;font-weight:600;color:#000;padding:4px 0;border-bottom:2px solid gray;margin-bottom:8px}.marker{display:inline-block;transition:transform .15s ease-out}.marker.open{transform:rotate(90deg);transform-origin:center}.content{max-height:0;overflow:hidden;transition:max-height .15s ease-out}.content.open{max-height:100vh;overflow:visible}\n"] }]
|
|
24310
24445
|
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }] } });
|
|
24311
24446
|
|
|
24312
24447
|
var states = [
|
|
@@ -25120,7 +25255,7 @@ class NaicsMgrPanel {
|
|
|
25120
25255
|
faCircle = faCircle;
|
|
25121
25256
|
faFire = faFire;
|
|
25122
25257
|
faThLarge = faThLarge;
|
|
25123
|
-
faList = faList
|
|
25258
|
+
faList = faList;
|
|
25124
25259
|
tiles = signal(false, ...(ngDevMode ? [{ debugName: "tiles" }] : []));
|
|
25125
25260
|
canAdd = input(true, ...(ngDevMode ? [{ debugName: "canAdd" }] : []));
|
|
25126
25261
|
// Map Component
|
|
@@ -26483,7 +26618,7 @@ class NassMgrPanel {
|
|
|
26483
26618
|
faCircle = faCircle;
|
|
26484
26619
|
faFire = faFire;
|
|
26485
26620
|
faThLarge = faThLarge;
|
|
26486
|
-
faList = faList
|
|
26621
|
+
faList = faList;
|
|
26487
26622
|
filter = signal({}, ...(ngDevMode ? [{ debugName: "filter" }] : []));
|
|
26488
26623
|
nassSvc = inject(NassService);
|
|
26489
26624
|
canAdd = input(true, ...(ngDevMode ? [{ debugName: "canAdd" }] : []));
|