@angular-helpers/openlayers 0.4.0 → 0.5.0
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.
- package/README.md +14 -6
- package/fesm2022/angular-helpers-openlayers-controls.mjs +289 -36
- package/fesm2022/angular-helpers-openlayers-core.mjs +197 -16
- package/fesm2022/angular-helpers-openlayers-interactions.mjs +414 -23
- package/fesm2022/angular-helpers-openlayers-layers.mjs +634 -83
- package/fesm2022/angular-helpers-openlayers-military.mjs +244 -144
- package/fesm2022/angular-helpers-openlayers-overlays.mjs +9 -9
- package/package.json +2 -2
- package/types/angular-helpers-openlayers-controls.d.ts +24 -4
- package/types/angular-helpers-openlayers-core.d.ts +126 -4
- package/types/angular-helpers-openlayers-interactions.d.ts +120 -23
- package/types/angular-helpers-openlayers-layers.d.ts +152 -7
- package/types/angular-helpers-openlayers-military.d.ts +84 -94
package/README.md
CHANGED
|
@@ -10,12 +10,14 @@ A modern Angular wrapper for OpenLayers with modular architecture, standalone co
|
|
|
10
10
|
- **Dual API** - Template for UI, Inputs for data, Services for operations
|
|
11
11
|
- **Tree-shaking** - Unused OpenLayers code is eliminated from your bundle
|
|
12
12
|
- **TypeScript First** - Full type safety with strict mode support
|
|
13
|
-
- **Military Features** -
|
|
13
|
+
- **Military Features** - True geodesic precision for ellipses and sectors, NATO symbology, and MGRS coordinates
|
|
14
|
+
- **Proj4 Integration** - Declarative registration of local coordinate systems (like UTM)
|
|
15
|
+
- **WebGL Accelerated** - Mapbox Vector Tiles (MVT) and GPU raster expressions
|
|
14
16
|
|
|
15
17
|
## Installation
|
|
16
18
|
|
|
17
19
|
```bash
|
|
18
|
-
|
|
20
|
+
pnpm add @angular-helpers/openlayers ol
|
|
19
21
|
```
|
|
20
22
|
|
|
21
23
|
## Quick Start
|
|
@@ -30,7 +32,14 @@ import { withLayers } from '@angular-helpers/openlayers/layers';
|
|
|
30
32
|
import { withControls } from '@angular-helpers/openlayers/controls';
|
|
31
33
|
|
|
32
34
|
export const appConfig: ApplicationConfig = {
|
|
33
|
-
providers: [
|
|
35
|
+
providers: [
|
|
36
|
+
provideOpenLayers(
|
|
37
|
+
withLayers(),
|
|
38
|
+
withControls(),
|
|
39
|
+
// Optional: Register custom coordinate systems with proj4
|
|
40
|
+
// withProjections(proj4, [{ code: 'EPSG:32630', proj4def: '...', extent: [...] }])
|
|
41
|
+
),
|
|
42
|
+
],
|
|
34
43
|
};
|
|
35
44
|
```
|
|
36
45
|
|
|
@@ -49,7 +58,6 @@ import { OlMapService } from '@angular-helpers/openlayers/core';
|
|
|
49
58
|
|
|
50
59
|
@Component({
|
|
51
60
|
selector: 'app-map',
|
|
52
|
-
standalone: true,
|
|
53
61
|
imports: [
|
|
54
62
|
OlMapComponent,
|
|
55
63
|
OlTileLayerComponent,
|
|
@@ -237,14 +245,14 @@ export class MilDemo {
|
|
|
237
245
|
| `createSector(config)` | `Feature<Polygon>` | Pie-slice (apex-arc-apex). `startAngle < endAngle ≤ start + 2π` |
|
|
238
246
|
| `createDonut(config)` | `Feature<Polygon>` | Two rings: outer CCW, inner CW (right-hand rule). Renders as an annular band with the basemap visible through the hole |
|
|
239
247
|
|
|
240
|
-
Coordinates are emitted in `EPSG:4326` (lon/lat) using
|
|
248
|
+
Coordinates are emitted in `EPSG:4326` (lon/lat) using true geodesic calculations (`Vincenty`'s formulae via `ol/sphere`). This means your shapes remain mathematically accurate and visually consistent (without scale distortion) across massive global distances, fulfilling military precision requirements.
|
|
241
249
|
|
|
242
250
|
### MIL-STD-2525 symbols
|
|
243
251
|
|
|
244
252
|
`createMilSymbol` lazy-loads `milsymbol` on first use and returns a `Feature<Point>` with style metadata (`feature.style.icon`) so the vector layer renders it as an `ol/style/Icon`. The library is declared as an **optional peer dependency** — install it only if you use this helper:
|
|
245
253
|
|
|
246
254
|
```bash
|
|
247
|
-
|
|
255
|
+
pnpm add milsymbol
|
|
248
256
|
```
|
|
249
257
|
|
|
250
258
|
```ts
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, input, DestroyRef, afterNextRender, ChangeDetectionStrategy, Component, InjectionToken, output, signal, Injectable } from '@angular/core';
|
|
2
|
+
import { inject, input, DestroyRef, afterNextRender, ChangeDetectionStrategy, Component, InjectionToken, output, signal, ViewChild, Injectable } from '@angular/core';
|
|
3
3
|
import { OlMapService, OlZoneHelper } from '@angular-helpers/openlayers/core';
|
|
4
4
|
import Zoom from 'ol/control/Zoom';
|
|
5
5
|
import Attribution from 'ol/control/Attribution';
|
|
6
6
|
import ScaleLine from 'ol/control/ScaleLine';
|
|
7
7
|
import FullScreen from 'ol/control/FullScreen';
|
|
8
8
|
import Rotate from 'ol/control/Rotate';
|
|
9
|
+
import * as i1 from '@angular/common';
|
|
9
10
|
import { CommonModule } from '@angular/common';
|
|
11
|
+
import Control from 'ol/control/Control';
|
|
12
|
+
import Geolocation from 'ol/Geolocation';
|
|
13
|
+
import Feature from 'ol/Feature';
|
|
14
|
+
import Point from 'ol/geom/Point';
|
|
15
|
+
import { Vector as Vector$1 } from 'ol/layer';
|
|
16
|
+
import { Vector } from 'ol/source';
|
|
17
|
+
import { Style, Circle, Stroke, Fill } from 'ol/style';
|
|
10
18
|
|
|
11
19
|
// OlZoomControlComponent
|
|
12
20
|
class OlZoomControlComponent {
|
|
@@ -38,10 +46,10 @@ class OlZoomControlComponent {
|
|
|
38
46
|
});
|
|
39
47
|
});
|
|
40
48
|
}
|
|
41
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
42
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
49
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlZoomControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
50
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlZoomControlComponent, isStandalone: true, selector: "ol-zoom-control", inputs: { delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
43
51
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
52
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlZoomControlComponent, decorators: [{
|
|
45
53
|
type: Component,
|
|
46
54
|
args: [{
|
|
47
55
|
selector: 'ol-zoom-control',
|
|
@@ -83,10 +91,10 @@ class OlAttributionControlComponent {
|
|
|
83
91
|
});
|
|
84
92
|
});
|
|
85
93
|
}
|
|
86
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
87
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
94
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlAttributionControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
95
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlAttributionControlComponent, isStandalone: true, selector: "ol-attribution-control", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
88
96
|
}
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
97
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlAttributionControlComponent, decorators: [{
|
|
90
98
|
type: Component,
|
|
91
99
|
args: [{
|
|
92
100
|
selector: 'ol-attribution-control',
|
|
@@ -130,10 +138,10 @@ class OlScaleLineControlComponent {
|
|
|
130
138
|
});
|
|
131
139
|
});
|
|
132
140
|
}
|
|
133
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
134
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
141
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlScaleLineControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlScaleLineControlComponent, isStandalone: true, selector: "ol-scale-line-control", inputs: { units: { classPropertyName: "units", publicName: "units", isSignal: true, isRequired: false, transformFunction: null }, bar: { classPropertyName: "bar", publicName: "bar", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
135
143
|
}
|
|
136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlScaleLineControlComponent, decorators: [{
|
|
137
145
|
type: Component,
|
|
138
146
|
args: [{
|
|
139
147
|
selector: 'ol-scale-line-control',
|
|
@@ -179,10 +187,10 @@ class OlFullscreenControlComponent {
|
|
|
179
187
|
});
|
|
180
188
|
});
|
|
181
189
|
}
|
|
182
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
183
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
190
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlFullscreenControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
191
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlFullscreenControlComponent, isStandalone: true, selector: "ol-fullscreen-control", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelActive: { classPropertyName: "labelActive", publicName: "labelActive", isSignal: true, isRequired: false, transformFunction: null }, tipLabel: { classPropertyName: "tipLabel", publicName: "tipLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
184
192
|
}
|
|
185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlFullscreenControlComponent, decorators: [{
|
|
186
194
|
type: Component,
|
|
187
195
|
args: [{
|
|
188
196
|
selector: 'ol-fullscreen-control',
|
|
@@ -236,10 +244,10 @@ class OlRotateControlComponent {
|
|
|
236
244
|
});
|
|
237
245
|
});
|
|
238
246
|
}
|
|
239
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
240
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
247
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlRotateControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
248
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlRotateControlComponent, isStandalone: true, selector: "ol-rotate-control", inputs: { autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, tipLabel: { classPropertyName: "tipLabel", publicName: "tipLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
241
249
|
}
|
|
242
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlRotateControlComponent, decorators: [{
|
|
243
251
|
type: Component,
|
|
244
252
|
args: [{
|
|
245
253
|
selector: 'ol-rotate-control',
|
|
@@ -270,10 +278,13 @@ class OlLayerSwitcherComponent {
|
|
|
270
278
|
layers = input([], ...(ngDevMode ? [{ debugName: "layers" }] : /* istanbul ignore next */ []));
|
|
271
279
|
collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
|
|
272
280
|
showOpacity = input(false, ...(ngDevMode ? [{ debugName: "showOpacity" }] : /* istanbul ignore next */ []));
|
|
273
|
-
startCollapsed = input(
|
|
281
|
+
startCollapsed = input(true, ...(ngDevMode ? [{ debugName: "startCollapsed" }] : /* istanbul ignore next */ []));
|
|
274
282
|
visibilityChange = output();
|
|
275
283
|
opacityChange = output();
|
|
276
|
-
isCollapsed = signal(
|
|
284
|
+
isCollapsed = signal(true, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
|
|
285
|
+
ngOnInit() {
|
|
286
|
+
this.isCollapsed.set(this.startCollapsed());
|
|
287
|
+
}
|
|
277
288
|
toggleCollapsed() {
|
|
278
289
|
if (this.collapsible()) {
|
|
279
290
|
this.isCollapsed.update((v) => !v);
|
|
@@ -289,8 +300,8 @@ class OlLayerSwitcherComponent {
|
|
|
289
300
|
const value = event.target.valueAsNumber;
|
|
290
301
|
this.opacityChange.emit({ id, opacity: value });
|
|
291
302
|
}
|
|
292
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
293
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
303
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlLayerSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
304
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: OlLayerSwitcherComponent, isStandalone: true, selector: "ol-layer-switcher", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, layers: { classPropertyName: "layers", publicName: "layers", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, showOpacity: { classPropertyName: "showOpacity", publicName: "showOpacity", isSignal: true, isRequired: false, transformFunction: null }, startCollapsed: { classPropertyName: "startCollapsed", publicName: "startCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibilityChange: "visibilityChange", opacityChange: "opacityChange" }, ngImport: i0, template: `
|
|
294
305
|
<div
|
|
295
306
|
class="ol-layer-switcher"
|
|
296
307
|
[class.collapsed]="isCollapsed()"
|
|
@@ -306,7 +317,22 @@ class OlLayerSwitcherComponent {
|
|
|
306
317
|
[attr.aria-expanded]="!isCollapsed()"
|
|
307
318
|
aria-label="Toggle layer switcher"
|
|
308
319
|
>
|
|
309
|
-
<span class="ol-layer-switcher__icon"
|
|
320
|
+
<span class="ol-layer-switcher__icon"
|
|
321
|
+
><svg
|
|
322
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
323
|
+
width="14"
|
|
324
|
+
height="14"
|
|
325
|
+
viewBox="0 0 24 24"
|
|
326
|
+
fill="none"
|
|
327
|
+
stroke="currentColor"
|
|
328
|
+
stroke-width="2.5"
|
|
329
|
+
stroke-linecap="round"
|
|
330
|
+
stroke-linejoin="round"
|
|
331
|
+
>
|
|
332
|
+
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
|
|
333
|
+
<polyline points="2 17 12 22 22 17"></polyline>
|
|
334
|
+
<polyline points="2 12 12 17 22 12"></polyline></svg
|
|
335
|
+
></span>
|
|
310
336
|
<span class="ol-layer-switcher__title">Layers</span>
|
|
311
337
|
</button>
|
|
312
338
|
|
|
@@ -357,9 +383,9 @@ class OlLayerSwitcherComponent {
|
|
|
357
383
|
</div>
|
|
358
384
|
}
|
|
359
385
|
</div>
|
|
360
|
-
`, isInline: true, styles: [":host{display:block}.ol-layer-switcher{position:absolute;background:#
|
|
386
|
+
`, isInline: true, styles: [":host{display:block}.ol-layer-switcher{position:absolute;background:#fffffff2;color:#333;border-radius:4px;border:none;box-shadow:0 1px 4px #0000004d;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;min-width:36px;z-index:10;transition:all .2s ease}.ol-layer-switcher--top-left{top:.5em;left:.5em}.ol-layer-switcher--top-right{top:10em;right:.5em}.ol-layer-switcher--bottom-left{bottom:.5em;left:.5em}.ol-layer-switcher--bottom-right{bottom:.5em;right:.5em}.ol-layer-switcher.collapsed{min-width:auto}.ol-layer-switcher__toggle{display:flex;align-items:center;gap:6px;padding:4px 8px;background:transparent;color:#333;border:none;border-bottom:1px solid rgba(0,0,0,.08);border-radius:4px 4px 0 0;cursor:pointer;width:100%;font-size:13px;font-weight:600;transition:background .15s ease;min-height:36px}.ol-layer-switcher.collapsed .ol-layer-switcher__toggle{border-bottom:none;border-radius:4px;padding:4px 6px;justify-content:center}.ol-layer-switcher__toggle:hover{background:#0000000d}.ol-layer-switcher__icon{font-size:14px;line-height:1}.ol-layer-switcher__title{font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}.ol-layer-switcher.collapsed .ol-layer-switcher__title,.ol-layer-switcher.collapsed .ol-layer-switcher__panel{display:none}.ol-layer-switcher__panel{padding:6px;max-height:300px;overflow-y:auto}.ol-layer-switcher__empty{padding:12px;color:#6b7280;text-align:center;font-style:italic;font-size:12px}.ol-layer-switcher__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.ol-layer-switcher__item{padding:5px 8px;border-radius:3px;transition:background .15s ease}.ol-layer-switcher__item:hover{background:#0000000a}.ol-layer-switcher__label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px}.ol-layer-switcher__checkbox{cursor:pointer;accent-color:#1a73e8}.ol-layer-switcher__name{flex:1;font-weight:500;color:#333;font-size:12px}.ol-layer-switcher__type{font-size:9px;padding:2px 5px;border-radius:3px;font-weight:700;text-transform:uppercase;background:#0000000f;color:#555;letter-spacing:.3px}.ol-layer-switcher__type--vector{background:#3b82f61f;color:#2563eb}.ol-layer-switcher__type--tile{background:#22c55e1f;color:#16a34a}.ol-layer-switcher__type--image{background:#f59e0b1f;color:#d97706}.ol-layer-switcher__opacity{width:100%;margin-top:4px;cursor:pointer;height:4px;accent-color:#1a73e8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
361
387
|
}
|
|
362
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
388
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlLayerSwitcherComponent, decorators: [{
|
|
363
389
|
type: Component,
|
|
364
390
|
args: [{ selector: 'ol-layer-switcher', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
365
391
|
<div
|
|
@@ -377,7 +403,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
377
403
|
[attr.aria-expanded]="!isCollapsed()"
|
|
378
404
|
aria-label="Toggle layer switcher"
|
|
379
405
|
>
|
|
380
|
-
<span class="ol-layer-switcher__icon"
|
|
406
|
+
<span class="ol-layer-switcher__icon"
|
|
407
|
+
><svg
|
|
408
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
409
|
+
width="14"
|
|
410
|
+
height="14"
|
|
411
|
+
viewBox="0 0 24 24"
|
|
412
|
+
fill="none"
|
|
413
|
+
stroke="currentColor"
|
|
414
|
+
stroke-width="2.5"
|
|
415
|
+
stroke-linecap="round"
|
|
416
|
+
stroke-linejoin="round"
|
|
417
|
+
>
|
|
418
|
+
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
|
|
419
|
+
<polyline points="2 17 12 22 22 17"></polyline>
|
|
420
|
+
<polyline points="2 12 12 17 22 12"></polyline></svg
|
|
421
|
+
></span>
|
|
381
422
|
<span class="ol-layer-switcher__title">Layers</span>
|
|
382
423
|
</button>
|
|
383
424
|
|
|
@@ -428,7 +469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
428
469
|
</div>
|
|
429
470
|
}
|
|
430
471
|
</div>
|
|
431
|
-
`, styles: [":host{display:block}.ol-layer-switcher{position:absolute;background:#
|
|
472
|
+
`, styles: [":host{display:block}.ol-layer-switcher{position:absolute;background:#fffffff2;color:#333;border-radius:4px;border:none;box-shadow:0 1px 4px #0000004d;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;min-width:36px;z-index:10;transition:all .2s ease}.ol-layer-switcher--top-left{top:.5em;left:.5em}.ol-layer-switcher--top-right{top:10em;right:.5em}.ol-layer-switcher--bottom-left{bottom:.5em;left:.5em}.ol-layer-switcher--bottom-right{bottom:.5em;right:.5em}.ol-layer-switcher.collapsed{min-width:auto}.ol-layer-switcher__toggle{display:flex;align-items:center;gap:6px;padding:4px 8px;background:transparent;color:#333;border:none;border-bottom:1px solid rgba(0,0,0,.08);border-radius:4px 4px 0 0;cursor:pointer;width:100%;font-size:13px;font-weight:600;transition:background .15s ease;min-height:36px}.ol-layer-switcher.collapsed .ol-layer-switcher__toggle{border-bottom:none;border-radius:4px;padding:4px 6px;justify-content:center}.ol-layer-switcher__toggle:hover{background:#0000000d}.ol-layer-switcher__icon{font-size:14px;line-height:1}.ol-layer-switcher__title{font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}.ol-layer-switcher.collapsed .ol-layer-switcher__title,.ol-layer-switcher.collapsed .ol-layer-switcher__panel{display:none}.ol-layer-switcher__panel{padding:6px;max-height:300px;overflow-y:auto}.ol-layer-switcher__empty{padding:12px;color:#6b7280;text-align:center;font-style:italic;font-size:12px}.ol-layer-switcher__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.ol-layer-switcher__item{padding:5px 8px;border-radius:3px;transition:background .15s ease}.ol-layer-switcher__item:hover{background:#0000000a}.ol-layer-switcher__label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px}.ol-layer-switcher__checkbox{cursor:pointer;accent-color:#1a73e8}.ol-layer-switcher__name{flex:1;font-weight:500;color:#333;font-size:12px}.ol-layer-switcher__type{font-size:9px;padding:2px 5px;border-radius:3px;font-weight:700;text-transform:uppercase;background:#0000000f;color:#555;letter-spacing:.3px}.ol-layer-switcher__type--vector{background:#3b82f61f;color:#2563eb}.ol-layer-switcher__type--tile{background:#22c55e1f;color:#16a34a}.ol-layer-switcher__type--image{background:#f59e0b1f;color:#d97706}.ol-layer-switcher__opacity{width:100%;margin-top:4px;cursor:pointer;height:4px;accent-color:#1a73e8}\n"] }]
|
|
432
473
|
}], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], layers: [{ type: i0.Input, args: [{ isSignal: true, alias: "layers", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], showOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOpacity", required: false }] }], startCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "startCollapsed", required: false }] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }], opacityChange: [{ type: i0.Output, args: ["opacityChange"] }] } });
|
|
433
474
|
|
|
434
475
|
// OlBasemapSwitcherComponent - Switch between base map providers
|
|
@@ -478,8 +519,8 @@ class OlBasemapSwitcherComponent {
|
|
|
478
519
|
return '🗺️';
|
|
479
520
|
}
|
|
480
521
|
}
|
|
481
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
482
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
522
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlBasemapSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
523
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: OlBasemapSwitcherComponent, isStandalone: true, selector: "ol-basemap-switcher", inputs: { basemaps: { classPropertyName: "basemaps", publicName: "basemaps", isSignal: true, isRequired: false, transformFunction: null }, activeBasemap: { classPropertyName: "activeBasemap", publicName: "activeBasemap", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { basemapChange: "basemapChange" }, ngImport: i0, template: `
|
|
483
524
|
<div
|
|
484
525
|
class="ol-basemap-switcher"
|
|
485
526
|
[class.ol-basemap-switcher--top-left]="position() === 'top-left'"
|
|
@@ -514,15 +555,32 @@ class OlBasemapSwitcherComponent {
|
|
|
514
555
|
[attr.aria-expanded]="isExpanded()"
|
|
515
556
|
aria-label="Toggle basemap switcher"
|
|
516
557
|
>
|
|
517
|
-
<span class="ol-basemap-switcher__toggle-icon"
|
|
558
|
+
<span class="ol-basemap-switcher__toggle-icon"
|
|
559
|
+
><svg
|
|
560
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
561
|
+
width="14"
|
|
562
|
+
height="14"
|
|
563
|
+
viewBox="0 0 24 24"
|
|
564
|
+
fill="none"
|
|
565
|
+
stroke="currentColor"
|
|
566
|
+
stroke-width="2.5"
|
|
567
|
+
stroke-linecap="round"
|
|
568
|
+
stroke-linejoin="round"
|
|
569
|
+
>
|
|
570
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
571
|
+
<line x1="2" y1="12" x2="22" y2="12"></line>
|
|
572
|
+
<path
|
|
573
|
+
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
|
|
574
|
+
></path></svg
|
|
575
|
+
></span>
|
|
518
576
|
<span class="ol-basemap-switcher__toggle-text">
|
|
519
577
|
{{ getActiveBasemapName() }}
|
|
520
578
|
</span>
|
|
521
579
|
</button>
|
|
522
580
|
</div>
|
|
523
|
-
`, isInline: true, styles: [":host{display:block}.ol-basemap-switcher{position:absolute;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:
|
|
581
|
+
`, isInline: true, styles: [":host{display:block}.ol-basemap-switcher{position:absolute;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:#333;z-index:10}.ol-basemap-switcher--top-left{top:.5em;left:.5em}.ol-basemap-switcher--top-center{top:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--top-right{top:.5em;right:.5em}.ol-basemap-switcher--bottom-left{bottom:.5em;left:.5em}.ol-basemap-switcher--bottom-center{bottom:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--bottom-right{bottom:.5em;right:.5em}.ol-basemap-switcher__toggle{display:flex;align-items:center;gap:6px;padding:4px 10px;background:#fffffff2;color:#333;border:none;border-radius:4px;box-shadow:0 1px 4px #0000004d;cursor:pointer;font-size:12px;font-weight:600;transition:background .15s ease;min-height:36px}.ol-basemap-switcher__toggle:hover{background:#fff}.ol-basemap-switcher__toggle-icon{font-size:14px;line-height:1}.ol-basemap-switcher__toggle-text{font-weight:600;font-size:12px}.ol-basemap-switcher__panel{position:absolute;bottom:calc(100% + 6px);left:0;background:#fffffff2;border:none;color:#333;border-radius:4px;box-shadow:0 1px 4px #0000004d;padding:4px;min-width:160px;display:flex;flex-direction:column;gap:2px}.ol-basemap-switcher--bottom-right .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{left:auto;right:0}.ol-basemap-switcher--top-left .ol-basemap-switcher__panel,.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{bottom:auto;top:calc(100% + 6px)}.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--bottom-center .ol-basemap-switcher__panel{left:50%;transform:translate(-50%)}.ol-basemap-switcher__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:none;background:transparent;border-radius:3px;cursor:pointer;text-align:left;font-size:12px;transition:background .15s ease}.ol-basemap-switcher__item:hover{background:#0000000d}.ol-basemap-switcher__item--active{background:#1a73e81f;color:#1a73e8;font-weight:600}.ol-basemap-switcher__item--active:hover{background:#1a73e82e}.ol-basemap-switcher__icon{font-size:14px}.ol-basemap-switcher__name{font-weight:500;color:#333;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
524
582
|
}
|
|
525
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
583
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlBasemapSwitcherComponent, decorators: [{
|
|
526
584
|
type: Component,
|
|
527
585
|
args: [{ selector: 'ol-basemap-switcher', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
528
586
|
<div
|
|
@@ -559,23 +617,218 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
559
617
|
[attr.aria-expanded]="isExpanded()"
|
|
560
618
|
aria-label="Toggle basemap switcher"
|
|
561
619
|
>
|
|
562
|
-
<span class="ol-basemap-switcher__toggle-icon"
|
|
620
|
+
<span class="ol-basemap-switcher__toggle-icon"
|
|
621
|
+
><svg
|
|
622
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
623
|
+
width="14"
|
|
624
|
+
height="14"
|
|
625
|
+
viewBox="0 0 24 24"
|
|
626
|
+
fill="none"
|
|
627
|
+
stroke="currentColor"
|
|
628
|
+
stroke-width="2.5"
|
|
629
|
+
stroke-linecap="round"
|
|
630
|
+
stroke-linejoin="round"
|
|
631
|
+
>
|
|
632
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
633
|
+
<line x1="2" y1="12" x2="22" y2="12"></line>
|
|
634
|
+
<path
|
|
635
|
+
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
|
|
636
|
+
></path></svg
|
|
637
|
+
></span>
|
|
563
638
|
<span class="ol-basemap-switcher__toggle-text">
|
|
564
639
|
{{ getActiveBasemapName() }}
|
|
565
640
|
</span>
|
|
566
641
|
</button>
|
|
567
642
|
</div>
|
|
568
|
-
`, styles: [":host{display:block}.ol-basemap-switcher{position:absolute;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:
|
|
643
|
+
`, styles: [":host{display:block}.ol-basemap-switcher{position:absolute;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:#333;z-index:10}.ol-basemap-switcher--top-left{top:.5em;left:.5em}.ol-basemap-switcher--top-center{top:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--top-right{top:.5em;right:.5em}.ol-basemap-switcher--bottom-left{bottom:.5em;left:.5em}.ol-basemap-switcher--bottom-center{bottom:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--bottom-right{bottom:.5em;right:.5em}.ol-basemap-switcher__toggle{display:flex;align-items:center;gap:6px;padding:4px 10px;background:#fffffff2;color:#333;border:none;border-radius:4px;box-shadow:0 1px 4px #0000004d;cursor:pointer;font-size:12px;font-weight:600;transition:background .15s ease;min-height:36px}.ol-basemap-switcher__toggle:hover{background:#fff}.ol-basemap-switcher__toggle-icon{font-size:14px;line-height:1}.ol-basemap-switcher__toggle-text{font-weight:600;font-size:12px}.ol-basemap-switcher__panel{position:absolute;bottom:calc(100% + 6px);left:0;background:#fffffff2;border:none;color:#333;border-radius:4px;box-shadow:0 1px 4px #0000004d;padding:4px;min-width:160px;display:flex;flex-direction:column;gap:2px}.ol-basemap-switcher--bottom-right .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{left:auto;right:0}.ol-basemap-switcher--top-left .ol-basemap-switcher__panel,.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{bottom:auto;top:calc(100% + 6px)}.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--bottom-center .ol-basemap-switcher__panel{left:50%;transform:translate(-50%)}.ol-basemap-switcher__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:none;background:transparent;border-radius:3px;cursor:pointer;text-align:left;font-size:12px;transition:background .15s ease}.ol-basemap-switcher__item:hover{background:#0000000d}.ol-basemap-switcher__item--active{background:#1a73e81f;color:#1a73e8;font-weight:600}.ol-basemap-switcher__item--active:hover{background:#1a73e82e}.ol-basemap-switcher__icon{font-size:14px}.ol-basemap-switcher__name{font-weight:500;color:#333;font-size:12px}\n"] }]
|
|
569
644
|
}], propDecorators: { basemaps: [{ type: i0.Input, args: [{ isSignal: true, alias: "basemaps", required: false }] }], activeBasemap: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeBasemap", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], basemapChange: [{ type: i0.Output, args: ["basemapChange"] }] } });
|
|
570
645
|
|
|
646
|
+
class OlGeolocationControlComponent {
|
|
647
|
+
mapService = inject(OlMapService);
|
|
648
|
+
zoneHelper = inject(OlZoneHelper);
|
|
649
|
+
destroyRef = inject(DestroyRef);
|
|
650
|
+
position = input('top-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
651
|
+
trackingChange = output();
|
|
652
|
+
controlElement;
|
|
653
|
+
tracking = signal(false, ...(ngDevMode ? [{ debugName: "tracking" }] : /* istanbul ignore next */ []));
|
|
654
|
+
control;
|
|
655
|
+
geolocation;
|
|
656
|
+
positionFeature;
|
|
657
|
+
accuracyFeature;
|
|
658
|
+
layer;
|
|
659
|
+
constructor() {
|
|
660
|
+
afterNextRender(() => {
|
|
661
|
+
const map = this.mapService.getMap();
|
|
662
|
+
if (!map)
|
|
663
|
+
return;
|
|
664
|
+
this.zoneHelper.runOutsideAngular(() => {
|
|
665
|
+
// Create the Control
|
|
666
|
+
this.control = new Control({
|
|
667
|
+
element: this.controlElement.nativeElement,
|
|
668
|
+
});
|
|
669
|
+
map.addControl(this.control);
|
|
670
|
+
// Setup Geolocation
|
|
671
|
+
const view = map.getView();
|
|
672
|
+
this.geolocation = new Geolocation({
|
|
673
|
+
trackingOptions: {
|
|
674
|
+
enableHighAccuracy: true,
|
|
675
|
+
},
|
|
676
|
+
projection: view.getProjection(),
|
|
677
|
+
});
|
|
678
|
+
// Setup Features
|
|
679
|
+
this.accuracyFeature = new Feature();
|
|
680
|
+
this.positionFeature = new Feature();
|
|
681
|
+
this.positionFeature.setStyle(new Style({
|
|
682
|
+
image: new Circle({
|
|
683
|
+
radius: 6,
|
|
684
|
+
fill: new Fill({
|
|
685
|
+
color: '#3b82f6',
|
|
686
|
+
}),
|
|
687
|
+
stroke: new Stroke({
|
|
688
|
+
color: '#fff',
|
|
689
|
+
width: 2,
|
|
690
|
+
}),
|
|
691
|
+
}),
|
|
692
|
+
}));
|
|
693
|
+
// Setup Vector Layer to show position
|
|
694
|
+
const vectorSource = new Vector({
|
|
695
|
+
features: [this.accuracyFeature, this.positionFeature],
|
|
696
|
+
});
|
|
697
|
+
this.layer = new Vector$1({
|
|
698
|
+
source: vectorSource,
|
|
699
|
+
zIndex: 9999, // Always on top
|
|
700
|
+
});
|
|
701
|
+
map.addLayer(this.layer);
|
|
702
|
+
// Listeners
|
|
703
|
+
this.geolocation.on('change:accuracyGeometry', () => {
|
|
704
|
+
this.accuracyFeature?.setGeometry(this.geolocation?.getAccuracyGeometry() ?? undefined);
|
|
705
|
+
});
|
|
706
|
+
this.geolocation.on('change:position', () => {
|
|
707
|
+
const coordinates = this.geolocation?.getPosition();
|
|
708
|
+
this.positionFeature?.setGeometry(coordinates ? new Point(coordinates) : undefined);
|
|
709
|
+
if (coordinates && this.tracking()) {
|
|
710
|
+
map.getView().animate({ center: coordinates, duration: 500 });
|
|
711
|
+
}
|
|
712
|
+
});
|
|
713
|
+
});
|
|
714
|
+
});
|
|
715
|
+
this.destroyRef.onDestroy(() => {
|
|
716
|
+
const map = this.mapService.getMap();
|
|
717
|
+
if (map) {
|
|
718
|
+
if (this.control)
|
|
719
|
+
map.removeControl(this.control);
|
|
720
|
+
if (this.layer)
|
|
721
|
+
map.removeLayer(this.layer);
|
|
722
|
+
}
|
|
723
|
+
if (this.geolocation) {
|
|
724
|
+
this.geolocation.setTracking(false);
|
|
725
|
+
}
|
|
726
|
+
});
|
|
727
|
+
}
|
|
728
|
+
toggleTracking() {
|
|
729
|
+
const nextState = !this.tracking();
|
|
730
|
+
this.tracking.set(nextState);
|
|
731
|
+
this.trackingChange.emit(nextState);
|
|
732
|
+
if (this.geolocation) {
|
|
733
|
+
this.zoneHelper.runOutsideAngular(() => {
|
|
734
|
+
this.geolocation.setTracking(nextState);
|
|
735
|
+
if (nextState) {
|
|
736
|
+
const coordinates = this.geolocation.getPosition();
|
|
737
|
+
if (coordinates) {
|
|
738
|
+
this.mapService
|
|
739
|
+
.getMap()
|
|
740
|
+
?.getView()
|
|
741
|
+
.animate({ center: coordinates, zoom: 15, duration: 500 });
|
|
742
|
+
}
|
|
743
|
+
}
|
|
744
|
+
else {
|
|
745
|
+
this.positionFeature?.setGeometry(undefined);
|
|
746
|
+
this.accuracyFeature?.setGeometry(undefined);
|
|
747
|
+
}
|
|
748
|
+
});
|
|
749
|
+
}
|
|
750
|
+
}
|
|
751
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlGeolocationControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
752
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlGeolocationControlComponent, isStandalone: true, selector: "ol-geolocation-control", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { trackingChange: "trackingChange" }, viewQueries: [{ propertyName: "controlElement", first: true, predicate: ["controlElement"], descendants: true }], ngImport: i0, template: `
|
|
753
|
+
<div
|
|
754
|
+
#controlElement
|
|
755
|
+
class="ol-geolocation-control ol-unselectable ol-control"
|
|
756
|
+
[ngClass]="position()"
|
|
757
|
+
>
|
|
758
|
+
<button
|
|
759
|
+
type="button"
|
|
760
|
+
[class.active]="tracking()"
|
|
761
|
+
(click)="toggleTracking()"
|
|
762
|
+
[attr.title]="tracking() ? 'Stop tracking' : 'Track location'"
|
|
763
|
+
>
|
|
764
|
+
<svg
|
|
765
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
766
|
+
viewBox="0 0 24 24"
|
|
767
|
+
fill="none"
|
|
768
|
+
stroke="currentColor"
|
|
769
|
+
stroke-width="2"
|
|
770
|
+
stroke-linecap="round"
|
|
771
|
+
stroke-linejoin="round"
|
|
772
|
+
class="geolocation-icon"
|
|
773
|
+
>
|
|
774
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
775
|
+
<circle cx="12" cy="12" r="3" [attr.fill]="tracking() ? 'currentColor' : 'none'"></circle>
|
|
776
|
+
<line x1="12" y1="2" x2="12" y2="4"></line>
|
|
777
|
+
<line x1="12" y1="20" x2="12" y2="22"></line>
|
|
778
|
+
<line x1="20" y1="12" x2="22" y2="12"></line>
|
|
779
|
+
<line x1="2" y1="12" x2="4" y2="12"></line>
|
|
780
|
+
</svg>
|
|
781
|
+
</button>
|
|
782
|
+
</div>
|
|
783
|
+
`, isInline: true, styles: [".ol-geolocation-control{position:absolute}.ol-geolocation-control.top-left{top:4.5em;left:.5em}.ol-geolocation-control.top-right{top:4.5em;right:.5em}.ol-geolocation-control.bottom-left{bottom:.5em;left:.5em}.ol-geolocation-control.bottom-right{bottom:.5em;right:.5em}button{display:flex;align-items:center;justify-content:center;width:1.375em;height:1.375em;padding:0;background-color:#fff6;border:none;cursor:pointer;border-radius:2px;color:#333;transition:all .2s}button:hover{background-color:#fffc}button.active{color:#3b82f6;background-color:#ffffffe6}.geolocation-icon{width:1em;height:1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
784
|
+
}
|
|
785
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlGeolocationControlComponent, decorators: [{
|
|
786
|
+
type: Component,
|
|
787
|
+
args: [{ selector: 'ol-geolocation-control', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
788
|
+
<div
|
|
789
|
+
#controlElement
|
|
790
|
+
class="ol-geolocation-control ol-unselectable ol-control"
|
|
791
|
+
[ngClass]="position()"
|
|
792
|
+
>
|
|
793
|
+
<button
|
|
794
|
+
type="button"
|
|
795
|
+
[class.active]="tracking()"
|
|
796
|
+
(click)="toggleTracking()"
|
|
797
|
+
[attr.title]="tracking() ? 'Stop tracking' : 'Track location'"
|
|
798
|
+
>
|
|
799
|
+
<svg
|
|
800
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
801
|
+
viewBox="0 0 24 24"
|
|
802
|
+
fill="none"
|
|
803
|
+
stroke="currentColor"
|
|
804
|
+
stroke-width="2"
|
|
805
|
+
stroke-linecap="round"
|
|
806
|
+
stroke-linejoin="round"
|
|
807
|
+
class="geolocation-icon"
|
|
808
|
+
>
|
|
809
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
810
|
+
<circle cx="12" cy="12" r="3" [attr.fill]="tracking() ? 'currentColor' : 'none'"></circle>
|
|
811
|
+
<line x1="12" y1="2" x2="12" y2="4"></line>
|
|
812
|
+
<line x1="12" y1="20" x2="12" y2="22"></line>
|
|
813
|
+
<line x1="20" y1="12" x2="22" y2="12"></line>
|
|
814
|
+
<line x1="2" y1="12" x2="4" y2="12"></line>
|
|
815
|
+
</svg>
|
|
816
|
+
</button>
|
|
817
|
+
</div>
|
|
818
|
+
`, styles: [".ol-geolocation-control{position:absolute}.ol-geolocation-control.top-left{top:4.5em;left:.5em}.ol-geolocation-control.top-right{top:4.5em;right:.5em}.ol-geolocation-control.bottom-left{bottom:.5em;left:.5em}.ol-geolocation-control.bottom-right{bottom:.5em;right:.5em}button{display:flex;align-items:center;justify-content:center;width:1.375em;height:1.375em;padding:0;background-color:#fff6;border:none;cursor:pointer;border-radius:2px;color:#333;transition:all .2s}button:hover{background-color:#fffc}button.active{color:#3b82f6;background-color:#ffffffe6}.geolocation-icon{width:1em;height:1em}\n"] }]
|
|
819
|
+
}], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], trackingChange: [{ type: i0.Output, args: ["trackingChange"] }], controlElement: [{
|
|
820
|
+
type: ViewChild,
|
|
821
|
+
args: ['controlElement']
|
|
822
|
+
}] } });
|
|
823
|
+
|
|
571
824
|
// OlControlService
|
|
572
825
|
class OlControlService {
|
|
573
826
|
addCustomControl(element, position) { }
|
|
574
827
|
removeCustomControl(element) { }
|
|
575
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
576
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
828
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
829
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlControlService });
|
|
577
830
|
}
|
|
578
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
831
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlControlService, decorators: [{
|
|
579
832
|
type: Injectable
|
|
580
833
|
}] });
|
|
581
834
|
|
|
@@ -610,4 +863,4 @@ function provideControls() {
|
|
|
610
863
|
* Generated bundle index. Do not edit.
|
|
611
864
|
*/
|
|
612
865
|
|
|
613
|
-
export { OlAttributionControlComponent, OlBasemapSwitcherComponent, OlControlService, OlFullscreenControlComponent, OlLayerSwitcherComponent, OlRotateControlComponent, OlScaleLineControlComponent, OlZoomControlComponent, ROTATE_CONTROL_MAP_SERVICE, provideControls, withControls };
|
|
866
|
+
export { OlAttributionControlComponent, OlBasemapSwitcherComponent, OlControlService, OlFullscreenControlComponent, OlGeolocationControlComponent, OlLayerSwitcherComponent, OlRotateControlComponent, OlScaleLineControlComponent, OlZoomControlComponent, ROTATE_CONTROL_MAP_SERVICE, provideControls, withControls };
|