General Information
Brief Overview of JMap Web's Design
JMap Web provides a web application capable of interacting with JMap Server. Its user interface is primarily intended for use on laptop and desktop web browsers.
The key elements of a deployed JMap Web application are the following:
| • | The client: Can be described as a single-page application (index.jsp). The client is considered the web page as it is rendered in the user's web browser. |
| • | A Web Map Service: Provides access to the map's tiles. |
| • | The AJAX Dispatcher: A web service to which HTTP requests are sent. The AJAX Dispatcher then dispatches the request to the appropriate "Action Handler". This will be further discussed in the Sending Server Requests and Custom Actions section of this document. |
Third-party JavaScript Libraries Used
At the time of writing this document, JMap Web currently uses the following third-party Javascript libraries. Your extensions may leverage these libraries without any additional configuration. The following table includes a brief description of how JMap Web uses these libraries.
Bibliothèque |
Description |
DataTables (v1.9.4) |
jQuery plugin that easily enables the creation of powerful HTML tables for data representation. This is primarily used to display search results. |
fancyBox (v2.15) |
Displays content in a "lightbox" style interface. JMap Web uses fancyBox to display the full size version of documents included in mouseover popups. |
Google Maps (v3) |
Necessary to access Google Maps's Roadmap, Terrain, Satellite and Hybrid base layers. |
jQuery (v1.9.1) |
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. |
jQuery-ui (v1.11.4) |
Library of user interface components relying on the jQuery framework. Currently, JMap Web uses a custom build that includes only the autocomplete component. |
moment.js (v2.10.6) |
Library used to parse, validate, manipulate, and display dates in JavaScript. |
malihu-custom-scrollbar-plugin (v3.0.7) |
Styles the appearance of scroll bars for overflowing mouseover popups. Its primary function is to allow a more consistent appearance in various browsers. |
OpenLayers (v2.13.1) |
This is JMap Web's most important library. OpenLayers allows JMap Web to display a map and manage the vast majority the user's interaction with it. |
Proj4js (v1.1.0) |
Proj4js is a library that's used to translate geographic coordinates from one map projection system to another. Proj4js is used by OpenLayers, but isn't included with it. In order to perform transformations for named projections (ex: “EPSG:3857”), projections must be defined in Proj4js. By default, only a small number of projections are defined. JMap Web includes a Proj4js projection definition file for each projection that's supported by JMap Server. Those projection definitions will be loaded into memory as they are required. |
Twitter Bootstrap (3.1.1) |
«Front-end framework» used to create user interface elements. |
bootstrap-datetimepicker (v4.15.35) |
Date/time picker widget based on Twitter Bootstrap. |
bootstrap-multiselect (v0.9.10) |
JQuery multiselect plugin based on Twitter Bootstrap. |
JMap Javascript Libraries and Their Architecture
In addition to the libraries previously mentioned, JMap Web also includes its own libraries based on OpenLayers's Class base type. This allows JMap Web to benefit from object oriented programming paradigms in a Javascript context (which usually favors a more prototypal and functionnal approach).
A JMap Javascript library essentially consists of a collection of Javascript files, styles sheets (CSS) and resources (images, sounds, etc.).
JMap Javascript libraries have been designed for use in different application templates of the "JMap Web/JMap Mobile" deployment type. By spreading the code across several libraries, code reuse is possible in various environments such as JMap Web and JMap Mobile. JMap Javascript libraries define unique behavior for specific contexts.
JMap Web uses the following JMap Javascript libraries:
| • | core |
| • | desktop_ui |
Reusable model classes are usually defined in the *core* library. As such, it is frequently used and is included in the vast majority of "JMap Web/JMap Mobile" application templates.
The core library is written in JavaScript ES5. In addition to JMap model classes, it includes custom OpenLayers controls and layers, HTML5 functionality wrappers and more. The core library is JMap Web and JMap Mobile's lowest level Javascript library. It handles general tasks such as the initialization process of the map. All other library is then loaded on top of it as an extension.
As for desktop_ui, it mostly contains classes that focus on user interface elements. It directly makes use of the DataTables, jQuery and Twitter Bootstrap Javascript libraries. All visual elements that are not managed by OpenLayers are defined within desktop_ui.