This document describes UI components and elements used in RAMP applications, their general uses, and some specific of their functionality when it affects the UI of the application. For a more in-depth explanation of functionality, please see the technical documentation.
- 1. Overview
- 2. Map
- 3. Side menu
- 3.1. Application logo
- 3.2. Application title
- 3.3. Layers panel
- 3.4. Basemap selector
- 3.5. Geo search
- 3.6. Full screen toggle
- 3.7. Export dialog
- 3.8. Share dialog
- 3.9. Touch mode toggle
- 3.10. Help information
- 3.11. About information
- 3.12. Language selector
- 3.13. Plugin section
- 3.14. Build information
- 4. Geo search
- 5. Layers panel
- 5.1. Add layer (Layer Import Wizard)
- 5.2. Group toggle menu
- 5.3. Visiblity toggle menu
- 5.4. Layer Node
- 5.5. Layer Group
- 5.6. Layer flags
- 5.7. Layer symbology (single)
- 5.8. Visibility toggle
- 5.9. Layer Node context menu
- 5.10. Failed layer indicator
- 5.11. Loading layer indicator
- 5.12. Reload layer control
- 5.13. Layer Group context menu
- 5.14. Layer symbology (multiple)
- 5.15. Layer visibility set
- 5.16. Layer Info section
- 5.17. Layer reorder
- 5.18. Layer settings panel
- 5.19. Layer metadata panel
- 6. Enhanced Table
- 7. Details panel
The default view of the application.
The core component of the application is the Map and it consists of the basemap, all the data rendered on top of the basemap, and a number of additional components and control clusters displayed on top of the data.
The Map itself acts at the outer container for the whole application where no part of the UI can be rendered beyond this boundary - the Outer shell. The host pages is responsible for deciding on the size of the application container and can constrain or modify it as will.
All the feature and components of the UI - excluding the map and visualized data - are rendered inside the Inner shell, a container located inside the Outer shell. The Inner shell can also be manipulated by the host page for the purposes of creating map which seem to extend beyond active area of the page to which all the functionality is confined. The earlier designs of the Climate Portal application made use of this feature.
The main application bar is used for accessing the Side menu, Basemap selector, Layers panel, and Geo search. The Layers, Details and Import wizard panels open underneath the Main application bar and the name of the currently open panel is displayed on the left side of the bar.
The default configuration of the Main application bar will display the Side menu, Geo search, and Layers panel controls.
The Basemap selector control is shown only when the Layers panel is expanded.
The Side menu, Geo search, and Layers panel controls can be independently hidden. When only the Side menu control is shown, the Main application bar collapses to the left. The bar will expand if the user opens one of the main panels (Layers or Details).
if the Main application bar is fully hidden, the main panels open at the top of the viewer Inner shell container.
The North Indicator is an arrow image (
When the pole is inside the current extent, it's marked by a flag icon; the North indicator is hidden. The icon marking the north pole can be customized through the config.
In the Mercator projection, the North indicator sits motionless pointing straight up in the middle of the top edge of the viewport.
The purpose of the North indicator is easily learnable as it's clear that indicator movements and extent changes are connected. It's also possible to pan the map, following the indicator until the geographic pole is reached where the indicator transitions into the pole icon.
The overview map provides glanceable information on where the main map is situated. The Overview map can be collapsed by the user.
On narrow (mobile) layouts, the Overview map is completely removed, so not to take up valuable space. It can also be disabled through the config.
Features of the vector-based layers (service and file) trigger on-hover tooltips to be shown. The tooltips are transient, and are removed when the mouse cursor moves away from the feature.
By default, the tooltip shows a symbology icon along with the value of a feature's main field as specified in the config. It is possible to show any custom content inside a tooltip including static images or even dynamic charts.
The Map navigation cluster is located in the lower right corner of the Inner shell container. It contains controls performing actions on the map - such as zooming, gelocating, re-centering the map over the home extent (usually the entirety of Canada) - and triggering some of the higher level functionality - such as opening the Geo search, Side menu, Layers panel, Basemap selector, Full screen toggle, and Help.
The default configuration includes just the Full screen toggle, geo-location, Home extent, and Help controls. All other controls duplicate functionality of the Main application bar and can be used if the Main application bar is hidden.
All controls in the Map navigation cluster can be independently hidden (expect for zoom in/out - they are hidden together).
The optional basemap attribution and logo of the currently selected basemap are displayed in the lower left corner. Each basemap can be provided with a custom attribution logo or text through the config.
There is no additional customization for this component, but the host page can forcefully hide and replace it with a custom implementation.
For legal ramifications of removing the attribution text read the following: https://developers.arcgis.com/terms/attribution/
The current map scale (both metric and imperial) is displayed in the right lower corner along with the current coordinates of the mouse cursor on the map in the spatial reference of the basemap (in this case it'd be Lambert coordinates). The coordinates update dynamically as the user moves the mouse.
There is no customization for these components, but the host page can forcefully hide and replace them with a custom implementation.
The application-level side menu can be opened from the Main application bar or from the Map navigation cluster. It contains various application settings such as the current language selector, full screen toggle, and touch mode, high-level functionalities such as the basemap selection, map export, bookmark sharing, help, and any loaded interactive plugins, and build information. All items on the Side menu except for the Build information are optional and their presence is dictated by the config.
An optional image can be displayed as the application logo at the top of the side menu to provide the application branding. The logo image can be hidden through the config as well.
An optional application title can be displayed underneath the application logo on the side menu.
This menu option closes the side menu and toggles the Layers panel. A checkmark icon on the right side is displayed if the Layers panel is already open.
This menu option closes the side menu and opens the Basemap selector menu in its place where the user can change the current basemap. The basemaps are grouped by their projections and switching to a different projection will trigger a map reload.
Displays the name of the basemap projection group. This name can be set through the config.
A checkmark icon is displayed in the right upper corner of a basemap preview image indicating the currently selected basemap.
Each basemap will display a dynamically preview image to give the user an idea what a basemap looks like. Preview images are directly constructed from the basemap tile images of a specific location. These locations are hard-coded and different for each projection.
Displays the name of the basemap. This name can be set through the config.
The basemap description toggles between displaying the basemap preview image and its description text.
Display the basemap description text set in the config. If the text is long, the basemap element will expand vertically to accommodate the entire description.
This menu option closes the side menu and opens the Geo search panel.
This menu option toggles the Full screen mode where the application is maximized to take up all available screen space. A checkmark icon on the right side is displayed if the Full screen mode is already enabled.
This menu option closes the side menu and open the map Export dialog. The map Export dialog lets the user save the image of the map with all the data rendered on top of it exactly as seen on the screen (if allowed by the CORS policy).
This control toggles the Export setting panel where the user can select what elements should be included in the export image and download that image as a PNG file.
- Title: when checked, the entered title text will placed just above the map on the export image and prefixed to the download file name
- Map: when checked, the map will be included in the export image
- North arrow and scalebar: when checked, the north arrow and scalebar will be included in the export image just underneath the map
- Legend: when checked, the legends (or symbology stack) of all the visible layers will be included underneath the north arrow and scalebar in the export image
- Footnote: when checked, an optional footnote text supplied by the config will be added after the legend image
- Timestamp: when checked, a timestamp will be be placed at the very bottom of the export image
The generation of the export image starts as soon as the dialog is opened and the progress is indicated by the progress bar at the top of the dialog.
If provided, the title will be shown at the top of the export image and prefix to the download file name. If not provided, the file name follows the following pattern: <map-name> - <timestamp>.png.
Close the map Export dialog. If the export image was still generating, the result will be lost.
After the export image is generated, the user needs to click the Download button to download the generated image file. The button is disabled while the image is being prepared.
In some cases, the export image cannot be downloaded because of the CORS policies. In such cases, the application with display the following notice to the user:
Modern browsers (IE11 is not a modern browser) allow to save canvas images as PNG files.
The image of the map with all the data rendered on top of it as seen on the screen. This image is rendered as two separate layers - basemap and data - which are merged together.
The map scale is placed below the map image on the left side and is identical to the Scalebar and mouse coordinates component without the mouse coordinates part.
The north arrow is placed below the map on the right side and it's pointing to the geographic north pole.
The Map export legend contains all the symbology (including nested symbology of Dynamic layers) of layers currently visible on the map. If the symbology list is long, it will be broken and wrapped in a number of columns to minimize the size of the export image .
The Map export footer text is placed after the map and legend images. It can be used for providing descriptions of the map and data layers, legal disclaimers or some other information.
A timestamp specifying the exact time when the export image was generated is placed at the very bottom of the export image. This can be helpful in distinguishing similar export images from each other.
The Share dialog is used to generate a shareable URL of the current map state with selected datasets. It can be accessed in the main menu. If a Google API Key is provided in the config, a short link can be generated. Once the user highlights the link, the link can be copied as normal text (right click -> copy or Ctrl+C)
The Touch mode increases button sizes (mostly inside the Layer panel and Map navigation cluster) and makes context menu controls visible by default to improves the experience for touch users.
The Help dialog contains information on functionalities available within the application and how they are used.
The user can search through all the text content by typing keywords into the help search field. Help topics with matches are automatically expanded, and topics with no matches are hidden. Clearing the search field reset the Help dialog.
The content is broken into thematic collapsible topics with all the sections collapsed initially. The user can expand as many or as few help section as needed.
Opens a dialog window which provides additional information about the current application. This information can supplied either through the config or a Markdown file hosted alongside the RAMP deployment.
The Language selector sections displays a list of supported languages the user can switch to. The current language is marked by a checkmark icon to the right of the language name. When the language is change, all the application UI elements will be re-rendered.
The Plugin section list all plugin functionalities which can be launched from the side menu.
The Build information section displays information about the current build.
This displays the application version number (major.minor.patch) and the commit hash or the latest commit.
This is an exact UTC timestamp when the build was made.
This is a link to the main fgpv-vpgf repository where the core source code is stored. There are additional related repositories (like geoApi, and plugins) listed on the RAMP2/FGP Viewer organization page.
The functionality for this component is provided by RAMP/geosearch plugin which uses Geogratis services. It's possible to provide a different implementation of this plugin which can make use of any other search services.
This component allows the user to search for places in Canada. When activated, it replaces the Main application bar with an input field for search keywords and closes the main and secondary panels. The search results are displayed directly below the Geo search bar.
There are three search modes: keyword, FSA, and latitude / longitude.
When a keyword is typed, a request is sent to Geogratis services and a list of results with this keyword is be displayed. While the request is being fulfilled, the indeterminate progress bar is displayed along the bottom edge of the Geo search bar.
The user can filter search results either by province or result type (lake, town, military area, etc.).
This will clear search filters.
Each result consists of:
- location name (search keyword will be highlighted)
- location province
- location type (lake, island, city, town, etc.)
Click on any results will zoom and center the map on this location, and also place a marker at the location coordinates.
This will filter search results based on the current map extent - showing only results visible on the map. Panning and zooming the map will affect the search results listed.
A forward sortation area (FSA) is a way to designate a geographical unit based on the first three characters in a Canadian postal code. All postal codes that start with the same three characters—for example, K1A—are together considered an FSA.
A search of an FSA will return a list of results in vicinity of that area.
When searching by an FSA, the very first result will be a location of that FSA itself.
A search of lat/long coordinates will return results in vicinity of that map point.
When searching by coordinates, the very first result will be a location of those coordinates.
The Layers panel is the main panel in the application and it displays a list of all the layers added to the map and their state. This panel is also can be referred to as "Layer selector", "Table of contents" or "Legend".
Apart from Layer nodes and Layer groups describing layers added to the map, the Layers panel can also contain arbitrary plain text (markdown, HTML markup), titles, images, blocks that look like proper layers but do not control anything on the map, groups that don't belong to Dynamic layers, and visibility sets. These sections are referred to as Layer info sections.
The legend comes in two flavours - structured and autogenerated.
The Structured legend lets the config author define the ordering of legend blocks, their names, specify custom Symbology stacks, put things into regular groups or Visibility sets, hide layers from the legend, and have a single legend block controlling several layers. Lots of power options, plenty of opportunities to break up the config. All this should be used for thematic maps (i.e. maps that tell a certain story with the data).
The Autogenerated legend is simple - it takes the layer list and turns it into a legend, one to one correspondence (one regular legend block per one layer).
Note: The config uses the term autopopulate when indicating the type of legend in an application.
It should be pointed out the autogenerated legend - after it was generated during the config parse - is technically a structured legend. It uses a subset of elements which can be used in the structured legend.
The only notable difference between the two is ability to reorder and layers in the autogenerated legend. Structured legends are immutable (apart from removing user-added layers - this is allowed by both legend types and cannot be disabled, yet). The autogenerated can be reordered.
| Supported Services | Supported File Types |
|---|---|
| OGC WFS v3 | CSV |
| OGC WMS | GeoJSON |
| ESRI Feature Layer | Zipped ShapeFile |
| ESRI Dynamic Layer | |
| ESRI Tile Layer | |
| ESRI Image Server |
If you selected Import File, click on the Choose A File button and select your local file (or alternatively drag and drop), or provide a URL to the file (as shown on the left).
If you selected Import Service enter the service URL (as shown on the right).
Click the Continue button to proceed.
This step works the same for both file and service based layers.
- The Viewer will try to predict the dataset type. If you are satisfied with this, click the
Continuebutton to proceed (Scenario 1). - If it is incorrect, select the option from the dropdown with the correct type (Scenario 2). Then click
Continueto proceed. - If the import wizard warns you that the selected file/service type is incorrect, double check that the selected type is correct and make any nescessary changes. If this doesn't work, double check that the source is not corrupted.
Note: the drop down menu in Scenario 2 will look different depending on whether you are using a file or service. If you are using a service, it will look different depending on the type of service.
Depending on the type of dataset being loaded, the following parameters can be set in this final phase:
- Layer Name : the layer name as it appears in the legend
- Primary Field: the field to be used for identify (and hovertips if custom field is not set)
- Tooltip Field: the field to be used for hovertips
- Lat/Long Fields: specify the columns that contain the Latitude and Longitude values, used to derive the point location on the map
- Color: the color that points/lines/polygons will be rendered in
- Sublayers: sublayers to be included as top level items in a
- legend group (for dynamic layers)
- if the dynamic service URL contained an index at the end, a corresponding sublayer will be preselected
- the user has an shortcut option of selecting all sublayers or deselection currently selected
- if a single sublayer is selected, the user can choose to not display this sublayer inside a group
- wms legend block (for wms layers)
- legend group (for dynamic layers)
- Group Name: as it appears in the legend (if more than one sublayer is selected, or the user chose to group a single sublayer)
RAMP File Based Layers
| File Type | Lat/Long Fields | Layer name | Primary Field | Tooltip Field | Color |
|---|---|---|---|---|---|
| CSV | ✔ | ✔ | ✔ | ✔ | ✔ |
| GeoJSON | ❌ | ✔ | ✔ | ✔ | ✔ |
| Zipped ShapeFile | ❌ | ✔ | ✔ | ✔ | ✔ |
Service Type
| Layer Type | Layer Name | Primary Field | Tooltip Field | Color | Select Sublayers | Group Name |
|---|---|---|---|---|---|---|
| OGC WFS | ✔ | ✔ | ✔ | ✔ | ❌ | ❌ |
| OGC WMS | ✔ | ❌ | ❌ | ❌ | ✔ | ❌ |
| ESRI Feature Layer | ✔ | ✔ | ✔ | ❌ | ❌ | ❌ |
| ESRI Dynamic Layer | ❌ | ❌ | ❌ | ❌ | ✔ | ✔ |
| ESRI Tile Layer | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| ESRI Image Server | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
The Group toggle menu is located at the top of the Layers panel and allows the user to collapse or expand all the Layer groups at the same time.
The Visibility toggle menu is located at the top of the Layers panel and allows the user to change the visibility of all layer and groups at the same time (if allowed by the config).
A Layer node represents a single layer or a sublayer of a Dynamic layer. Usually, a Layer node has a Symbology stack, layer name, Layer flags, Layer Node context menu, and Visibility toggle. In Structured legend, most of these elements can be customized through the config.
Scale-dependent layers will only render data on the map at certain zoom levels. Out-of-scale layers are rendered with a zoom in or zoom out toggle instead of the regular visibility toggle.
If the layer's visibility is toggled off, it will be displayed with an empty visibility checkbox even if the layer is out of scale. If the layer is made visible, the visibility toggle will be replace the zoom in/out button to indicate its out-of-scale status.
Layer groups organize Layer nodes and Layer info sections into collapsible sections. Anything can be put inside a group, including other groups (group nesting). Nesting them more than ten levels deep will not produce any changes in the UI - it's a flat list from there on.
When the visibility of a group changes, the current values is propagated to all its children replacing their visibility values with the new one.
There is an ongoing discussion about changing how groups propagate their visibility values. Read more here: fgpv-vpgf/fgpv-vpgf#3152 (comment)
By default, Dynamic layers are renders as groups.
If a Dynamic layer does not support children opacity, the logic applying opacity is different and all children will have their opacity controls disabled and display a jump link to its parent unless it's single entry collapsed. Read the following issue for more details: fgpv-vpgf/fgpv-vpgf#2131 (comment)
Note: Jump link should never point to group blocks not belonging to this layer record.
Each Layer node has a set of layer flags displayed underneath the layer name:
- Bounding box: indicates if the layer's bounding box is shown on the map
- Viewable data: indicates if the layer has data which can be viewed in a table by clicking on the body of the node
- Feature layer: indicates this is a Feature, WFS layer and file-based layers added through the config (also shows a number of features in the tooltip)
- User-added layer: indicates this layer has been added by the user at runtime
- Dynamic layer: indicates this is a Dynamic layer (also shows a number of features in the tooltip)
- Raster layer: indicates this is a Tile or WMS layer
- Out of scale: indicates this layer is out of scale and no data is rendered on the map
Layer symbology consisting of a single element is a special case of the Layer symbology (multiple).
The collapsed symbology stack acts as a toggle. When clicked, it will expand the stack and display the solo item of the stack underneath the layer name. At this point the toggle is rendered visible as a "close" icon. When clicked, it collapses the symbology stack back.
A layer's symbology is a collection of image-label pairs explaining features available in the layer. Internally, it's referred to as a "symbology stack" with the "stack" bit describing its vertical orientation when rendered in the UI.
Two style options are available for symbology stacks:
- icons
- images
All symbology images are wrapped into SVG containers sized to 32x32 pixels and rendered in a vertical list with the icon followed by its label.
This style is used by default for all layer types except WMS layers.
All symbology images are wrapped into SVG containers sized to fit the image. All containers will be sized as the largest image in the collection or upto the width of the main panel. The label is rendered underneath the image, similar to a caption.
This style is used by default for WMS layers as they symbology image usually already contain lists of legend items with labels.
The visibility toggle is a checkbox control indicating if the layer is visible on the map. For out-of-scale layers, this controls is replaced by the zoom in/out control. See Scale-dependent layers. This control is always visible unless hidden through the config.
The Layer Node context menu can be opened by clicking the "three horizontal dots" icon on any Layer node (only visible when hovering over a node or if the Touch mode is enabled).
Not all options shown below might be available on all layers.
- Metadata: opens the Layer metadata panel
- Settings: opens the Layer settings panel
- Datatable: open the Table panel panel and displays layer data.
- Legend: expands layers's symbology stack
- Zoom to Layer Boundary: zooms the map to the layer boundary
- Reload: reloads the layer by removing it from the map and adding it back (will also reload any linked layer nodes)
- Remove: removes the layer from the map (a notification is displayed upon removal with an option to restore the remove layer)
If a layer fails to load, a sad face icon is displayed in the place of its symbology stack and a 4px-wide vertical red line is drawn at the right edge of the Layer node; its visibility toggle is replaced with a "Reload" button which will attempt to reload the layer if clicked.
In Autogenerated legend, an additional "Remove" control is displayed which will remove the layer from the legend if clicked.
While a layer is loading, a happy face icon is displayed in the place of its symbology stack and an indeterminate progress back is shown at the bottom edge of the Layer node.
A "Reload" control is shown in the place of the Visibility toggle while a layer is loading. It will remove and re-add the layer back to the map if clicked.
The Layer Group context menu can be opened by clicking the "three horizontal dots" icon on any Layer group (only visible when hovering over a node or if the Touch mode is enabled).
Not all options shown below might be available on all layer groups.
- Metadata: opens the Layer metadata panel [only available for root-level Dynamic groups]
- Settings: opens the Layer settings panel
- Zoom to Layer Boundary: zooms the map to the layer boundary
- Reload: reloads layers inside the group by removing them from the map and adding it back (will also reload any linked layer nodes)
- Remove: removes the group and all the nested layers from the map (a notification is displayed upon removal with an option to restore the remove layers)
A layer's symbology is a collection of image-labels pairs explaining features available in the layer. Internally, it's referred to as a "symbology stack" with the "stack" bit describing its vertical orientation when rendered in the UI. The symbology stacks can be shown in the Layers panel, Details panel, and Enhanced table.
When a symbology stack with more than a single icon is rendered, it is displayed as at most three almost overlapping icons (regardless of the actual number of symbols and the rendering style). The three icons will fan out when hovered over to indicate potential interactivity.
If rendered in the main panel, the stack can be expanded into a full list by simply clicking on it (or selecting the "Legend" option from the layer menu).
A Layer visibility set is a convenience for the user when at most a single element from a set can be visible at a time - it's possible to have all elements in the set turned off. They groups things together, but there is no header element. It's also not possible to nest visibility sets directly - it just doesn't make sense. It is possible to put a set into a group and put that group into another set though.
The visibility set is rendered a bit differently from a group - it uses radio buttons instead of checkboxes as visibility controls. This helps to convey the "one of" nature of a visibility set. There is also some highlighting to clearly mark which legend blocks which belong to a set if there are two sets placed one after another for example.
A visibility set will remember the last selection when its parent container is turned off and on again.
Info sections are pieces of static content which can be added between any other legend blocks. There are four types: text, title, image, and unbound layer.
- Text: accepts plain text, Markdown or HTML markup
- Title: accepts plain text; renders as text, but with a larger font size
- Image: adds an image to the legend; all common formats are supported
- Unbound layer: copies some of its looks from the regular legend block: it has a name and a symbology stack
Layers can only be reordered in the autogenerated legend but only inside their respective layer type groups (Feature layers and all other layer types). In structured legends the layer Reorder toggle will be hidden.
When reordering, the section of the legend where the layer cannot be moved will be de-highlighted.
This is a secondary panel which opens to the right of the Layers list. It's available for both Layer nodes and Layer groups, although not all the options are available in all cases (all options can also be hidden through the config).
Indicates which layer the Setting panel belongs to.
Same as the 5.8 Visibility toggle. Available for both layer nodes and groups.
This controls the opacity of a individual layer (including Dynamic sub-layers), a Dynamic layer and all of its sub-layers if applicable, or all the layers nested in a group.
This controls the visibility of the layer bounding box on the map. Available only for individual layers and Dynamic sub-layers; not available for simple groups.
This indicates if the selected layer should be queried for results when the user clicks on the map to get feature details. Not available for simple groups.
The snapshot mode is available for Feature layers only. When enabled, all the data for this layer will be downloaded to the app. This can increase layer performance if the service latency is big, but will reduce performance if the layer has massive amounts of data.
This allows the user to select one of the available WMS styles. Only available for WMS layers.
Same as the Reload layer control. Available for both layer nodes and groups.
This is a secondary panel which opens to the right of the Layers list. Only available for layers with metadata support.
Indicates which layer the Metadata panel belongs to.
Layer Metadata is fetched from the layer service as XML, parsed, and the result is rendered as HTML markup. There are three main sections: abstract, Contact information, and Metadata link.
The metadata panel can also be opened in a separate dialog which takes up a major portion of the screen. This is useful when there is a lot of metadata to display.
The enhancedTable is an accessible way to visualize layer attributes. Each row corresponds to a layer feature.
Displays the name of the table. This name can be set through the config.
The filter status gives the user three pieces of information:
- The range of currently visible rows
- The number of records that can be scrolled through
- The number of records that were filtered out (if any)
- rows 6 - 12 are currently visible
- 15 records can be viewed in the table just by scrolling
- there are 15 records total for the corresponding layer (no filters are applied)
- rows 1 - 6 are currently visible
- 10 records can be viewed in the table just by scrolling
- there are 15 records total for the corresponding layer (5 records are filtered out either through column filters or symbology toggles)
The details button is available on each row of the table, and opens up the details panel for the corresponding layer feature.
The zoom button is available on each row of the table, and zooms to the corresponding layer feature on the map.
Text filters allow the user to filter row records by making sure that the filter is a substring of the rows' data at that column:
- e.g. typing
gainto the filter above will match for the second and third records becausegais a substring of "Korean Gas" and "Enagas"
Number filters allow the user to filter row records by making sure that the rows' data at that column fall into the range specified by that filter:
- e.g. typing
3into the min field and4into the max field will match for the first and second record because3and4fall into the range3-4 - ranges are inclusive
- filter will also work with only one of
minormaxfields filled out
Date filters let the user input dates by clicking on the calender icon to use a datepicker GUI or by typing dates into the input field.
Date filters allow the user to filter row records by making sure that the rows' data at that column fall into the date range specified by that filter:
- e.g. selecting
2015-07-07for the date min field and a date max of2017-07-07for the date max field will match for the last record because only2016-10-05falls into the range2015-07-07-2017-07-07 - ranges are inclusive
- filter will also work with only one of
date minordate maxfields filled out
Selector filters allow the user to filter row records by making sure that the rows'data at that column fall into one of the categories specified by the dropdown selector GUI (shown on the right).
The global search allow the user to filter row records by making sure that the search term is a substring of the rows' data at one or more columns.
Global search can be disabled in the config.
Opens a menu that allows the user to toggle the column visibilities on or off.
Clears any column filters that are currently set.
Note that this does not:
- clear the global search
- clear any symbology toggles that filter the table
Applies the table filters to the map, so that only layer features that are displayed in the table are displayed on the map.
- Split View:** table height is half of the map height
- Maximize:** table height takes up the full height of the map
- Filter by extent: table automatically updates on map extent change to display only layer features within the current extent
- Show filters: toggling this option off will hide all column filters
- the user will not be able to use or change column filters while this option is toggled off
- columns themselves will still be displayed and column filters will remain applied
- Print: takes the user to a printer friendly page displaying table data
- this option is disabled by default
- it is the map author's responsibility to enable it in the config
- Export: Exports table data to CSV
** Note: Not available in mobile view because table will take up whole height and width of the map by default
Closes the table.
Clicking the right arrow on a column makes it swap places with the column to the right of it. Clicking the left arrow makes it swap places with the column to the left of it.
The right arrow is disabled for columns that are at the right end of the table, and the left arrow is disabled for columns that are at the left end of the table.
Columns can also be reordered by dragging and dropping.
Displays the name of the column. This name is generated automatically using layer data but can also be set in the config.
Click on the column name to sort columns.
- An up arrow indicates that the column data is being sorted in ascending order (for numerical data) and in alphabetical order (for text data)
- A down arrow indicates that the column data is being sorted in descending order (for numerical data) and in reverse alphabetical order (for text data)
- No arrow indicates that no column sort is being applied to the current column
- You can use
Shift + clickto sort multiple columns at once
The Details panel lists features the user clicked on (identify results). When the user clicks anywhere on the map, all queryable layers are checked for features at the click point. Based on the identify mode, an identify marker is added to the map and the Details panel is open to show the results.
A list of all queryable layers is displayed on the left side of the Details panel. The list is collapsed such that only the layer symbology stacks are visible. A circle-badge with a number of valid results is shown in the lower right corner of the corresponding symbology stacks.
When hovered over, the list will expand to the right to reveal layer names. The user can click on any of the layers with valid results to see the results in the main part of the Details panel.
This toggle collapses the Details panel without while preserving the result list; the user can restore the panel by clicking the toggle again. The Details panel toggle button will stay in the Main application bar until the details panel is explicitly closed.
A 4px-wide blue vertical line is displayed on the right side of the layer whose identify results are being displayed in the Details panel. The user can change the selection by clicking on any other layer with valid results.
The metadata panel can also be opened in a separate dialog which takes up a major portion of the screen. This is useful when there is a many results to display. In this view, only the results from the currently selected layer are displayed.
Queryable layers with no identify results are rendered with their symbology stacks and layer names faded-out.
The Zoom-to button is displayed when the identify result is hovered over (or when the Touch mode is enabled). This will zoom the map and center on the corresponding feature.
Results are rendered as collapsed sections with just the name of the feature and its symbology icon visible. Initially, when all results are collapsed, all the corresponding features are highlighted.
If the user expands a result, the corresponding feature on the map is highlighted while others are dimmed (depending on the identify mode). When subsequent results are expanded, their corresponding features are highlighted as well.
When the user clicks the map, an identify marker is placed at the click point (depending on the identify mode). This marker will always be visible while the layers are being queried. After that,
- if the currently selected layer is a vector-based layer, the marker will be removed and all the results in this layer will be highlighted
- if the currently selected layer is not vector-based, the identify marker will remain on the map
The identify mode specifies which actions, if any, are performed when the map is clicked. The identify mode can be set to any combination of the following options (or none at all):
- query
- marker
- highlight
- haze
- details
Runs the identify query and pipes the available results through the identify API endpoint.
Adds a graphic marker at the point of a mouse click. The marker will be set on the map even if the Query option is not set.
Highlight the identify results on the map. If the Marker mode is set, highlighted features will replace the marker.
Only works when Query is set.
Dehighlights all other layers and features except the identify results (if Highlight is set) or the marker (if Marker is set).
The haze will not be applied if neither Marker nor Highlight is set.
Display the identify results in the details panel.
This option only works in conjunction with the Query option. Without Query, there will be no results to display in the details panel.
6. Enhanced Table
The
enhancedTableis an accessible way to visualize layer attributes. Each row corresponds to a layer feature.6.1. Table Title
Displays the name of the table. This name can be set through the config.
6.2. Scroll and Filter Status
The filter status gives the user three pieces of information:
Example 1:
6 - 12 of 15 records shownExample 2:
1 - 6 of 10 records shown (filtered from 15 records)6.3. Details
The details button is available on each row of the table, and opens up the details panel for the corresponding layer feature.
6.4. Zoom
The zoom button is available on each row of the table, and zooms to the corresponding layer feature on the map.
6.5. Column Filters
6.5.1. Text Filter
Text filters allow the user to filter row records by making sure that the filter is a substring of the rows' data at that column:
gainto the filter above will match for the second and third records becausegais a substring of "Korean Gas" and "Enagas"6.5.2. Number Filter
Number filters allow the user to filter row records by making sure that the rows' data at that column fall into the range specified by that filter:
3into the min field and4into the max field will match for the first and second record because3and4fall into the range3-4minormaxfields filled out6.5.3. Date Filter
Date filters let the user input dates by clicking on the calender icon to use a datepicker GUI or by typing dates into the input field.
Date filters allow the user to filter row records by making sure that the rows' data at that column fall into the date range specified by that filter:
2015-07-07for the date min field and a date max of2017-07-07for the date max field will match for the last record because only2016-10-05falls into the range2015-07-07-2017-07-07date minordate maxfields filled out6.5.4. Selector Filter
Selector filters allow the user to filter row records by making sure that the rows'data at that column fall into one of the categories specified by the dropdown selector GUI (shown on the right).
6.6. Table Controls
6.6.1. Global Search
The global search allow the user to filter row records by making sure that the search term is a substring of the rows' data at one or more columns.
Global search can be disabled in the config.
6.6.2. Toggle Column Visibilities
Opens a menu that allows the user to toggle the column visibilities on or off.
6.6.3. Clear Column Filters
Clears any column filters that are currently set.
Note that this does not:
6.6.4. Apply Table Filters to Map
Applies the table filters to the map, so that only layer features that are displayed in the table are displayed on the map.
6.6.5. Table Menu
** Note: Not available in mobile view because table will take up whole height and width of the map by default
6.6.6. Close table
Closes the table.
6.7. Column Reorder
// TODO add pictures of right and left arrows
Clicking the right arrow on a column, makes it swap places with the column to the right of it. Clicking the left arrow, makes it swap places with the column to the left of it.
The right arrow is disabled for columns that are at the right end of the table, and the left arrow is disabled for columns that are at the left end of the table.
Columns can also be reordered by dragging and dropping.
6.8. Column Title
Displays the name of the column. This name is generated automatically using layer data but can also be set in the config.
6.9. Column Sort
// TODO add pictures of up and down arrows
Click on the column name to sort columns.
Shift + clickto sort multiple columns at once