JMap Web Development
Table of contents
Introduction
General Information
Brief Overview of JMap Web’s Design
Third-party JavaScript Libraries Used
JMap Javascript Libraries and Their Architecture
JMap Web Public API
JMap Web’s Initialization Process
JMap.initialize(map, options)
After the Initialization Process
URL Parameters
Introduction
This section details how to develop for JMap Web as well as how to integrate JMap Web into other web applications.
JMap Web is a web application that uses technologies such as HTML5, JavaScript, CSS and JSON. The JMap Web application is built on top of third-party JavaScript libraries including OpenLayers, jQuery and many others.
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.
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” deployment type. By spreading the code across several libraries, code reuse is possible in various environments such as JMap Web. 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” 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 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.
JMap Web Public API
Included in JMap 7 is JMap Web’s public API which allows developers to easily integrate with JMap functionalities.
A generated JSdoc documentation of the javascript API is available online at http://dev.k2geospatial.com/jmap/web/api/7.0/.
JMap Web’s Initialization Process
Before moving onto the creation of a JMap Web extension, this section will explain JMap Web’s initialization process.
Note : This section refers to the JMap Web application template as it is included when JMap Server is installed. The process, as briefly described here, differs when you choose to embed a JMap deployment within your existing web application. For more details, consult the Embedding a JMap Deployment Into Your own Application section of this document.
The JMap Web application template’s files are located in $JMAP_HOME$/applications/templates/html/web/index.jsp
This is the web document that will be served by JMap Server as the application is being requested by the user. Open this file in a text editor application. As you can notice, both jQuery and a jmap.min.js are loaded in the head portion of the document.
Further down, the map is initialized once the document is ready for manipulation.
var options = {
url: '$APPLICATION_PROTOCOL$://$APPLICATION_HOST$:$APPLICATION_WEBPORT$$PATH$',
language: '$LANGUAGE_CODE$',
embedded: true,
mapConfig: {
// Configuration properties
},
onMapInit: function() {
console.log('Map was initialized.');
}
};
$(document).ready(function() {
JMap.initialize(document.getElementById('map'), options);
});
JMap.initialize(map, options)
The JMap.initialize function is defined in the jmap.min.js file. It loads all necessary dependencies and will then initialize all of the application’s required objects. Among those objects are the globally available JMap.app and JMap.app.map.
The JMap.app object is an instance of the core library’s Application class. The JMap.app.map object is an instance of the ol.Map class.
The mapConfig object may include the following properties to customize the application. The default value is identified in bold.
After the Initialization Process
Once the map is successfully initialized, you may access it via Javascript by using the JMap.app global variable.
Map manipulation is possible by accessing the JMap.app.map global variable. This variable is the instance of ol.Map in use and you can interact with it by using the OpenLayers API.
URL Parameters
JMap Web supports the following query string parameters:
sessionId {Integer}
Makes the JMapWeb session log into an existing session and take its authentication values.
autozoom {String}
Zooms on a specified area or object on the initial view of a map. Two types of autoZooms can be used, region or object, the type is determined by the first argument: ‘type’.
Dernière mise à jour