-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #295 from yagajs/yaga-layer-provider
Implement providers and layers control
- Loading branch information
Showing
53 changed files
with
1,074 additions
and
349 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>YAGA | leaflet-ng2 | Layers-Control Example</title> | ||
| <script src="bundle.js"></script> | ||
| <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" /> | ||
| <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap-theme.min.css" /> | ||
| <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" /> | ||
| <link rel="stylesheet" href="../../node_modules/leaflet/dist/leaflet.css" /> | ||
| <link rel="stylesheet" href="../default.css" /> | ||
| </head> | ||
| <body> | ||
| <app></app> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| // Shims | ||
| import 'reflect-metadata'; | ||
| import 'zone.js'; | ||
|
|
||
| import { YagaModule } from '../../lib/index'; // @yaga/leflet-ng2 | ||
|
|
||
| import { Component, PlatformRef } from '@angular/core'; | ||
| import { NgModule } from '@angular/core'; | ||
| import { FormsModule } from '@angular/forms'; | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; | ||
|
|
||
| import { ExampleAppComponentBlueprint, IExampleProperties } from '../app-component-blueprint'; | ||
| import { ExamplePropertiesModule, PROPERTIES_WRAPPER } from '../property.component'; | ||
|
|
||
| const platform: PlatformRef = platformBrowserDynamic(); | ||
|
|
||
| /* tslint:disable:max-line-length */ | ||
| const template: string = ` | ||
| <example-header [title]="'Layers-Control-Directive'"></example-header> | ||
| <div class="container"> | ||
| <div class="map"> | ||
| <yaga-map [zoom]="3"> | ||
| <yaga-layers-control | ||
| (click)="handleEvent('click', $event);" | ||
| (dblclick)="handleEvent('dblclick', $event);" | ||
| (mousedown)="handleEvent('mousedown', $event);" | ||
| (mouseup)="handleEvent('mouseup', $event);" | ||
| (mouseover)="handleEvent('mouseover', $event);" | ||
| (mouseout)="handleEvent('mouseout', $event);" | ||
| (mousemove)="handleEvent('mousemove', $event);" | ||
| (positionChange)="handleEvent('positionChange', $event);" | ||
| (displayChange)="handleEvent('displayChange', $event);" | ||
| [(display)]="getDuplexPropertyByName('display').value" | ||
| [position]="getInputPropertyByName('position').value" | ||
| [opacity]="getInputPropertyByName('opacity').value" | ||
| > | ||
| <yaga-tile-layer yaga-base-layer="OSM" [url]="'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'"></yaga-tile-layer> | ||
| <yaga-tile-layer yaga-base-layer="OTM" [url]="'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'"></yaga-tile-layer> | ||
| <yaga-circle-marker yaga-overlay-layer="Marker" [lat]="51" [lng]="7"></yaga-circle-marker> | ||
| </yaga-layers-control> | ||
| </yaga-map> | ||
| </div> | ||
| ${ PROPERTIES_WRAPPER } | ||
| </div><!-- /.container --> | ||
| <example-footer></example-footer> | ||
| `; | ||
| /* tslint:enable */ | ||
|
|
||
| @Component({ | ||
| selector: 'app', | ||
| template, | ||
| }) | ||
| export class AppComponent extends ExampleAppComponentBlueprint { | ||
| public properties: IExampleProperties = { | ||
| duplex: [ | ||
| {name: 'display', value: true, type: 'checkbox' }, | ||
| ], | ||
| input: [ | ||
| {name: 'opacity', value: 0.8, type: 'relative'},{ | ||
| additional: { states: ['topleft', 'topright', 'bottomleft', 'bottomright']}, | ||
| name: 'position', | ||
| type: 'select', | ||
| value: 'topright', | ||
| }, | ||
| ], | ||
| output: [ | ||
| {name: 'click', value: '', type: 'event' }, | ||
| {name: 'dblclick', value: '', type: 'event' }, | ||
| {name: 'mousedown', value: '', type: 'event' }, | ||
| {name: 'mouseup', value: '', type: 'event' }, | ||
| {name: 'mouseover', value: '', type: 'event' }, | ||
| {name: 'mouseout', value: '', type: 'event' }, | ||
| {name: 'mousemove', value: '', type: 'event' }, | ||
| {name: 'positionChange', value: '', type: 'event' }, | ||
| {name: 'displayChange', value: '', type: 'event' }, | ||
| ], | ||
| }; | ||
| } | ||
|
|
||
| /* tslint:disable:max-classes-per-file */ | ||
| @NgModule({ | ||
| bootstrap: [ AppComponent ], | ||
| declarations: [ AppComponent ], | ||
| imports: [ BrowserModule, FormsModule, YagaModule, ExamplePropertiesModule ], | ||
| }) | ||
| export class AppModule { } | ||
|
|
||
| document.addEventListener('DOMContentLoaded', () => { | ||
| platform.bootstrapModule(AppModule); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { | ||
| Attribute, | ||
| Directive, | ||
| OnDestroy, | ||
| } from '@angular/core'; | ||
| import { LayerProvider } from './layer.provider'; | ||
| import { LayersControlProvider } from './layers-control.provider'; | ||
|
|
||
| /** | ||
| * Angular2 directive for adding layers to the layers-control of Leaflet as base-layer. | ||
| * | ||
| * *You can use this directive in an Angular2 template after importing `YagaModule`.* | ||
| * | ||
| * How to use in a template: | ||
| * ```html | ||
| * <yaga-map> | ||
| * <yaga-layers-control> | ||
| * <!-- This can be any other layer... --> | ||
| * <yaga-tile-layer yaga-base-layer="OSM"></yaga-tile-layer> | ||
| * </yaga-attribution-control> | ||
| * </yaga-map> | ||
| * ``` | ||
| * | ||
| * @link http://leafletjs.com/reference-1.2.0.html#control-layers-addbaselayer Original Leaflet documentation | ||
| * @link https://leaflet-ng2.yagajs.org/latest/browser-test?grep=Base-Layer%20Directive Unit-Test | ||
| * @link https://leaflet-ng2.yagajs.org/latest/coverage/lcov-report/lib/base-layer.directive.js.html | ||
| * Test coverage | ||
| * @link https://leaflet-ng2.yagajs.org/latest/typedoc/classes/baselayerdirective.html API documentation | ||
| * @example https://leaflet-ng2.yagajs.org/latest/examples/layers-control-directive/ | ||
| */ | ||
| @Directive({ | ||
| selector: '[yaga-base-layer]', | ||
| }) | ||
| export class BaseLayerDirective implements OnDestroy { | ||
| constructor( | ||
| // TODO: Inject LayersControl @Inject(forwardRef(() => LayersControl)) protected layersControl: LayersControl, | ||
| protected layer: LayerProvider, | ||
| @Attribute('yaga-base-layer') public readonly name: string, | ||
| public layersControlProvider: LayersControlProvider, | ||
| ) { | ||
| this.layersControlProvider.ref.addBaseLayer(this.layer.ref, name); | ||
| } | ||
|
|
||
| /** | ||
| * Internal method to provide the removal from the control in Leaflet, when removing it from the Angular template | ||
| */ | ||
| public ngOnDestroy(): void { | ||
| this.layersControlProvider.ref.removeLayer(this.layer.ref); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.