feat(demo): example of overlay

Author: Clara Belair

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { DrawPolygonComponent } from './draw-polygon/draw-polygon.component';
 import { ModifyPolygonComponent } from './modify-polygon/modify-polygon.component';
 import { SideBySideComponent } from './side-by-side/side-by-side.component';
 import { SwipeComponent } from './swipe/swipe.component';
+import { OverlayComponent } from './overlay/overlay.component';
 
 @NgModule({
   declarations: [
@@ -37,6 +38,7 @@ import { SwipeComponent } from './swipe/swipe.component';
     ModifyPolygonComponent,
     SideBySideComponent,
     SwipeComponent,
+    OverlayComponent,
   ],
   imports: [BrowserModule, FormsModule, AppRoutingModule, AngularOpenlayersModule, ReactiveFormsModule],
   providers: [],

src/app/app.routing.ts

@@ -13,6 +13,7 @@ import { DrawPolygonComponent } from './draw-polygon/draw-polygon.component';
 import { ModifyPolygonComponent } from './modify-polygon/modify-polygon.component';
 import { SideBySideComponent } from './side-by-side/side-by-side.component';
 import { SwipeComponent } from './swipe/swipe.component';
+import { OverlayComponent } from './overlay/overlay.component';
 
 const routes: Routes = [
   { path: '', component: ExamplesListComponent },
@@ -29,6 +30,7 @@ const routes: Routes = [
       { path: 'modify-polygon', component: ModifyPolygonComponent },
       { path: 'side-by-side', component: SideBySideComponent },
       { path: 'swipe', component: SwipeComponent },
+      { path: 'overlay', component: OverlayComponent },
       { path: 'cluster', component: ClusterComponent },
       { path: 'raster', component: RasterComponent },
     ],

src/app/example-list.ts

@@ -50,6 +50,12 @@ export const examplesList = [
     routerLink: 'swipe',
     openLayersLink: 'https://openlayers.org/en/latest/examples/layer-swipe.html',
   },
+  {
+    title: 'Overlay',
+    description: 'Example of using aol-overlay',
+    routerLink: 'overlay',
+    openLayersLink: 'https://openlayers.org/en/latest/examples/overlay.html',
+  },
   {
     title: 'Cluster',
     description: 'Example of using aol-source-cluster. This example shows how to do clustering on point features.',

src/app/overlay/overlay.component.ts

@@ -0,0 +1,97 @@
+import { Component, OnInit } from '@angular/core';
+import { Feature as OlFeature, format, geom } from 'openlayers';
+
+@Component({
+  selector: 'app-display-overlay',
+  template: `
+    <aol-map #map width="100%" height="100%">
+      <aol-interaction-default></aol-interaction-default>
+      <aol-control-defaults></aol-control-defaults>
+
+      <aol-view [zoom]="11">
+        <aol-coordinate [x]="-2.269282" [y]="46.987247" [srid]="'EPSG:4326'"></aol-coordinate>
+      </aol-view>
+
+      <aol-layer-tile [opacity]="1">
+        <aol-source-osm></aol-source-osm>
+      </aol-layer-tile>
+
+      <aol-layer-vector>
+        <aol-source-vector>
+          <aol-feature>
+            <aol-geometry-polygon>
+              <aol-collection-coordinates [coordinates]="feature.geometry.coordinates[0]" [srid]="'EPSG:4326'"></aol-collection-coordinates>
+            </aol-geometry-polygon>
+          </aol-feature>
+        </aol-source-vector>
+      </aol-layer-vector>
+
+      <aol-overlay [positioning]="'center-center'" [stopEvent]="false">
+        <aol-coordinate
+          [x]="tooltip.lon"
+          [y]="tooltip.lat"
+          [srid]="'EPSG:4326'"
+        >
+        </aol-coordinate>
+        <aol-content>
+          <div class="tooltip tooltip-static">
+            {{tooltip.text}}
+          </div>
+        </aol-content>
+      </aol-overlay>
+    </aol-map>
+  `,
+  styles: [
+    `
+      .tooltip {
+        margin-top: 35%;
+        right: 50%;
+        position: relative;
+        border-radius: 4px;
+        color: white;
+        padding: 4px 8px;
+        white-space: nowrap;
+      }
+
+      .tooltip-static {
+        background-color: #000000;
+        color: white;
+        border: 1px solid white;
+      }
+    `,
+  ],
+})
+export class OverlayComponent implements OnInit {
+  constructor() {}
+
+  geoJsonFormat = new format.GeoJSON();
+
+  feature = {
+    type: 'Feature',
+    properties: {},
+    geometry: {
+      type: 'Polygon',
+      coordinates: [
+        [
+          [-2.3565673828124996, 46.92588289494367],
+          [-2.1148681640624996, 46.92588289494367],
+          [-2.1148681640624996, 47.04954010021555],
+          [-2.3565673828124996, 47.04954010021555],
+          [-2.3565673828124996, 46.92588289494367],
+        ],
+      ],
+    },
+  };
+
+  tooltip = {
+    lon: 0,
+    lat: 0,
+    text: 'Lorem ipsum dolor sit amet',
+  };
+
+  ngOnInit() {
+    const olFeature: OlFeature = this.geoJsonFormat.readFeature(this.feature);
+    const olGeomPolygon = geom.Polygon.fromExtent(olFeature.getGeometry().getExtent());
+    [, this.tooltip.lat, this.tooltip.lon] = olGeomPolygon.getExtent();
+  }
+}