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.

 

$(document).ready(function() {

 var options = {

   jmapUrl: '$APPLICATION_PROTOCOL$://$APPLICATION_HOST$:$APPLICATION_WEBPORT$$PATH$',

   mapConfig: {

     // Configuration properties

   },

   onMapInit: function() {

     console.log('Map was initialized.');

   

     var resizeUi = function() {

       if (JMap.app && JMap.app.map)

       {

         $(JMap.app.map.div).height($(window).height()).width($(window).width());

         JMap.app.map.updateSize();

         JMap.app.popupManager.updateDrawnPopups();

       }

     };

 

     $(window).on('resize', resizeUi);

 

    // Object auto zoom handling...

   }

 };

 

 // Region auto zoom handling...

 

 $('#map').height($(window).height()).width($(window).width());

 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 OpenLayers.Map class.

Argument

Description

map

Required {DOMElement|String} The element or id of an existing element in your page that will contain the map.

options

Required {Object} Should at least provide a jmapUrl {String} property. Supports the following property keys:

•jmapUrl: Required. {String} The url of your JMap deployment.
•mapConfig: {Object} Additional map configuration options.
•onMapInit: {Function} Handler to be called once the map initialisation process is completed. Useful to add new `OpenLayers.Control`s once the OpenLayers library is loaded.

The mapConfig object may include the following properties to customize the application. The default value is identified in bold.

mapConfig properties

Description

Map Options

displayUnits

null | ’m’ | ’km’ | ’ft’ | ’mi’ | ’in’ | ’°’ {String} The map unit. Defaults to the JMap project's value.

initialZoom

null {Array} Map coordinates that describe bounds: [left, bottom, right, top]

mapUnits

null | ’m’ | ’km’ | ’ft’ | ’mi’ | ’in’ | ’°’ {String} The map unit. Defaults to the JMap project's value.

maximumExtent

null {Array} Map coordinates that describe bounds: [left, bottom, right, top]

projection

null {Object} If supplied, it must contain a string code property that corresponds to an EPSG code

Additional Map Layers

addShowPositionLayer

true | false

Services on Launch

activateGeolocationServiceOnLaunch

true | false

loadGoogleMapsApiOnLaunch

true | false - Will automatically be set to true if the deployment contains at least one Google layer or if any of the following is true: addGoogleDirections, addGoogleGeocoding, addGoogleStreetView.

Map and Navigation Options

addGeolocateButton

true | false

addInitialViewButton

true | false

addMapOverview

true | false

addMousePosition

true | false

addPanControls

 

addScaleBar

true | false

addZoomInButton

true | false

addZoomOutButton

true | false

isMapOverviewMaximized

true | false

JMap Tools

addInfoReportTool

true | false

addMeasureAreaTool

true | false

addMeasureDistanceTool

true | false

addMeasureCircularAreaTool

true | false

addMouseOverTool

true | false

addRedLiningTool

true | false

JMap Edition Functionalities

addEditionTools

true | false

addEditionCreateElementTools

true | false - The addEditionTools property must also be set to true for this to take effect.

addEditionSelectElementTool

true | false - The addEditionTools property must also be set to true for this to take effect.

addEditionShowElementFormButton

true | false - The addEditionTools property must also be set to true for this to take effect.

JMap Selection Functionalities

addSelectionTools

true | false - The addSelectionTools property must also be set to true for this to take effect.

addCircleSelectionTool

true | false - The addSelectionTools property must also be set to true for this to take effect.

addLineSelectionTool

true | false - The addSelectionTools property must also be set to true for this to take effect.

addPointSelectionTool

true | false - The addSelectionTools property must also be set to true for this to take effect.

addRectangleSelectionTool

true | false - The addSelectionTools property must also be set to true for this to take effect.

addShapeSelectionTool

true | false - The addSelectionTools property must also be set to true for this to take effect.

Other Functionalities

addFullScreenButton

true | false

addLayersMainMenuItem

true | false

addLogo

true | false

addLogoutAsideMenuLink

true | false

addParametersAsideMenuLink

true | false

addPrintButton

true | false

addSearchMainMenuItem

true | false

Third Party Functionalities

addGoogleDirections

true | false

addGoogleGeocoding

true | false

addGoogleStreetView

true | false

 

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 OpenLayers.Map in use and you can interact with it by using the OpenLayers API.

URL Parameters

JMap Web supports the following query string parameters:

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'.

AutoZoom Types

Description

Region

The user specifies the viewing area by specifying a rectangle...

Syntax: “type;x;y;width;height”

•type: {String} The type of this request. In this case, must be "region".
•x: {Number} The X value of the lower left coordinate of the rectangle.
•y: {Number} The Y value of the lower left coordinate of the rectangle.
•width: {Number} Width of the rectangle.
•height: {Number} Height of the rectangle.

Example: ?autozoom=region;9;39;20;20

Object

The user specifies an object to zoom to...

Syntax: “type;layerName;field;value;maxScale”

•type: {String} The type of this request. In this case, must be "object".
•layerName: {String} The name of the layer which contains the object to zoom to.
•field: {String} The field that contains the value of the object to zoom to.
•value: {Number | String} The specified value of the object to zoom to. If the field is a string, use ''.  See example below.
•maxScale: {Number, optional} The maximum scale the map should respect when displaying results.

Number value example: ?autozoom=object;citiesLayer;city_id;1032

String value example: ?autozoom=object;citiesLayer;city_name;'montreal';15