Pins

Scope

The pins plugin handles marking locations. Embedding processes can then use that coordinate for further steps. The plugin may react to other plugins, especially address searches.

Configuration

The usage of displayComponent has no influence on the creation of Pins on the Map if this plugin is being used.

pins

| fieldName | type | description | | - | - | - | | appearOnClick | appearOnClick? | Pin restrictions. See object description below. | | boundaryLayerId | string? | Id of a vector layer to restrict pins to. When pins are moved or created outside of the boundary, an information will be shown and the pin is reset to its previous state. The map will wait at most 10s for the layer to load; should it not happen, the geolocation feature is turned off. | | boundaryOnError | ('strict' | 'permissive')? | If the boundary layer check does not work due to loading or configuration errors, style 'strict' will disable the pins feature, and style 'permissive' will act as if no boundaryLayerId was set. Defaults to 'permissive'. | | coordinateSource | string? | The pins plugin may react to changes in other plugins. This specifies the path to such store positions. The position must, when subscribed to, return a GeoJSON feature. Please mind that, when referencing another plugin, that plugin must be in addPlugins before this one. | | initial | initial? | Configuration options for setting an initial pin. | | movable | enum["drag", "click", "none"]? | Whether a user may drag and re-click the pin (drag), only re-click it (click) or may only be placed programmatically (none). Defaults to 'none'. | | style | style? | Display style configuration. | | toastAction | string? | If boundaryLayerId is set, and the pin is moved or created outside the boundary, this string will be used as action to send a toast information to the user. If no toast information is desired, leave this field undefined; for testing purposes, you can still find information in the console. | | toZoomLevel | number? | Zoom level to use on outside input by e.g. address search. Defaults to 0. |

Example configuration:

pins: {
  toZoomLevel: 9,
  movable: 'drag',
  appearOnClick: {
    show: true,
    atZoomLevel: 3,
  },
  style: {
    fill: '#003064',
  },
  boundaryLayerId: 'hamburgBorder',
  toastAction: 'plugin/toast/addToast',
  coordinateSource: 'plugin/addressSearch/chosenAddress'
}

pins.appearOnClick

| fieldName | type | description | | - | - | - | | show | boolean | Display marker. | | atZoomLevel | number? | Minimum zoom level for sensible marking. Defaults to 0. |

Example configuration:

appearOnClick: {
  show: true,
  atZoomLevel: 3,
}

pins.initial

| fieldName | type | description | | - | - | - | | coordinates | number[] | Coordinate pair for the pin. | | centerOn | boolean? | If set to true, center on and zoom to the given coordinates on start. Defaults to false. | | epsg | string? | Coordinate reference system in which the given coordinates are encoded. Defaults to the epsg value defined in the mapConfiguration. |

Example configuration:

initial: {
  coordinates: [611694.909470, 5975658.233007],
  centerOn: true,
  epsg: 'EPSG:25832'
}

pins.style

| fieldName | type | description | | - | - | - | | fill | string? | Fill color of the pin. Defaults to blue (#005CA9). | | stroke | string? | Stroke (that is, border) color of the pin. Defaults to white (#FFFFFF). |

Example configuration:

style: {
  fill: '#003064',
  stroke: '#000000'
}

Store

State

map.subscribe('plugin/pins/transformedCoordinate', (pinCoordinate) => {
  /* Your Code. */
})

The pinCoordinate is of type [number, number].

map.subscribe('plugin/pins/latLon', (pinCoordinate) => {
  /* Your Code. */
})

The pinCoordinate is transcribed to latitude / longitude.