Développement JMap Web (6.5) > Le processus de démarrage de JMap Web

Le processus de démarrage de JMap Web

Avant d'aborder la création d'une extension JMap Web, cette section du document va expliquer le processus de démarrage de JMap Web.

Note : Cette section fait référence au modèle d'application JMap Web tel qu'il est inclus au moment de l'installation de JMap Serveur. Ce processus, brièvement décrit ici, va être différent si vous choisissez d'ajouter un déploiement JMap Web au sein de votre propre application web existante. Pour plus de détails, consultez la section Intégrer JMap Web dans votre propre application de ce document.

Les fichiers du modèle d'application JMap Web sont disponibles sous le répertoire $JMAP_HOME$/applications/templates/html/web.

index.jsp

Ceci est le document web qui sera servi par JMap Serveur lorsque l'application sera demandée par l'utilisateur. Ouvrez ce fichier dans un éditeur de texte. Comme vous pouvez le remarquer, jQuery et jmap.min.js sont chargés dans la balise head du document.

Plus bas. la carte est initialisée lorsque le document sera prêt à être manipulé.

$(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)

La fonction JMap.initialize est définie dans le fichier jmap.min.js. Elle charge toutes les dépendances nécessaires et va ensuite initialiser tous les objets requis par l'application. Parmi ces objets, JMap.app et JMap.app.map qui demeureront globalement disponibles.

L'objet JMap.app est une instance de la classe Application de la bibliothèque core. L'objet JMap.app.map est une instance de la classe OpenLayers.Map.

Paramètres

Description

map

Requis {String} L'élément ou l'identifiant d'un élément existant sur la page qui va contenir la carte.

options

Requis {Object} Doit au minimum fournir une propriété jmapUrl {String}. Supporte les clefs de propriétés suivantes:

•jmapUrl: Requis. {String} L'adresse de votre déploiement JMap Web.

•mapConfig: {Object} Options additionnelles assistant la configuration de la carte.

•onMapInit: {Function} Handler qui sera appelé une fois que le processus d'initialisation de la carte est complété. Pratique afin d'ajouter de nouveaux contrôles OpenLayers une fois que la bibliothèque OpenLayers sera chargée.

L'objet mapConfig peut inclure les clefs de propriétés suivantes afin de personnaliser l'application. La valeur par défaut est identifiée en gras.

Propriétés du mapConfig	Description
Options de la carte
displayUnits	null \| ’m’ \| ’km’ \| ’ft’ \| ’mi’ \| ’in’ \| ’°’ {String} L'unité de la carte. Par défaut sera la valeur du projet JMap.
initialZoom	null {Array} Coordonnées géographiques qui décrivent l'étendue: [gauche, bas, droite, haut]
mapUnits	null \| ’m’ \| ’km’ \| ’ft’ \| ’mi’ \| ’in’ \| ’°’ {String} L'unité de la carte. Par défaut sera la valeur du projet JMap.
maximumExtent	null {Array} Coordonnées géographiques qui décrivent l'étendue: [gauche, bas, droite, haut]
projection	null {Object} Si fourni, l'objet doit inclure une propriété String code qui correspond à un code EPSG.
Couches additionnelles
addShowPositionLayer	true \| false
Services au démarrage
activateGeolocationServiceOnLaunch	true \| false
loadGoogleMapsApiOnLaunch	true \| false - Sera automatiquement remplacé à true si le déploiement contient au moins une couche Google ou si au moins un parmi ceux-ci est vrai : addGoogleDirections, addGoogleGeocoding, addGoogleStreetView.
Options de la carte et de la navigation
addGeolocateButton	true \| false
addInitialViewButton	true \| false
addMapOverview	true \| false
addMousePosition	true \| false
addPanControls	true \| false
addScaleBar	true \| false
addZoomInButton	true \| false
addZoomOutButton	true \| false
isMapOverviewMaximized	true \| false
Outils JMap
addInfoReportTool	true \| false
addMeasureAreaTool	true \| false
addMeasureDistanceTool	true \| false
addMeasureCircularAreaTool	true \| false
addMouseOverTool	true \| false
addRedLiningTool	true \| false
Fonctionalités d'édition JMap
addEditionTools	true \| false
addEditionCreateElementTools	true \| false - La propriété addEditionTools doit également être true pour que ceci prenne effet.
addEditionSelectElementTool	true \| false - La propriété addEditionTools doit également être true pour que ceci prenne effet.
addEditionShowElementFormButton	true \| false - La propriété addEditionTools doit également être true pour que ceci prenne effet.
Fonctionalités de sélection JMap
addSelectionTools	true \| false
addCircleSelectionTool	true \| false - La propriété addSelectionTools doit également être true pour que ceci prenne effet.
addLineSelectionTool	true \| false - La propriété addSelectionTools doit également être true pour que ceci prenne effet.
addPointSelectionTool	true \| false - La propriété addSelectionTools doit également être true pour que ceci prenne effet.
addRectangleSelectionTool	true \| false - La propriété addSelectionTools doit également être true pour que ceci prenne effet.
addShapeSelectionTool	true \| false - La propriété addSelectionTools doit également être true pour que ceci prenne effet.
Autres fonctionalités
addFullScreenButton	true \| false
addLayersMainMenuItem	true \| false
addLogo	true \| false
addLogoutAsideMenuLink	true \| false
addParametersAsideMenuLink	true \| false
addPrintButton	true \| false
addSearchMainMenuItem	true \| false
Fonctionalités de tiers
addGoogleDirections	true \| false
addGoogleGeocoding	true \| false
addGoogleStreetView	true \| false

Après le processus d'initialisation

Une fois que la carte est initialisée avec succès, vous pouvez l'accéder à l'aide de JavaScript en utilisant la variable globale JMap.app.map.

La manipulation de la carte sera possible en accédant à la variable globale JMap.app.map. Cette variable est l'instance de OpenLayers.Map en utilisation. Vous pouvez également interagir avec elle en utilisant l'API d'OpenLayers.

Paramètres d'URL

JMap Web supporte les paramètres d'URL suivants:

autozoom {String}

Ce paramètre permet de spécifier une étendue sur laquelle la vue de la carte sera initialisée. Deux types d'autoZoom peuvent être utilisés, region ou object. Le type est déterminé par le premier argument 'type'.

Types d'AutoZoom

Description

Region

L'utilisateur précise la zone visible en décrivant un rectangle...

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

•type: {String} Le type de la requête. Dans ce cas, doit être “region”.

•x: {Number} La valeur X de la coordonnée inférieure gauche du rectangle.

•y: {Number} La valeur Y de la coordonnée inférieure gauche du rectangle.

•width: {Number} La largeur du rectangle.

•height: {Number} La hauteur du rectangle.

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

Object

L'utilisateur précise un objet sur lequel il veut faire le zoom...

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

•type: {String} Le type de la requête. Dans ce cas, doit être “object”.

•layerName: {String} Le nom de la couche qui contient l'objet sur lequel on veut faire le zoom.

•field: {String} Le champs qui contient la valeur de l'objet sur lequel on veut faire le zoom.

•value: {Number | String} La valeur spécifique de l'objet sur lequel on veut faire le zoom. Si le champs est une chaîne de caractères, utilisez ' '. Voir l'exemple plus bas.

•maxScale: {Number, optionnel} L'échelle maximale que la carte doit respecter lorsqu'elle affiche les résultats.

Exemple d'une valeur numérique: ?autozoom=object;citiesLayer;city_id;1032

Exemple d'une valeur chaîne de caractères: ?autozoom=object;citiesLayer;city_name;'montreal';15