sf_geo-extent-filter

The sf_geo-extent-filter bundle allows to filter result sets by their geographic location.

For this, the bundle offers a mini-map to show the current geographic area that the result items are filtered on. There is also a dialog where the user can draw into a map a different geographic extent to use as a filter.

Configuration

All configuration is done on the Config component. You can configure the following properties:

Property Description
panelExpanded A boolean value stating whether the expansion panel containing the map should be initially open or closed.
map.basemap The map to use for the background. Choose one of the well known basemap IDs (esri.Map) or a custom basemap config (for details see documentation of map-init bundles). Two examples are shown below.
mapView Configure the view parameters of the map. See esri.MapView for the details and available properties to configure. Most important is the configuration of the *initial view extent: For AGS_TILED (such es well known esri base maps) use center (point) and zoom (level), for other types you need to configure an extent (see examples below).
geometrySymbol Defines the style to use for the polygon that is displayed in the map to indicate the search area. See the documentation for the SimpleFillSymbol for details.

Examples:

{
    "sf_geo-extent-filter": {
        "Config": {
            "map": {
                "basemap": "oceans"
            },
            "mapView": {
                "center": [10, 51],
                "zoom": 4
            },
            "geometrySymbol": {
                "type": "simple-fill",
                "color": [107, 134, 94, 0.15],
                "style": "solid",
                "outline": {
                    "color": [107, 134, 94],
                    "width": 2
                }
            }
        }
    }
}

{
    "sf_geo-extent-filter": {
        "Config": {
             "map": {
                "basemap": [
                    {
                        "id": "webatlas",
                        "title": "WebAtlasDE.light",
                        "type": "WMTS",
                        "url": "https://www.wmts.nrw.de/geobasis/wmts_nw_dop/1.0.0"
                    }
                ]
            },
            "mapView": {
                "extent": {
                    "xmin": -227700,
                    "ymin": 5718208,
                    "xmax": 1387778,
                    "ymax": 6058218,
                    "spatialReference": 25832
                }
            },
            "geometrySymbol": {
                "type": "simple-fill",
                "color": [107, 134, 94, 0.15],
                "style": "solid",
                "outline": {
                    "color": [107, 134, 94],
                    "width": 2
                }
            }
        }
    }
}

Components in Detail

The following documentation refers to the programmatic usage of the components in this bundle and is aimed at software developers. It is not relevant for the sole configuration of apps.

GeoExtentFilterPanelProviderRegistrator

This is the component for the vue component which is currently used in the sf_resultspage-content bundle. It contains a collapsible panel with a mini-map. The mini-map will show the current filter-geometry. There are also two buttons for clearing the filter-geometry and opening the dialog of the geo-extent-filter-create-dialog__.

Usage

The configuration of this component should only be changed if necessary. The following example shows how to add this component to another component.

In the manifest-file:

{
    "name": "MyNiceComponentNameProviderRegistrator",
    "impl": "sf_vue-support/VueComponentProviderRegistrator",
    "propertiesConstructor": true,
    "properties": {
        "id": "my-nice-component-id",
        "subComponentProviderIds": [
            "geo-extent-filter-panel"
        ],
        "vueComponentModuleName": "sf_my-nice-component/MyNiceComponentName.vue"
    },
    "references": [
        {
            "name": "subComponentProvider",
            "providing": "vue.VueComponentProvider",
            "cardinality": "0..n"
        }
    ]
}

In the vue-file:

<template>
    <div>
        <geo-extent-filter-panel></geo-extent-filter-panel>
    </div>
</template>

GeoExtentFilterCreateDialogProviderRegistrator

This is a component for the a dialog in which a rectangle can be created for spatial filtering.

Usage

The configuration of this component should only be changed if necessary. The following example shows how to add this component to another component.

In the manifest.json-file:

{
    "name": "MyNiceComponentNameProviderRegistrator",
    "impl": "sf_vue-support/VueComponentProviderRegistrator",
    "propertiesConstructor": true,
    "properties": {
        "id": "my-nice-component-id",
        "subComponentProviderIds": [
            "geo-extent-filter-create-dialog"
        ],
        "vueComponentModuleName": "sf_my-nice-component/MyNiceComponentName.vue"
    },
    "references": [
        {
            "name": "subComponentProvider",
            "providing": "vue.VueComponentProvider",
            "cardinality": "0..n"
        }
    ]
}

In the vue.js-file:

<template>
    <div>
        <geo-extent-filter-create-dialog></geo-extent-filter-create-dialog>
    </div>
</template>

Note that the open-state of the dialog is stored in the FilterModel and has to be set to true in the model to open the dialog.

FilterModel

The component that contains the model for the spatial filter. To set the current filter geometry programmatically, set the filterGeometry attribute to the desired extent.

Usage

Usage of the FilterModel component in a vue component while using the vue-support bundle:

{
  "name": "MyNewComponentProviderRegistrator",
  "impl": "sf_vue-support/VueComponentProviderRegistrator",
  "propertiesConstructor": true,
  "properties": {
    "id": "my-new-component",
    "reactiveReferences": [
      {
        "name": "geoExtentFilterModel",
        "syncProps": ["filterGeometry"]
      }
    ],
    "vueComponentModuleName": "sf_my-new-component/MyNewComponent.vue"
  },
  "references": [
    {
      "name": "subComponentProvider",
      "providing": "vue.VueComponentProvider",
      "cardinality": "0..n"
    },
    {
      "name": "geoExtentFilterModel",
      "providing": "sf_geo-extent-filter.FilterModel"
    }
  ]
}

Within the component we can, for example, do the following:

export default {
    data() {
        return {
            filterGeometry: null
        };
    },
    watch: {
        filterGeometry(newGeom, oldGeom){
            // For example draw the geometry to a layer
        }
    }
}

ExtentUrlParameterValueTransformer

Serializes and parses the filter geometry to synchronize the extent parameter in the page URL with the current filter geometry.

Since smart.finder 2.3.1 the serialized extent contains not only the coordinates, but also the well known ID of the spatial reference system (SRS) of these coordinates. Example:

extent=7.1,8.2,52.2,53.1,4326

In smart.finder prior to version 2.3.1 the extent parameter looked as follows:

extent=853920,1450740,6200890,7179284

Here it is assumed these coordinates are always in the SRS with the WKID 3857 or 102100.

If, for some reason, these coordinates are in a different SRS, you can change the default WKID as follows in the app.json file. In the following example, it is assumed that the input coordinates from the extent URL parameter are in the WGS84 reference system:

{
    "sf_geo-extent-filter": {
        "ExtentUrlParameterValueTransformer": {
            "defaultWkid": 4326
        }
    }
}

Config

This component contains the configuration of the sf_geo-extent-filter bundle. Currently, it allows the configuration of three things:

Configuring the background map

The map is completely configurable. If a map configuration is offered, the default configuration is discarded and the offered configuration determines the map behaviour completely. Note that this feature was only tested with base maps but nothing more advanced yet.

The configuration of the map is done by defining the map property. the configured object will be passed to the constructor of the esri/Map class of the esri JS API (like new Map(mapConfig)).

Example configuration:

{
  "name": "Config",
  "provides": "sf_geo-extent-filter.Config",
  "propertiesConstructor": true,
  "properties": {
    "map": {
      "basemap": "oceans"
    }
  }
}

Configuring the map-view

For the map view only the attributes zoom and center are configurable. As mentioned above, the properties map and container have to be set in the code later. This is because the configuration of the map-views of the panel and the dialog component is derived from the same base (so they look the same). But the two components can not share the map and container properties, these values are individual for each component.

The configuration of the map-view is done by defining the mapView property. With the given object an instance of the esri/views/MapView class will be created (like new MapView(mapViewConfig)).

Example configuration:

{
  "name": "Config",
  "provides": "sf_geo-extent-filter.Config",
  "propertiesConstructor": true,
  "properties": {
    "mapView": {
      "center": [10, 52],
      "zoom": 4
    }
  }
}

Configuring the symbol

The symbol for the filter-geometry is completely configurable. It has the same structure as a symbol in the esri JS API.

The configuration of the map-view is done by defining the geometrySymbol property.

Example configuration:

{
  "name": "Config",
  "provides": "sf_geo-extent-filter.Config",
  "propertiesConstructor": true,
  "properties": {
    "geometrySymbol": {
      "type": "simple-fill",
      "color": [ 107, 134, 94, 0.15 ],
      "style": "solid",
      "outline": {
        "color": [ 107, 134, 94 ],
        "width": 2
      }
    }
  }
}

FilterQuerySetter

Syncs the geometry properties between the Query in the sf_resultsmodel bundle and the FilterModel. There is nothing to configure for this component.