feat(source): add UTF grid source

Author: Damien Marest

projects/ngx-openlayers/src/lib/sources/utfgrid.component.ts

@@ -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);
+  }
+}

projects/ngx-openlayers/src/public_api.ts

@@ -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,
@@ -86,6 +87,7 @@ export {
   SourceOsmComponent,
   SourceBingmapsComponent,
   SourceClusterComponent,
+  SourceUTFGridComponent,
   SourceVectorComponent,
   SourceXYZComponent,
   SourceVectorTileComponent,
@@ -162,6 +164,7 @@ const COMPONENTS = [
   SourceOsmComponent,
   SourceBingmapsComponent,
   SourceClusterComponent,
+  SourceUTFGridComponent,
   SourceVectorComponent,
   SourceXYZComponent,
   SourceVectorTileComponent,

src/app/app.module.ts

@@ -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({
@@ -48,6 +49,7 @@ import { OverviewComponent } from './overview/overview.component';
     ColorSelectHoverComponent,
     MarkerComponent,
     ArcgisImageComponent,
+    UTFGridComponent,
     ImageWMSComponent,
     OverviewComponent,
     ViewProjectionUpdateComponent,

src/app/app.routing.ts

@@ -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 = [
@@ -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: '' },

src/app/example-list.ts

@@ -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',
+  },
 ];

src/app/utfgrid/utfgrid.component.ts

@@ -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;
+      }
+    });
+  }
+}