Skip to content

Latest commit

 

History

History
151 lines (126 loc) · 7.48 KB

userguide.md

File metadata and controls

151 lines (126 loc) · 7.48 KB

Introduction

Map viewer widget using OpenLayers. It can receive Layers or Point of Interest data and display them on the map.

Settings

  • Initial Location: Decimal coordinates where map will be centered on load (e.g. 52, 5). Leave this setting empty if you don't want to center the map at init. Remember to change the initial zoom level if you provide an initial location. This setting can be configured using the button that is displayed inside the widget when in editing mode.
  • Initial Zoom Level: Initial zoom level. From 1 to 22, where '1' represents the furthest level and '22' the maximum zoom level.
  • Min Zoom: Minimal zoom level.
  • Layers Widget: Widget to use for allowing user to switch between layers.
  • Use Clustering: Mark this option to use clustering for displaying map features.

Wiring

Input Endpoints

  • Layer Info: Add or remove layers to the map, in addition to changing its base layer. The Layer Info endpoint receives a JSON with two fields: action and data

    • action: This field indicates the action to be executed with a layer. There are four available actions:
      • addLayer: Adds a layer to the map. This action requires the id data field to be set.
      • removeLayer: Removes a layer from the map. This action requires the id data field to be set.
      • setBaseLayer: Change the base layer of the map. This action requires the id data field to be set.
      • updateLayer: Updates a layer from the map. This action requires the id data field to be set. Current options available for updating are: opacity, visible and url.
    • data: This field contains all the data needed to identify to which layer the action will be performed, and, in the case of the addLayer action, to define and configure the layer.

    In order to create the layer, a layer type must be defined, aside from the desired settings for the layer source. E.g.:

    {
    "action": "addLayer",
    "data": {
        "id": "My Layer",
        "type": "ImageWMS",
        "url": "UrlToMyWMSService"
    }
}

    Refer to the OpenLayers Documentation to check available types and options

  • Insert/Update PoI: Insert or update a Point of Interest. This endpoint supports sending just a PoI or severals through an array. Each PoI is composed of the following fields:

    • id (required): id used for identifying this PoI. Used in the update and delete operations for locating the associated PoI.
    • currentLocation (deprecated, required if location not used):
      • longitude (required):
      • latitude (required):
      • system: geodetic datum system (usually WGS84, it can be UTM)
    • data: Data associated with the point of interest, used by the PoI selected output endpoint.
    • icon: URL of the icon to use for the marker or an object describing the icon to use. Available options:
      • anchor: Anchor position. Default value is [0.5, 0.5] (icon center).
      • anchorXUnits: Units in which the anchor x value is specified. A value of 'fraction' indicates the x value is a fraction of the icon. A value of 'pixels' indicates the x value in pixels. Default is 'fraction'.
      • anchorYUnits: Units in which the anchor y value is specified. A value of 'fraction' indicates the y value is a fraction of the icon. A value of 'pixels' indicates the y value in pixels. Default is 'fraction'.
      • opacity: Opacity of the icon (range from 0 to 1). Default is 1.
      • scale: Scale. Default is 1.
      • src: Image source URI.
      • fontawesome: Options of the Font Awesome icon to use for the marker. Supported options:
        • glyph: a glyph of the icon. Default is fa-star.
        • form: icon form (icon, circle, box, marker). Default is marker.
        • size: pixel size of the icon. Default is 16 px.
        • color: icon color. Default is same as the stroke color. CSS3 color, that is, an hexadecimal, rgb or rgba color. Default is white.
        • fill: fill color. CSS3 color, that is, an hexadecimal, rgb or rgba color. Default is blue.
        • stroke: stroke color. CSS3 color, that is, an hexadecimal, rgb or rgba color. Default is white.
        • strokeWidth: width of stroke. Default is 3.
        • radius: radius of marker.
        • margin: margin between icon and marker.
    • iconHighlighted: icon configuration to use when the PoI is selected. Works in the same way than the icon field.
    • infoWindow: content (using HTML) associated with the PoI.
    • location (required if currentLocation not used): a GeoJSON geometry. e.g. {"type": "Point", "coordinates": [125.6, 10.1]}
    • minzoom (integer): Minimum zoom level to display this PoI.
    • maxzoom (integer): Maximum zoom level to display this PoI.
    • selectable (boolean): true if the user should be able to select this PoI (default behaviour).
    • style: Style to use for rendering. Supported options:
      • fill:
        • color: fill color. CSS3 color, that is, an hexadecimal, rgb or rgba color.
      • stroke:
        • color: stroke color. CSS3 color, that is, an hexadecimal, rgb or rgba color.
        • width: stroke width in pixels.
    • iconHighlighted: Style to use for rendering the PoI when it is selected. Works in the same way than the style field. The configuration from style will be used if not provided.
    • subtitle: subtitle associated to the PoI
    • title: title associated to the PoI
    • tooltip: text to be displayed as tooltip when the mouse is over the PoI.

  • Insert/Update Centered PoI: Insert or update a PoI and change the viewport centering the map on it. Uses the same format used by the Insert/Update PoI endpoint.

  • Delete PoI: Removes a point or more point of interests from the map.

  • Replace PoIs: Replace all the rendered PoIs by the ones provided in the event. Uses the same format used by the Insert/Update PoI endpoint.

Output Endpoints

  • PoI selected: A PoI has been selected on the map.

Usage

This widget can be used standalone in order to display a map. The widget can be fed Point of Interest data via other Wirecloud components such as the ngsi-entity2poi-operator to show them on the map.

Reference

Copyright and License

Copyright (c) 2016-2017 CoNWeT Lab., Universidad Politecnica de Madrid
Copyright (c) 2017-2021 Future Internet Consulting and Development Solutions S.L.
Copyright (c) 2021-2024 Kazuhito Suda

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.