HTML Client

Description of Basic Layout
 

The Client

• Marushka® server client is composed from the main map window (A), dynamic overview map (B), a list of available themes (C), selector of predefined scales (D), control element "Google Cross" (E), popular layers (F), a popular localization query (G), the panel tabs (H), the main menu (I), a list of functional keys (J), panel navigation tools (K) and as part of the final map graphic scale (L).
• All these components can be switched off, so they do not have to be a part of the presentation.

 

Control and Mapping Operations

• HTML client offers full set of mapping operations, such as ZoomIn, ZoomOut, limiting rectangle selection, choice of the exact scale and pre-configured mapping scale.
• All the operations mentioned above can also be performed on keyboard, using buttons +,-, ←,→,↑,↓ 
• Other mapping operations can be performed by "Map control tools", namely ZoomIn, ZoomOut, look ahead, look back and redraw map, nothing less this component is already obsolete and it was replaced with "Google cross" and "Spatial scales predefined selector".   

The Panel Tabs

• Another important part of the layout is the panel tab, it currently contains six tabs.
• Bookmark "Layers" in the tree structure lists all available map layers.
• It allows user to turn on/off layers or layer groups, or switch on/off generating of "clickable" icons in the map. It also provides additional descriptive information on individual layers.
• Bookmark "Legend" contains a dynamic legend.
• Bookmark "Search" displays a list of localization queries and components of the localization itself.
• Bookmark "Print" offers everything needed for printing.
• And bookmark "Information" is designed to display descriptive information, or is used as a space to display external web applications using embedded IFRAME.
• Tab "Draw" allows displaying drawing queries defined in the project. It also includes 3 predefined drawing queries available in each project – notes, that can be drawn directly in the map window and print them as an additional graphic information in the map.

 

Dynamic Overview

• The vicinity (overview) map includes (if it is switched on) a preview of the currently displayed area. This view is dynamically enlarged/elided according to scale of the currently displayed map.
• Vicinity allows performing all the standard mouse operations; it also displays coordinates of the current mouse cursor position in coordinate systems S-JTSK and WGS84 (GPS).
• This component also offers selection of predefined map scale or user definition of scale. For Google and tile layers are zoom levels predefined. Because of this reason it is not possible to manually enter own scale, you can just select the scale from the list of available scales.

 

Functional Keys and Main Menu

• In the map window in upper left corner is the Main menu button; next to it is a set of function buttons.
• The main menu includes, among setting items, application help, possibility to logout, or if the client is a portal component, it displays a link to parent website.
• Function buttons offers a list of external applications, measurement of area and distance, switching client to mode “search element by click in the map“ and GPS function.
• All these components can be switched on/off using theme editor. But they also have an equivalent, using which they can be externally called on URL address.

 

Popular Layers and Localization

• The client allows placing some layers directly into map window as so called popular layers. Just one of these layers can be switched on at the same time.
• Similarly, you can define a popular localization. Popular layers are set in the publish layers window.

 

Print Outputs

Basic Print

• One of the great characteristics of the product is sophisticated printing. Printing is performed in three steps.
• In the first one, the user defines the paper size, orientation, scale, output format and other parameters.
• In the second step, if we print to PNG (for print) we can still adjust selected area or scale; choose to display text scale, title text, etc.
• In the last step we choose direct print or save the output in PNG or JPEG file. We can define the paper size up to A0 size, but this feature can be turned off in the server setting.  

 

Print to PDF file

• One of the basic features is print/export to PDF file.
• The PDF file can be then distributed as a universal basis for any printing.
• This file is in the vector form, thus there is no deformation of the base file in dependence on the resolution of the printer/terminal display device.
• Example of vector PDF file is here.

Print by localization/fence/mask

• Very advanced printing function is based on the localization results, such as localization fences (defined by polygon), which can be further used as a mask for printing.
• In this case do bookmark "Print" include a tree of queries (Like a bookmark "Search"), after evaluation of the selected query can resulting fence create a mask for printing or it can add to print localization result.

 

Information / Localization / Editing

An integral part of every map application is descriptive information and queries, i.e. publication of other information of map elements.

Map composition is formed from a collection of data stores, form layers and symbols. Data stores also provide possibility to request information of individual composition element (single graphic element of the physical layer such as database geometric record table), or inquire through localization/searching (queries like find address, find municipality which have more than X inhabitants, find all the elements up to 100m around the waterway XY).

Marushka® HTML client offers a possibility of publication of descriptive information by two revolutionary ways, namely "Information icons" and "Click in map, navigate through selected elements and display information".

 

Information Icons

• tThey are small active map elements. These elements are clickable and after clicking them, they display the offered information. Position of icons ("centroid" of graphic element) and their color is generated directly while rendering the element. If in any area at certain scale appears too much icons in the map, the icons start to aggregate in one icon with "i+" mark.
• In the map layer menu user can for just one layer at the time enable / disable possibility of generating by icon (big icon)  . Displaying/not displaying of icons can be also operated by dependency on the scale of the map. (There is no sense in displaying icons for parcel numbers in layer cadastral map in scale 1:25000 because there would be hundreds of them and they would have no information value.)
• In its basic form, the information icon is in the text form, with the text "i" and with color derived from the color of an element. If user points a mouse cursor on the icon, the additional description is displayed, in its basic form a physical layer (database table name). Instead of standard "i", user can set any other text or change the additional description (Hover text). Icons can also contain pictures instead of text.

• After user clicks on the info icon, the information will be evaluated into bookmark "Information" or into new window, or into pop-up bubble. In the case that there is more than one query for the element, after clicking the element the menu with structured queries will be offered.

"Click in Map, Navigate through Selected Elements and Display Information"

• Some projects, such as "Technical map", i.e. projects showing a large number of objects require different approach to presentation of information. In these cases, you cannot generate information icons.
• The user can select an object, as in CAD programs and click on the element directly into the map, the server will attempt to evaluate the position of  the mouse click, select a group of elements and sort it by the distance to the click and gradually offer it (the server is offering highlighted), so the user does "travels" in the offered set of elements. The client instantly provides a list of questions for highlighted elements.

Multiple Selection

• In some cases, you need to select a multiple element at once and then evaluate query above all of them. This can be done by multiple selection.
• The user can select by point, polygon, add elements or remove them. User can also define symbology and labels of selected elements.

Display Style of Query Result

• HTML client offers three types of displaying of query result.
• a) into bookmark panel "Information", b) into so called "popup bubble", c) into new window of web browser

Editing

• Active map elements can trigger editing queries of descriptive attributes of graphic elements, or fragments of the database model.
• After activating the element, will be in the bookmark "Information" generated editing form.
• This form can contain typed values (e.g. calendar for a date field, or "Selectbox" for a selection of values), depending dials and search suggestions. Form fields are defined by SQL query. The update phrase itself is also defined by SQL query.

 

Localization

• Localization (search queries) is offered by client in the "Search" in the form of a structured tree. The result of localization is area (limiting rectangle) and the highlighted layer that will appear when the result is selected.
• After selecting a query, the client generates a form for entering the localization parameter. Each localization request (in case of database data store SQL query) can include multiple parameters. Query parameter can be a simple text string (client displays a simple text box for parameter), or selection of the available values (code list), in this case instead of a text box will client display "Select box" with a button to load the values.
• Selection of the given values can also be performed by using the "Search suggestion" the client offers values to user based on the text that has already been entered.
• If the user enters the parameters correctly, the list of results will appear below the actually generated form. Clicking on the outcome, the client move to the final area, and displays highlighted layer. 

 

Drawing

Notes

• HTML client allows drawing of temporary graphic elements called "Notes". These elements cannot be saved and they are used only for printing to PDF or to raster format.
• Individual elements of the notes can be in form of texts, polygons and lines. The user can define color, filling, line style, text size.  

 

Draw queries

• The project can also include a "draw queries", a function of acquiring graphic element.
• In this case is the style and type defined by the project drawings. A part of the draw query can be a form for definition of descriptive attributes of the element being actually drawn.
• The form may contain typed values (e.g. calendar for a date field, or "Selectbox" for a selection of values), depended code lists or search suggestions.

 

External Applications / Communication
 

POST/GET

• We can call map client from an external web site or from an external application via HTTP interface by POST method. For example using HTML form in an HTML webpage.
• The parameters in a form can be suppressed by using of components that are not allowed in the file web.config (not vice versa). That is if for example, when the parameter LayOutVicinity is set to false, it is not possible to turn on dynamic overview from the outside, but if it is enabled, it can be disabled by fault value.
• Map client can be called from an external web site, or from external application via http interface using GET method, for example by definition of parameters in URL address. This access is limited by the maximum chain length 2000 characters. The significance of the parameters is the same as in the previous case.

JavaScript

• If an HTML client is included with external web application (e.g. is displayed in HTML website in IFRAME) it offers a relatively robust java script API for bidirectional communication.

Communication with an external desktop application

• Communication with an external desktop application.
• In cases, when the HTML client needs to communicate with an external desktop application in both directions, application Marushka Desktop was developed. It can display HTML client and it is communicating with others indirectly using standard web services.