User Interface

The Gisquick clients are designed with a goal to put together minimal set of functions for useful generic responsive web and mobile friendly mapping application.

The major part of the clients User Interface (UI) is occupied by map canvas (1). On the left side is located content management tools (2) which is possible to hide by button on its right side (3). Corners of map canvas are filled by (from left-bottom corner, clockwise) by map scale (4), tools (5), user menu (6) and zoom tools (7). In the bottom part is located statusbar showing current scale, projection and map coordinates of the cursor (8).

../_images/gisquick-ui.svg

Figure 1: Gisquick user interface description.

Content management tools

Basic project metadata - project description - is accessible by question-mark, see figure below.

../_images/project-info.svg

Figure 2: Project description.

Content management widget is split into three major tabs:

  • Base Layers

  • Overlay Layers

  • Legend

../_images/content-tabs.png

Figure 3: Content tabs.

Base Layers tab allows switching base layers in map canvas. The list of base layers is defined by publication process as described in Project publishing section.

../_images/ui-base-layers.png

Figure 4: Switching between base layers.

Overlay Layers tab allows switching between topics (layer groups), see Project publishing section, or controlling overlay layers one by one.

../_images/ui-overlay-layers.png

Figure 5: Topics and layers switcher.

../_images/ui-topics.png

Figure 6: Switching between topics.

In Layers mode the overlay layers can be switch on/off one by one.

../_images/ui-map-layers.png

Figure 7: Switch on/off overlay layers.

Tip

tip It is also possible to switch on/off group of layers group-switcher.

Todo

Explain legend.

Attribute data

In Layers mode attribute data can be accessed by layer-attributes. Attribute table is displayed in bottom part, see figure below.

../_images/ui-attributes.svg

Figure 8: Layer attribute table.

Attribute table allows filtering data based on simple queries, see figures below.

../_images/ui-attribute-filter-0.png

Figure 9: Choose operator for attribute filter.

../_images/ui-attribute-filter-1.svg

Figure 10: Define filter and refresh attribute table view.

Tip

tip By default, attribute table shows only few rows. The number of displayed rows can be controlled in status bar by Rows by page. Attributes can be also filter by map canvas Filter to visible area.

Every row in attribute table has Zoom to button zoom-to which enables zooming and centering related features in map canvas, see figure below.

../_images/ui-zoom-to-feature.svg

Figure 11: Zoom into selected feature.

Note

Attribute filter can be disabled by clear-filter. Table view must be refreshed.

Todo

Explain info panel.

Zoom tools

Zoom tools enables controlling map view.

  • Geolocation zoom-geolocation

  • Zoom in/out zoom-in-out

  • Zoom to extent zoom-extent

../_images/geolocation.svg

Figure 12: Geolocation in action.

Tip

Zooming and panning is also possible by middle mouse button.

Tools

Two basic tools are available:

  • Identify identify, and

  • Measurement measure

Identify

By default, features are identified in all visible layers (in the example below in Schools and District layers).

../_images/identify.svg

Figure 13: Identify schools and district layer.

This settings can be changed in Identification combo box.

../_images/identification-layers.png

Figure 14: Change layer priority for identification.

Measurement

Three measurement modes are available:

  • Location (point coordinates)

  • Distance

  • Area

../_images/ui-measure-tools.png

Figure 15: Measurement tools.

../_images/measure-location.svg

Figure 16: Location measurement example. Menu highlighted in red box.

Location menu allows:

  • Zoom to location

  • Change spatial reference system. By default two system are supported: QGIS project system and WGS-84 (EPSG:4326) known as “GPS coordinates”.

../_images/ui-location-menu.png

Figure 17: Location menu.

../_images/measure-distance.svg

Figure 18: Distance measurement example. Menu highlighted in red box.

Distance menu allows:

  • Zoom to distance

  • Change units. Currently two systems are supported: international (EU) and imperial (UK, US)

../_images/ui-distance-menu.png

Figure 19: Distance menu.

../_images/measure-area.svg

Figure 20: Area measurement example. Menu highlighted in red box.

Area menu allows:

  • Zoom to distance

  • Change units. Currently two systems are supported: international (EU) and imperial (UK, US)

../_images/ui-area-menu.png

Figure 21: Area menu.

Note

Currently no snapping to features is supported by measurement tools.

User menu

User menu allows to:

  • Log out current user

  • Open user profile page

  • Enter/Leave Full Screen mode

  • Display attributions

  • Show Help (this document)

  • Show Project About (see Project publishing section)

../_images/map-attribution.svg

Figure 22: Map attributions displayed.

../_images/about-window.png

Figure 23: About window showing information about Project and Gisquick itself.

User profile page

User page (My profile in User menu) allows managing published projects, and uploading new projects.

../_images/ui-user-menu.png

Figure 24: User profile menu.

In My Projects tab user can browse published projects including basic metadata. Project can open by clicking on its name.

../_images/user-page-projects.png

Figure 25: List of published projects.

Tip

Project data are available also via WMS service, see WMS service link.

Action allows deleting project or updating table templates (see Table templates section for details).

../_images/user-page-projects-action.png

Figure 26: Project actions menu.

In Upload Project tab new projects can be uploaded. Note that existing project will be automatically overriden. Projects can be uploaded in zip or tag.gz formats.

Note

note See project size limits in Configuration section.

../_images/user-page-upload.png

Figure 27: Upload project tab.

My account tab shows information about user account, see User management section.

../_images/user-page-account.png

Figure 28: Account information.

Another two menu items allows showing help page (this documenation) and log out the user.