Overview

Point Filter

wuic-point-filter is the framework's geographic filter: draw a polygonal area or a circle (center + radius) on a Google map and the component applies the spatial filter on the datasource's location field.

Description

Opens a dialog with a Google map (PrimeNG Dialog + @angular/google-maps).
Two drawing modes: polygonal area (each click adds a vertex, clicking the first vertex or double-clicking closes the shape, minimum 3 vertices) and circle (first click sets the center, mousemove adjusts the radius in real time, second click confirms).
Applies the filter on datasource.filterInfo.filters with operator maparea (polygon) or mapdistance (circle) on the field.mc_nome_colonna field, then reloads the data.
If the user presses "Use filter" without having closed the shape, the current shape is finalized automatically.
clearFilter() removes the spatial filter (case-insensitive field name match), resets metaInfo.operators[<field>] and re-triggers fetchData().
Requires the Google Maps JavaScript API to be loaded and a geographic column (e.g. Location).

API

Selector:

wuic-point-filter

Input:

record: any
field: MetadatiColonna — the geographic column to filter on
metaInfo: MetaInfo
datasource: BehaviorSubject<DataSourceComponent>

Main public methods:

openDialog() / closeDialog()
drawArea() — starts polygon drawing (operator maparea)
drawCircle() — starts circle drawing (operator mapdistance)
applyFilter() — writes the filter to datasource.filterInfo and reloads
clearFilter() — removes the spatial filter and regenerates the query

Example: list-grid with geographic filter

Snippet 1ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { DataSourceComponent, ListGridComponent, PointFilterComponent } from 'wuic-framework-lib';
import { MetadatiColonna } from 'wuic-framework-lib';

@Component({
  selector: 'app-cities-geo',

Snippet 2HTML

<wuic-data-source #ds [hardcodedRoute]="'cities'" [autoload]="true"></wuic-data-source>
<wuic-point-filter *ngIf="locationField"
  [field]="locationField"
  [metaInfo]="ds.metaInfo"
  [datasource]="dsSubject"></wuic-point-filter>
<wuic-list-grid [hardcodedDatasource]="ds"></wuic-list-grid>

Notes

The maparea / mapdistance operators are translated into spatial SQL server-side by the framework's query builder.
The filter is inserted with __extra: true (it is not a standard filter-bar column filter).
The shape's center is propagated to metaInfo.tableMetadata.extraProps.archetypes to center the linked map view.