5.10. A viewer for Web Maps

A special web application for viewing Web Maps is included with NextGIS Web (see Pic. 5.164.).

../../_images/webmap_client_eng_3.png

Pic. 5.164. The interface of viewer client application

Numbers indicate: 1 – map; 2 – map panels; 3 - layer tree with layer menu buttons; 4 – dropdown list of basemaps; 5 - zoom tools; 6 - map tools; 7 - status bar and copyright.

Web client includes three main components: a map, panels, map tools.

5.10.1. Zoom and rotation

The status bar (see Pic. 5.164.) displays the current scale of the map. If you use the identify tool to click on the map, a pop-up window will show the coordinates of the point you clicked on and list map features if present in this point of the map.

You can change the scale of the map using zoom tools (see item 5 in Pic. 5.164.). To reset the map to its initial extent, press the house icon.

There are some options to work with map:

  • if you click on alt + shift simultaneously and execute round cursor movements around a monitor, a map will turn for a certain degrees to the right or to the left,

  • if you simultaneously click on shift and select of the necessary part of a map on a monitor by a cursor, you will highlight this part and zoom in it on the map.

5.10.2. Panels

On the left side of the workspace are the functional panels:

The layer tree contains a list of all layer styles added to the web map. The panel allows:

  • Disable/Enable style visibility

  • Open layer attribute table

  • Zoom map to layer

  • Open layer description

Search is performed using three sources:

  1. Coordinates.

  2. Attributes of layers added to a map.

  3. Address database (OpenStreetMap or Yandex.Maps, depending on address search settings).

Results are shown as user inputs text and are sorted in this order: points on the map matching the coordinates, then feature numbers for attribute search and finally full addresses. After a click on a search result map changes extent to show selected feature.

Note

To find a point using the coordinates, enter the latitude and longitude in degrees, minutes and second, degrees and decimal minutes or decimal degrees (make sure to use straight single and double quotes), for example:

79 W 43 N
W 79 N 43
-79 43 (the results will contain two points: 79 W, 43 N and 43 E, 79 S)
79- 43
-79 W 43 N
79°4'14.08" W 43°4'59.37" N
-79°4'14.08"  43°4'59.37"
-79 4.25 W  43 4.95 N
-79 4.25  43 4.95
79.068493 43.079920
79.068 W 43.08 N

When the feature table is opened on the Web Map, you can filter features by area (read more).

To share a link to a map use the function “Share” (see item 9 in Pic. 5.164.), to print a map use the function “Print map” (see item 10 in Pic. 5.164.).

5.10.3. Layer menu

To change the transparency of the layer use the slider in the dropdown menu of the layer.

Choose Edit to modify the selected layer. To complete the process, open the dropdown menu again and select Stop editing (read more here).

Using “Description” option you can view the description of the selected layer, added during creation or editing of the layer.

“Zoom to layer” option allows you to zoom a map so that the selected layer takes up all the visible map area.

After a click on “Feature table” option you will see feature table of the selected layer under the map.

../../_images/ngweb_webmap_layer_menu_en.png

Pic. 5.165. Layer menu on the Web Map

Select a row in feature table to navigate to the feature on a map, it will be highlighted (see Pic. 5.166.). For the selected feature you can open a window with its properties, edit it or delete it. “Go to” button allows you to zoom a map to display the selected feature on the whole visible map area (see Pic. 5.166.). In feature table tab you have an option to dynamically filter records. When user types a text the contents of the window are filtered leaving only the records that match the search text. Filter by area option is also available (more on how to use it).

../../_images/ngweb_webmap_attribute_table_eng_3.png

Pic. 5.166. Feature table of the selected layer on a Web Map

5.10.4. Basemap

To change a basemap use the dropdown list (see Pic. 5.164.). By default there are the following basemaps:

  • None

  • OpenStreetMap

Basemap is a map image that is shared by thrid-party services in the Internet. Users can not influence their content. You can disable the basemap so that a white background is shown instead. If the Internet access is expected to be poor or if the Web GIS is deployed in local network without access to the Internet, it is possible to work without a basemap adding base data as WebGIS layers.

You can add other basemaps, see the instructions in Adding resources.

Note

If the Web Map is supposed to work without Internet access, edit the file with basemap settings and delete records about Google basemaps.

5.10.5. Map tools

Tools to work with the Web Map (see Pic. 5.164. item 6) named from left to the right:

  • Zoom in

  • Zoom out

  • Measure distance

  • Measure area

  • Vertical swipe

  • Show cursor coordinates/extent

../../_images/ngw_map_instruments.png

Pic. 5.167. Map tools

5.10.5.1. Vertical swipe

Vertical swipe button_swipe makes the selected layer transparent to the right of it (see ngweb_webmap_full_swipe_en).

To select a layer click on it in the layer tree (it will be highlighted in blue) (see Pic. 5.168.).

../../_images/choose_layer_swipe_en.png

Pic. 5.168. Selecting layer to use the vertical swipe on

This makes it possible to “peek” under the selected layer and compare it with the substrate or another layer on the map (see ngweb_webmap_swiped). For example, the tool will be useful if we want to compare changes in the terrain by satellite images for different dates (for example, to identify forest felling or floods).

../../_images/swiped_satellite_en.png

Pic. 5.169. Satellite image after applying the vertical swipe

5.10.5.2. Show extent or cursor coordinates

A field can be added to the Web Map interface to show the coordinates of the current cursor position or the extent of the visible map area. To activate it, press the button_extent_coord button in the map tools panel.

The icon on the right indicates what is displayed. Click on it to switch between modes.

../../_images/web_client_coordinates.png

Pic. 5.170. Cursor coordinates mode

../../_images/web_client_extent.png

Pic. 5.171. Extent mode