@lblod/ember-rdfa-editor-lblod-plugins 20.0.0 → 21.0.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 21.0.0
+
+### Major Changes
+
+- [#449](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/449) [`335cb673df926d26a0d421a958c414d334653575`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/335cb673df926d26a0d421a958c414d334653575) Thanks [@elpoelma](https://github.com/elpoelma)! - Drop obsolete decision nodes from `standard-template` plugin
+
+### Minor Changes
+
+- [#443](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/443) [`9f53a0c5a0e0db0414b0c84aed978d01752ccbf8`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/9f53a0c5a0e0db0414b0c84aed978d01752ccbf8) Thanks [@piemonkey](https://github.com/piemonkey)! - Add ability to specify area locations in the location-plugin
+
+- [#445](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/445) [`06fe546cea3d3e7076f3a0ab4549c8de389a43d7`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/06fe546cea3d3e7076f3a0ab4549c8de389a43d7) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Support for repeatable fragments
+
+  Addition of a custom, interactive `fragment` node and nodeview.
+  Using the fragment node interactive buttons, you can replace, add and remove fragments.
+
+- [#444](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/444) [`3eea339d0d4bd5bf746d6c8cd9c99cf95e127825`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/3eea339d0d4bd5bf746d6c8cd9c99cf95e127825) Thanks [@elpoelma](https://github.com/elpoelma)! - Addition of a backwards-compatible parsing-rule for decision articles to `structure` node-spec
+
+- [#446](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/446) [`f9b4a65a743b214d4f5fa2ba3936fc9fca9fa4c2`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/f9b4a65a743b214d4f5fa2ba3936fc9fca9fa4c2) Thanks [@elpoelma](https://github.com/elpoelma)! - Introduce some modifications to new `structure` node-spec:
+  - Drop `structureName` node-attribute. This attribute has been replaced by both the `structureType` and `displayStructureName` attributes.
+  - Introduction of a required `structureType` attribute. Examples of `structureType` values are:
+    - `article`
+    - `title`
+    - `chapter`
+    - `section`
+    - `subsection`
+    - `paragraph`
+  - Introduction of a `displayStructureName` attribute. This attribute controls whether the internationalizated (based on the document language) version of the structure name is displayed inside the header of the structure. The internationalized structure name is based on the `structureType` value and the entries included in the translation files. `displayStructureName` has a default value of `false`.
+
+### Patch Changes
+
+- [#447](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/447) [`f06edfdf1681fc2c52e46462cad8faa5d97215c4`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/f06edfdf1681fc2c52e46462cad8faa5d97215c4) Thanks [@elpoelma](https://github.com/elpoelma)! - Ensure `zonality` is set up as optional when fetching traffic signs
+
 ## 20.0.0
 
 ### Major Changes

package/addon/components/location-plugin/edit.gts

@@ -349,10 +349,13 @@ export default class LocationPluginEditComponent extends Component<Signature> {
             <Group.Radio @value='place'>
               {{t 'location-plugin.types.place'}}
             </Group.Radio>
+            <Group.Radio @value='area'>
+              {{t 'location-plugin.types.area'}}
+            </Group.Radio>
           </AuRadioGroup>
         </fs.content>
       </AuFieldset>
-      {{#if (eq @locationType 'place')}}
+      {{#unless (eq @locationType 'address')}}
         <AuFormRow>
           <AuLabel for='place-name'>
             {{t 'location-plugin.search.place-name.label'}}*
@@ -371,7 +374,7 @@ export default class LocationPluginEditComponent extends Component<Signature> {
         <p class='au-u-para-tiny au-u-margin-none'>
           {{t 'location-plugin.search.hint'}}
         </p>
-      {{/if}}
+      {{/unless}}
       <AuFormRow>
         <AuLabel for='municipality-select'>
           {{t 'location-plugin.search.municipality.label'}}

package/addon/components/location-plugin/insert.gts

@@ -16,11 +16,13 @@ import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
 
 import { Address } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/address-helpers';
 import {
+  Area,
   convertWGS84CoordsToLambert,
   GeoPos,
   type GlobalCoordinates,
   Place,
   Point,
+  Polygon,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/geo-helpers';
 import { replaceSelectionWithAddress } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/node-utils';
 import { type LocationPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/node';
@@ -30,6 +32,23 @@ import LocationMap, { type LocationType } from './map';
 
 export type CurrentLocation = Address | GlobalCoordinates | undefined;
 
+function updateFromNode<T extends Address | Place | Area, R>(
+  Class: new (...args: unknown[]) => T,
+  extractFunc: (current: T) => R,
+  defaultValue?: R,
+) {
+  return (component: LocationPluginInsertComponent): R | undefined => {
+    const curLocation = component.selectedLocationNode?.value.attrs.value as
+      | Address
+      | Area
+      | Place
+      | null;
+    return curLocation instanceof Class
+      ? extractFunc(curLocation)
+      : defaultValue;
+  };
+}
+
 interface Signature {
   Args: {
     controller: SayController;
@@ -46,43 +65,41 @@ export default class LocationPluginInsertComponent extends Component<Signature>
   @tracked isLoading = false;
 
   @trackedReset({
-    memo: 'selectedLocationNode',
-    update(component: LocationPluginInsertComponent) {
-      const currentLocation = component.selectedLocationNode?.value.attrs
-        .value as Address | Place | null;
-      return currentLocation instanceof Address ? currentLocation : undefined;
-    },
+    memo: 'modalOpen',
+    update: updateFromNode(Address, (address) => address),
   })
   addressToInsert?: Address;
 
   @trackedReset({
-    memo: 'selectedLocationNode',
-    update(component: LocationPluginInsertComponent) {
-      const currentLocation = component.selectedLocationNode?.value.attrs
-        .value as Address | Place | null;
-      return currentLocation instanceof Place
-        ? currentLocation.location.location
-        : undefined;
-    },
+    memo: 'modalOpen',
+    update: updateFromNode(Place, (place) => place.location.location),
   })
   savedLocation: GeoPos | undefined;
 
   @trackedReset({
-    memo: 'selectedLocationNode',
+    memo: 'modalOpen',
     update(component: LocationPluginInsertComponent) {
-      const currentLocation = component.selectedLocationNode?.value.attrs
-        .value as Address | Place | null;
-      return currentLocation instanceof Place ? currentLocation.name : '';
+      return (
+        updateFromNode(Place, (place) => place.name)(component) ??
+        updateFromNode(Area, (area) => area.name, '')(component)
+      );
     },
   })
   placeName: string = '';
 
   @trackedReset({
-    memo: 'selectedLocationNode',
+    memo: 'modalOpen',
+    update: updateFromNode(Area, (area) => area.shape.locations),
+  })
+  savedArea: GeoPos[] | undefined;
+
+  @trackedReset({
+    memo: 'modalOpen',
     update(component: LocationPluginInsertComponent) {
-      const currentLocation = component.selectedLocationNode?.value.attrs
-        .value as Address | Place | null;
-      return currentLocation instanceof Place ? 'place' : 'address';
+      return (
+        updateFromNode(Place, () => 'place')(component) ??
+        updateFromNode(Area, () => 'area', 'address')(component)
+      );
     },
   })
   locationType: LocationType = 'address';
@@ -121,14 +138,27 @@ export default class LocationPluginInsertComponent extends Component<Signature>
   }
 
   get canInsert() {
+    // trackedReset only actually resets any values if the values are used somewhere. Since we're
+    // not actually rendering anything inside the modal if this.modalOpen is false, we need to use
+    // these values somewhere outside of the modal contents block.
+    this.addressToInsert;
+    this.placeName;
+    this.savedLocation;
+    this.savedArea;
+    this.locationType;
     return !!this.controller.activeEditorView.props.nodeViews?.oslo_location;
   }
 
   get disableConfirm() {
-    if (this.locationType === 'place') {
-      return !this.selectedLocationNode || !this.placeName || !this.chosenPoint;
-    } else {
-      return !this.selectedLocationNode || !this.addressToInsert;
+    switch (this.locationType) {
+      case 'place':
+        return (
+          !this.selectedLocationNode || !this.placeName || !this.chosenPoint
+        );
+      case 'address':
+        return !this.selectedLocationNode || !this.addressToInsert;
+      default:
+        return !this.selectedLocationNode || !this.placeName || !this.savedArea;
     }
   }
 
@@ -139,9 +169,8 @@ export default class LocationPluginInsertComponent extends Component<Signature>
 
   @action
   setChosenPoint(point: GlobalCoordinates) {
-    // Since we only use the global coordinates, we don't have to do a conversion to lambert here
     this.chosenPoint = {
-      lambert: { x: 0, y: 0 },
+      lambert: convertWGS84CoordsToLambert(point),
       global: point,
     };
   }
@@ -153,6 +182,7 @@ export default class LocationPluginInsertComponent extends Component<Signature>
 
   @action
   closeModal() {
+    this.chosenPoint = undefined;
     this.modalOpen = false;
   }
 
@@ -179,41 +209,58 @@ export default class LocationPluginInsertComponent extends Component<Signature>
     this.addressToInsert = address;
   }
 
+  @action
+  setArea(vertices: GlobalCoordinates[]) {
+    this.savedArea = vertices.map((vertex) => ({
+      global: vertex,
+      lambert: convertWGS84CoordsToLambert(vertex),
+    }));
+  }
+
   @action
   confirmLocation() {
     if (this.selectedLocationNode) {
-      let toInsert: Address | Place | undefined;
+      let toInsert: Address | Place | Area | undefined;
       const { pos } = this.selectedLocationNode;
       if (this.locationType === 'address' && this.addressToInsert) {
         toInsert = this.addressToInsert;
-        this.controller.withTransaction((tr) => {
-          return tr.setNodeAttribute(pos, 'value', toInsert);
-        });
-        this.modalOpen = false;
       } else if (
         this.locationType === 'place' &&
         this.chosenPoint?.global &&
         this.placeName
       ) {
-        convertWGS84CoordsToLambert(this.chosenPoint.global).then((lambert) => {
-          toInsert = new Place({
-            uri: this.nodeContentsUtils.fallbackPlaceUri(),
-            name: this.placeName,
-            location: new Point({
-              uri: this.nodeContentsUtils.fallbackPointUri(),
-              location: {
-                lambert,
-                global: this.chosenPoint?.global,
-              },
-            }),
-          });
-          this.controller.withTransaction((tr) => {
-            return tr.setNodeAttribute(pos, 'value', toInsert);
-          });
-          this.modalOpen = false;
-          this.chosenPoint = undefined;
+        toInsert = new Place({
+          uri: this.nodeContentsUtils.fallbackPlaceUri(),
+          name: this.placeName,
+          location: new Point({
+            uri: this.nodeContentsUtils.fallbackGeometryUri(),
+            location: {
+              lambert: convertWGS84CoordsToLambert(this.chosenPoint.global),
+              global: this.chosenPoint?.global,
+            },
+          }),
+        });
+        this.chosenPoint = undefined;
+      } else if (
+        this.locationType === 'area' &&
+        this.savedArea &&
+        this.placeName
+      ) {
+        toInsert = new Area({
+          uri: this.nodeContentsUtils.fallbackPlaceUri(),
+          name: this.placeName,
+          shape: new Polygon({
+            uri: this.nodeContentsUtils.fallbackGeometryUri(),
+            locations: this.savedArea,
+          }),
         });
       }
+      if (toInsert) {
+        this.controller.withTransaction((tr) => {
+          return tr.setNodeAttribute(pos, 'value', toInsert);
+        });
+        this.modalOpen = false;
+      }
     }
   }
 
@@ -263,6 +310,8 @@ export default class LocationPluginInsertComponent extends Component<Signature>
             @location={{this.chosenPoint}}
             @existingLocation={{this.savedLocation}}
             @setLocation={{this.setChosenPoint}}
+            @existingArea={{this.savedArea}}
+            @setArea={{this.setArea}}
           />
         </div>
       </modal.Body>

package/addon/components/location-plugin/map.gts

@@ -1,14 +1,18 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { fn } from '@ember/helper';
 import and from 'ember-truth-helpers/helpers/and';
 import eq from 'ember-truth-helpers/helpers/eq';
 import t from 'ember-intl/helpers/t';
-import { LeafletMap } from 'ember-leaflet';
+import {
+  LeafletMap,
+  type LeafletMapSig,
+  type LeafletMapStart,
+} from 'ember-leaflet';
+import { type LatLngBoundsExpression } from 'leaflet';
 import { type LeafletMouseEvent } from 'leaflet';
-import { restartableTask } from 'ember-concurrency';
-import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
-import AuLoader from '@appuniversum/ember-appuniversum/components/au-loader';
+import { trackedReset } from 'tracked-toolbox';
 import { Address } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/address-helpers';
 import {
   convertLambertCoordsToWGS84,
@@ -16,13 +20,23 @@ import {
   type GlobalCoordinates,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/geo-helpers';
 
-export type LocationType = 'address' | 'place';
+export type LocationType = 'address' | 'place' | 'area';
 
+const MAP_TILE_ATTRIBUTION =
+  '&copy; <a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+const MAP_TILE_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 const COORD_SYSTEM_CENTER: GlobalCoordinates = {
   lng: 4.450822554431,
   lat: 50.50526730529,
 };
+const COORD_SYSTEM_START = {
+  center: COORD_SYSTEM_CENTER,
+  zoom: 7,
+};
 
+function isLast(array: unknown[], index: number) {
+  return array.length === index + 1;
+}
 function displayLocation(location: GeoPos | undefined) {
   const { lambert } = location ?? {};
   return lambert
@@ -37,95 +51,259 @@ interface Signature {
     location?: GeoPos;
     setLocation: (loc: GlobalCoordinates) => void;
     existingLocation?: GeoPos;
+    existingArea?: GeoPos[];
+    setArea: (vertices: GlobalCoordinates[]) => void;
   };
   Element: HTMLElement;
 }
 
-async function ensureGlobalCoordinates(geoPos: GeoPos) {
-  if (geoPos.global) {
-    return geoPos.global;
+function ensureGlobalCoordinates(geoPos: GeoPos) {
+  return geoPos.global || convertLambertCoordsToWGS84(geoPos.lambert);
+}
+function areaLocations(
+  locationType: LocationType,
+  positions: GeoPos[] | undefined,
+) {
+  return locationType === 'area' && positions?.length !== 0
+    ? positions?.map((pos) => ensureGlobalCoordinates(pos))
+    : undefined;
+}
+
+/** Find the southWest and northEast corners bounding an arbitrary set of points */
+function generateBoundsFromShape(
+  areaForBounds: GeoPos[] | undefined,
+): LatLngBoundsExpression | undefined {
+  if (areaForBounds && areaForBounds.length !== 0) {
+    const southWest = { ...ensureGlobalCoordinates(areaForBounds[0]) };
+    const northEast = { ...ensureGlobalCoordinates(areaForBounds[0]) };
+    areaForBounds.forEach((pos) => {
+      const vertex = ensureGlobalCoordinates(pos);
+      if (vertex.lat < southWest.lat) {
+        southWest.lat = vertex.lat;
+      } else if (vertex.lat > northEast.lat) {
+        northEast.lat = vertex.lat;
+      }
+      if (vertex.lng < southWest.lng) {
+        southWest.lng = vertex.lng;
+      } else if (vertex.lng > northEast.lng) {
+        northEast.lng = vertex.lng;
+      }
+    });
+    return [
+      [southWest.lat, southWest.lng],
+      [northEast.lat, northEast.lng],
+    ];
+  }
+  return undefined;
+}
+
+type MapWrapperSig = {
+  Args: Omit<
+    LeafletMapSig['Args'],
+    'bounds' | 'center' | 'zoom' | 'lat' | 'lng'
+  > & {
+    mapStart: LeafletMapStart;
+  };
+  Blocks: LeafletMapSig['Blocks'];
+};
+
+/**
+ * LeafletMap doesn't handle undefined being passed for the bounds argument, so we use a wrapper
+ * component to make sure only to pass the relevant args
+ */
+class MapWrapper extends Component<MapWrapperSig> {
+  get unwrappedBounds() {
+    return 'bounds' in this.args.mapStart ? this.args.mapStart.bounds : false;
+  }
+  get isOrigin() {
+    return (
+      'center' in this.args.mapStart &&
+      this.args.mapStart.center === COORD_SYSTEM_CENTER
+    );
+  }
+  get unwrappedCenter() {
+    return 'center' in this.args.mapStart
+      ? {
+          center: this.args.mapStart.center,
+          zoom: this.args.mapStart.zoom,
+        }
+      : false;
+  }
+  get unwrappedLatLng() {
+    return 'lat' in this.args.mapStart
+      ? {
+          lat: this.args.mapStart.lat,
+          lng: this.args.mapStart.lng,
+          zoom: this.args.mapStart.zoom,
+        }
+      : false;
   }
-  return await convertLambertCoordsToWGS84(geoPos.lambert);
+  <template>
+    {{#if this.unwrappedBounds}}
+      <LeafletMap
+        @bounds={{this.unwrappedBounds}}
+        @onClick={{@onClick}}
+        as |layers|
+      >
+        {{yield layers}}
+      </LeafletMap>
+    {{else if this.isOrigin}}
+      {{! If we're at the default center, use hard-coded values to avoid map jumps }}
+      <LeafletMap
+        @center={{COORD_SYSTEM_CENTER}}
+        @zoom={{7}}
+        @onClick={{@onClick}}
+        as |layers|
+      >
+        {{yield layers}}
+      </LeafletMap>
+    {{else if this.unwrappedCenter}}
+      <LeafletMap
+        @center={{this.unwrappedCenter.center}}
+        @zoom={{this.unwrappedCenter.zoom}}
+        @onClick={{@onClick}}
+        as |layers|
+      >
+        {{yield layers}}
+      </LeafletMap>
+    {{else if this.unwrappedLatLng}}
+      <LeafletMap
+        @lat={{this.unwrappedLatLng.lat}}
+        @lng={{this.unwrappedLatLng.lng}}
+        @zoom={{this.unwrappedLatLng.zoom}}
+        @onClick={{@onClick}}
+        as |layers|
+      >
+        {{yield layers}}
+      </LeafletMap>
+    {{/if}}
+  </template>
 }
 
 export default class LocationPluginMapComponent extends Component<Signature> {
-  @tracked mapCenter = COORD_SYSTEM_CENTER;
-  @tracked zoom = 7;
-  @tracked existingLocationCoords: GlobalCoordinates | undefined;
+  @tracked vertices: GlobalCoordinates[] = [];
 
-  addressLatLngLookup = restartableTask(
-    async (): Promise<GlobalCoordinates | undefined> => {
-      const { address, existingLocation } = this.args;
-      if (address) {
-        this.mapCenter = await ensureGlobalCoordinates(
-          address.location.location,
-        );
-        this.zoom = 19;
-      } else if (existingLocation) {
-        this.mapCenter = await ensureGlobalCoordinates(existingLocation);
-        this.existingLocationCoords = this.mapCenter;
-        this.zoom = 19;
+  // Use untracked properties as otherwise the map jumps to any area or location we pick
+  existingAreaBounds = generateBoundsFromShape(this.args.existingArea);
+  existingLocationCoords = this.args.existingLocation
+    ? ensureGlobalCoordinates(this.args.existingLocation)
+    : undefined;
+
+  @trackedReset({
+    memo(component: LocationPluginMapComponent) {
+      return (
+        component.args.address ||
+        component.args.existingLocation ||
+        component.existingAreaBounds
+      );
+    },
+    update(component: LocationPluginMapComponent) {
+      if (component.args.address) {
+        return {
+          center: ensureGlobalCoordinates(
+            component.args.address.location.location,
+          ),
+          zoom: 18,
+        };
+      } else if (component.args.existingLocation) {
+        return {
+          center: ensureGlobalCoordinates(component.args.existingLocation),
+          zoom: 18,
+        };
+      } else if (component.existingAreaBounds) {
+        return {
+          bounds: component.existingAreaBounds,
+        };
+      } else {
+        return COORD_SYSTEM_START;
       }
-      return COORD_SYSTEM_CENTER;
     },
-  );
-  addressLatLng = trackedTask<GlobalCoordinates | undefined>(
-    this,
-    this.addressLatLngLookup,
-    () => [this.args.address, this.args.existingLocation],
-  );
+  })
+  mapLocation: LeafletMapStart = COORD_SYSTEM_START;
 
-  get doRenderMap() {
-    return this.addressLatLng.value && this.zoom;
+  get foundAddress() {
+    return 'center' in this.mapLocation ? this.mapLocation.center : false;
   }
 
   @action
   onMapClick(event: LeafletMouseEvent) {
     if (this.args.locationType === 'place') {
       this.args.setLocation(event.latlng);
+    } else if (this.args.locationType === 'area') {
+      this.vertices = [...this.vertices, event.latlng];
+    }
+  }
+
+  @action
+  onVertexClick(index: number) {
+    if (index + 1 === this.vertices.length) {
+      // Last vertex, click to remove
+      this.vertices = this.vertices.slice(0, -1);
+    } else if (index === 0) {
+      // First vertex, click to end
+      this.args.setArea(this.vertices);
+      this.vertices = [];
     }
   }
 
   <template>
     <div class='map-wrapper' ...attributes>
-      {{#if this.addressLatLng.isRunning}}
-        <AuLoader @hideMessage={{true}}>
-          {{t 'common.initialBounds.loading'}}
-        </AuLoader>
-      {{else if this.addressLatLng.value}}
-        <LeafletMap
-          @center={{this.mapCenter}}
-          @zoom={{this.zoom}}
-          @onClick={{this.onMapClick}}
-          as |layers|
-        >
-          <layers.tile
-            @url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-            @attribution='&copy; <a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-          />
-          {{#if (and @address (eq @locationType 'address'))}}
-            <layers.marker @location={{this.mapCenter}} as |marker|>
-              <marker.popup>
-                {{@address.formatted}}
-              </marker.popup>
-            </layers.marker>
-          {{/if}}
-          {{#if this.existingLocationCoords}}
+      <MapWrapper
+        @mapStart={{this.mapLocation}}
+        @onClick={{this.onMapClick}}
+        as |layers|
+      >
+        <layers.tile
+          @url={{MAP_TILE_URL}}
+          @attribution={{MAP_TILE_ATTRIBUTION}}
+        />
+        {{#if (and @address (eq @locationType 'address') this.foundAddress)}}
+          <layers.marker @location={{this.foundAddress}} as |marker|>
+            <marker.tooltip>
+              {{@address.formatted}}
+            </marker.tooltip>
+          </layers.marker>
+        {{/if}}
+        {{#if this.existingLocationCoords}}
+          <layers.marker
+            @opacity={{if @location 0.3 1}}
+            @location={{this.existingLocationCoords}}
+            as |marker|
+          >
+            <marker.tooltip>
+              {{displayLocation @existingLocation}}
+            </marker.tooltip>
+          </layers.marker>
+        {{/if}}
+        {{#if (and @location (eq @locationType 'place'))}}
+          <layers.marker @location={{@location.global}} />
+        {{/if}}
+        {{#if (eq @locationType 'area')}}
+          <layers.polyline @locations={{this.vertices}} />
+          {{#each this.vertices as |vertex index|}}
             <layers.marker
-              @opacity={{if @location 0.3 1}}
-              @location={{this.existingLocationCoords}}
+              @location={{vertex}}
+              @onClick={{(fn this.onVertexClick index)}}
               as |marker|
             >
-              <marker.popup>
-                {{displayLocation @existingLocation}}
-              </marker.popup>
+              {{#if (eq index 0)}}
+                <marker.tooltip>
+                  {{t 'location-plugin.map.hint.finish-shape'}}
+                </marker.tooltip>
+              {{else if (isLast this.vertices index)}}
+                <marker.tooltip>
+                  {{t 'location-plugin.map.hint.delete-point'}}
+                </marker.tooltip>
+              {{/if}}
             </layers.marker>
-          {{/if}}
-          {{#if (and @location (eq @locationType 'place'))}}
-            <layers.marker @location={{@location.global}} />
-          {{/if}}
-        </LeafletMap>
-      {{/if}}
+          {{/each}}
+        {{/if}}
+        {{#if (areaLocations @locationType @existingArea)}}
+          <layers.polygon
+            @locations={{(areaLocations @locationType @existingArea)}}
+          />
+        {{/if}}
+      </MapWrapper>
     </div>
   </template>
 }