npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@polar/plugin-gfi

v2.0.0-alpha.6

Published

Plugin Gfi

Downloads

44

Readme

GFI

Scope

The GFI plugin can be used to fetch and optionally display GFI (GetFeatureInfo) from WMS and WFS services as well as layers based on GeoJSON files. In a first step, the information is stored in the VueX store to allow for easy access. Display is optional and quite obstructive within the map client.

⚠️ The display feature is currently not meant for production. Please use data bindings for display to avoid obstructing the map client.

Extension ideas

  • To ease the currently rather complex WMS GFI parsing, we may send a WMS GetCapabilities request during initialization to detect supported formats by services. We may then proceed to choose from the offered formats and have the parser ready from the get-go. This would also allow for printing error messages for unspecified formats during start-up time, and for choosing a better format should the first named (and therefore used by default) format be unhandy, e.g. be an arbitrary text response.

  • Currently, the specification on how to display a GFI is taken from the mapConfiguration object. The Masterportal does support GFI instructions specified on the layer definitions within the services.json file itself. That specification is documented, but a little more complex, and ignored for now, since we're going for a more configurable client – our users will, in general, be interested in one specific layer, not any layer that might display GFI.

    However, we may still support that one day by e.g. a configuration parameter useServicesDefinition::boolean.

  • Any entry may be a callback rather than an object/definition

  • Display links as <a ...>Click to open</a>

  • Optionally filter to visible layers

  • Reduce features to a single window rather than showing each feature individually

    • By function parameter
    • By definition

Configuration

gfi

| fieldName | type | description | | -------------------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | layers | Record<string, gfiLayerConfiguration> | Maps a string (must be a layer ID) to a behaviour configuration for that layer. | | coordinateSources | string[] | The GFI plugin will react to these coordinate positions in the store. This allows it to react to e.g. the address search of the pins plugin. Please see example configuration for the common use-cases. Please mind that, when referencing another plugin, that plugin must be in addPlugins before this one. | | mode | enum["bboxDot", "intersects"] | Method of calculating which feature has been chosen by the user. bbodyDot utilizes the bbox-url parameter using the clicked coordinate while intersects uses a Filter to calculate the intersected features. Layers can have their own gfiMode parameter which would override this global mode. To apply this, add the desired value to the parameter in the mapConfiguration | | customHighlightStyle | object | If required a user can change the stroke and fill of the highlighted feature. The default style as seen in the example will be used for each part that is not customized. An empty object will return the complete default style while e.g. for an object without a configured fill the default fill will be applied. | | activeLayerPath | string? | Optional store path to array of active mask layer ids. If used with LayerChooser, setting this to 'plugin/layerChooser/activeMaskIds' will result in an info text in the GFI box, should no layer be active. If used without LayerChooser, the active mask layers have to be provided by another plugin or the client. If not set, the GFI plugin may e.g. show an empty list, which may be confusing to some users. | | afterLoadFunction | function (featuresByLayerId: Record<string, GeoJsonFeature[]>): Record<layerId, GeoJsonFeature[]> | This method can be used to extend, filter, or otherwise modify a GFI result. | | gfiContentComponent | Vue? | Allows overriding the GfiContent.vue component for a custom design. Coding knowledge required to use this feature. | | renderType | ('iconMenu' | 'independent')? | Only relevant if window is set to true for at least one layer. Whether the gfi plugin is rendered independently or as part of the IconMenu. Defaults to 'independent'. |

gfi.gfiLayerConfiguration

| fieldName | type | description | | -------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | window | boolean | If true, properties will be shown in the map client. | | geometry | boolean | If true, feature geometry will be highlighted within the map. | | properties | Record<propertyName, displayName>/string[] | In case window is true, this will be used to determine which contents to show. In case of an array, keys are used to select properties. In case of an object, keys are used to select properties, but will be titles as their respective values. | | featureList | featureList? | If defined, a list of available vector layer features is visible when no feature is selected. Only usable if renderType is set to iconMenu and window is set to true. | | exportProperty | string | Property of the features of a service having an url usable to trigger a download of features as a document. | | showTooltip | ((feature: Feature) => [string, string][])? | If given, a tooltip will be shown with the values calculated for the feature. The first string is the HTML tag to render, the second its contents; contants may be locale keys. For more information regarding the strings, see the documentation of the @polar/lib-tooltip package. Defaults to undefined. Please mind that tooltips will only be shown if a mouse is used or the hovering device could not be detected. Touch and pen interactions do not open tooltips since they will open the GFI window, rendering the gatherable information redundant. |

gfi.customHighlightStyle

| fieldName | type | description | | --------- | ------ | ------------------------------------ | | stroke | object | Object for defining the stroke style | | fill | object | Object for defining the fill style |

gfi.customHighlightStyle.stroke

| fieldName | type | description | | --------- | ------ | ------------ | | color | string | Color value | | width | number | Stroke width |

gfi.customHighlightStyle.fill

| fieldName | type | description | | --------- | ------ | ----------- | | color | string | Color value |

gfi.featureList

| fieldName | type | description | | - | - | - | | mode | 'visible' | 'loaded' | Whether to show only features currently visible in the map view's bounding box or to display all loaded features. In the latter case, if you desire to display all features of a layer (seen or not), set its loading strategy to 'all'. | | pageLength | number? | A number >0 that sets the limit to the feature list's length. If the length is surpassed, additional features can be reached by using the pagination that is generated in such a case. If not defined, the list can be of arbitrary length. | | text | (function | string)[] | Array of one to three entries that will produce title, subtitle, and an additional subtitle for the list view. If string, the text item will simply be that feature's value for the denoted property. If function, it's assumed to match the function signature (feature: OpenLayersFeature): string, and the returned string will be used for the text item. | | bindWithCoreHoverSelect | boolean? | If true, the hover/select fields in the core's state will be listened to and interacted with. This will result in a bilateral hovering and selecting of features with the core. Defaults to false. |

Example configuration

layers: {
  [serviceId]: {
    geometry: true,
    window: false,
    properties: {
      keyInService: 'Display Label'
    } // or ['keyInService'], in which case 'keyInService' is also the actual label
  },
},
coordinateSources: [
  // use coordinates from pins plugin, that is, resolve GFI to pin position
  'plugin/pins/transformedCoordinate',
  'plugin/pins/coordinatesAfterDrag'
],
customHighlightStyle: {
  stroke: {
    color: '#FFFF00',
    width: 3,
  },
  fill: {
    color: 'rgb(255, 255, 255, 0.7)',
  },
},

Store

State

If a successful query has been sent and a response has been received, the result will be saved in the store and can be subscribed through the path 'plugin/gfi/featureInformation'. If, however, a query for a layer fails, a Symbol containing the error will be saved in the store instead to indicate the error.

The exact value of featureInformation may vary wildly depending on the service used, but is always given as json representation here.

map.subscribe('plugin/gfi/featureInformation', (featureInformation) => {
  /* Your code here */
})