Skip to content

Commit

Permalink
feat(source): add UTF grid source
Browse files Browse the repository at this point in the history
  • Loading branch information
Damien Marest authored and Yakoust committed Apr 17, 2019
1 parent 93026b7 commit bbb2801
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 0 deletions.
26 changes: 26 additions & 0 deletions projects/ngx-openlayers/src/lib/sources/utfgrid.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
import { SourceComponent } from './source.component';
import { LayerTileComponent } from '../layers/layertile.component';
import { UTFGrid } from 'ol/source';

@Component({
selector: 'aol-source-utfgrid',
template: `
<ng-content></ng-content>
`,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceUTFGridComponent) }],
})
export class SourceUTFGridComponent extends SourceComponent implements OnInit {
instance: UTFGrid;
@Input() tileJSON: JSON;
@Input() url: string;

constructor(@Host() layer: LayerTileComponent) {
super(layer);
}

ngOnInit() {
this.instance = new UTFGrid(this);
this.host.instance.setSource(this.instance);
}
}
3 changes: 3 additions & 0 deletions projects/ngx-openlayers/src/public_api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ import { OverlayComponent } from './lib/overlay.component';
import { ContentComponent } from './lib/content.component';
import { AttributionsComponent } from './lib/attributions.component';
import { AttributionComponent } from './lib/attribution.component';
import { SourceUTFGridComponent } from './lib/sources/utfgrid.component';

export {
MapComponent,
Expand All @@ -86,6 +87,7 @@ export {
SourceOsmComponent,
SourceBingmapsComponent,
SourceClusterComponent,
SourceUTFGridComponent,
SourceVectorComponent,
SourceXYZComponent,
SourceVectorTileComponent,
Expand Down Expand Up @@ -162,6 +164,7 @@ const COMPONENTS = [
SourceOsmComponent,
SourceBingmapsComponent,
SourceClusterComponent,
SourceUTFGridComponent,
SourceVectorComponent,
SourceXYZComponent,
SourceVectorTileComponent,
Expand Down
2 changes: 2 additions & 0 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { MarkerComponent } from './marker/marker.component';
import { ArcgisImageComponent } from './arcgis-image/arcgis-image.component';
import { ImageWMSComponent } from './image-wms/image-wms.component';
import { ViewProjectionUpdateComponent } from './view-projection-update/view-projection-update.component';
import { UTFGridComponent } from './utfgrid/utfgrid.component';
import { OverviewComponent } from './overview/overview.component';

@NgModule({
Expand All @@ -48,6 +49,7 @@ import { OverviewComponent } from './overview/overview.component';
ColorSelectHoverComponent,
MarkerComponent,
ArcgisImageComponent,
UTFGridComponent,
ImageWMSComponent,
OverviewComponent,
ViewProjectionUpdateComponent,
Expand Down
2 changes: 2 additions & 0 deletions src/app/app.routing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { MarkerComponent } from './marker/marker.component';
import { ArcgisImageComponent } from './arcgis-image/arcgis-image.component';
import { ImageWMSComponent } from './image-wms/image-wms.component';
import { ViewProjectionUpdateComponent } from './view-projection-update/view-projection-update.component';
import { UTFGridComponent } from './utfgrid/utfgrid.component';
import { OverviewComponent } from './overview/overview.component';

const routes: Routes = [
Expand All @@ -45,6 +46,7 @@ const routes: Routes = [
{ path: 'image-wms', component: ImageWMSComponent },
{ path: 'view-projection-update', component: ViewProjectionUpdateComponent },
{ path: 'overview', component: OverviewComponent },
{ path: 'utf-grid', component: UTFGridComponent },
],
},
{ path: '**', redirectTo: '' },
Expand Down
6 changes: 6 additions & 0 deletions src/app/example-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -105,4 +105,10 @@ export const examplesList = [
routerLink: 'overview',
openLayersLink: 'https://openlayers.org/en/latest/examples/overviewmap.html',
},
{
title: 'UTF Grid',
description: 'Example of using aol-source-utfgrid. This example display country flag in an overlay on hover',
routerLink: 'utf-grid',
openLayersLink: 'https://openlayers.org/en/latest/examples/utfgrid.html',
},
];
56 changes: 56 additions & 0 deletions src/app/utfgrid/utfgrid.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { Component, ViewChild } from '@angular/core';
import { SourceUTFGridComponent, ViewComponent } from '../../../projects/ngx-openlayers/src/public_api';

@Component({
selector: 'app-root',
template: `
<aol-map (onPointerMove)="displayInfo($event.coordinate)">
<aol-interaction-default></aol-interaction-default>
<aol-control-defaults></aol-control-defaults>
<aol-control-fullscreen></aol-control-fullscreen>
<aol-view #view [zoom]="2" [center]="[3000000, 3000000]"></aol-view>
<aol-layer-tile> <aol-source-osm></aol-source-osm> </aol-layer-tile>
<aol-layer-tile>
<aol-source-utfgrid
#UTFGrid
[url]="'https://api.tiles.mapbox.com/v4/mapbox.geography-class.json?secure&access_token=' + key"
></aol-source-utfgrid>
</aol-layer-tile>
<aol-overlay *ngIf="coords && info" [positioning]="'BOTTOM_RIGHT'" [stopEvent]="false">
<aol-coordinate [x]="coords[0]" [y]="coords[1]" [srid]="'EPSG:3857'"> </aol-coordinate>
<aol-content>
<img [src]="'data:image/png;base64,' + info['flag_png']" />
</aol-content>
</aol-overlay>
</aol-map>
`,
styles: [
`
:host {
display: flex;
}
aol-map {
width: 70%;
height: 100%;
}
`,
],
})
export class UTFGridComponent {
@ViewChild('UTFGrid') UTFGrid: SourceUTFGridComponent;
@ViewChild('view') view: ViewComponent;

info: any;
coords: Coordinates;
key = 'pk.eyJ1IjoieWFrb3VzdCIsImEiOiJjanVkc3Y0b2cwNWppM3lwaXd5M3JidHRzIn0.rJmuWPJnuKA9MJ9z5RPKZw';

displayInfo(c) {
this.UTFGrid.instance.forDataAtCoordinateAndResolution(c, this.view.instance.getResolution(), data => {
if (data !== null && data !== undefined && data !== '') {
this.info = data;
this.coords = c;
}
});
}
}

0 comments on commit bbb2801

Please sign in to comment.