feat(demo): example of marker with svg

Author: Clara Belair

src/app/app.module.ts

@@ -22,6 +22,7 @@ import { SideBySideComponent } from './side-by-side/side-by-side.component';
 import { SwipeComponent } from './swipe/swipe.component';
 import { OverlayComponent } from './overlay/overlay.component';
 import { ColorSelectHoverComponent } from './color-select-hover/color-select-hover.component';
+import { MarkerComponent } from './marker/marker.component';
 
 @NgModule({
   declarations: [
@@ -41,6 +42,7 @@ import { ColorSelectHoverComponent } from './color-select-hover/color-select-hov
     SwipeComponent,
     OverlayComponent,
     ColorSelectHoverComponent,
+    MarkerComponent,
   ],
   imports: [BrowserModule, FormsModule, AppRoutingModule, AngularOpenlayersModule, ReactiveFormsModule],
   providers: [],

src/app/app.routing.ts

@@ -15,6 +15,7 @@ import { SideBySideComponent } from './side-by-side/side-by-side.component';
 import { SwipeComponent } from './swipe/swipe.component';
 import { OverlayComponent } from './overlay/overlay.component';
 import { ColorSelectHoverComponent } from './color-select-hover/color-select-hover.component';
+import { MarkerComponent } from './marker/marker.component';
 
 const routes: Routes = [
   { path: '', component: ExamplesListComponent },
@@ -33,6 +34,7 @@ const routes: Routes = [
       { path: 'swipe', component: SwipeComponent },
       { path: 'overlay', component: OverlayComponent },
       { path: 'color-select-hover', component: ColorSelectHoverComponent },
+      { path: 'marker', component: MarkerComponent },
       { path: 'cluster', component: ClusterComponent },
       { path: 'raster', component: RasterComponent },
     ],

src/app/example-list.ts

@@ -62,6 +62,12 @@ export const examplesList = [
     routerLink: 'color-select-hover',
     openLayersLink: 'https://openlayers.org/en/latest/examples/vector-layer.html',
   },
+  {
+    title: 'Marker',
+    description: 'Display marker with svg on specific point',
+    routerLink: 'marker',
+    openLayersLink: 'https://openlayers.org/en/latest/examples/icon-color.html',
+  },
   {
     title: 'Cluster',
     description: 'Example of using aol-source-cluster. This example shows how to do clustering on point features.',

src/app/marker/marker.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit } from '@angular/core';
+
+//
+
+@Component({
+  selector: 'app-display-marker',
+  template: `
+    <aol-map #map width="100%" height="100%">
+      <aol-interaction-default></aol-interaction-default>
+      <aol-control-defaults></aol-control-defaults>
+
+      <aol-view [zoom]="12">
+        <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 *ngIf="marker">
+        <aol-source-vector #markers>
+          <aol-feature>
+            <aol-geometry-point>
+              <aol-coordinate [x]="marker.lon" [y]="marker.lat" [srid]="'EPSG:4326'"></aol-coordinate>
+            </aol-geometry-point>
+            <aol-style>
+              <aol-style-icon
+                [src]="'assets/marker.svg'"
+                [anchor]="[0.5, 1]"
+                [anchorXUnits]="'fraction'" [anchorYUnits]="'fraction'"
+                [scale]="2"
+                [anchorOrigin]="'top-left'">
+              </aol-style-icon>
+            </aol-style>
+          </aol-feature>
+        </aol-source-vector>
+      </aol-layer-vector>
+    </aol-map>
+  `,
+})
+export class MarkerComponent implements OnInit {
+  constructor() {}
+
+  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],
+        ],
+      ],
+    },
+  };
+
+  marker = {
+    lon: -2.264184,
+    lat: 46.996207,
+  };
+
+  ngOnInit() {}
+}