Intégrer JMap Web dans votre propre application

 

Le design de JMap Web permet d'intégrer des déploiements JMap Web dans vos propres applications. Cette section décrit les étapes nécessaires afin d'activer l'intégration.

Copier les bibliothèques JMap Web et dépendances vers votre serveur web

Vos applications JMap Web déployées, tel qu'elles sont servies par l'instance Tomcat de JMap, contiennent les bibliothèques et services web nécessaires pour l'intégration dans votre application. Les fichiers de votre déploiement se situent dans le répertoire $JMAP_HOME$/applications/deployed.

Parmi ces fichiers se trouve le répertoire jmap. Il contient toutes les ressources nécessaires pour intégrer votre déploiement JMap. Ce répertoire ainsi que son contenu doit être copié vers votre serveur web et doit être accessible depuis les pages web de votre application.

Les dépendances de JMap Web seront chargés durant le processus d'initialisation avant l'affichage de la carte. Pour plus de détails au sujet du processus d'initialisation, référez-vous à la section Le processus de démarrage de JMap Web de ce document.

•JQuery est requis durant le processus d'initialisation et doit être présent dans le document de votre application.

•L'ajout de feuilles de styles des dépendances de JMap Web va modifier les styles de votre document. Présentement, il n'y a malheureusement pas de façon d'éviter ceci.

Autoriser le partage de ressources d'origines croisées

Afin de permettre l'intégration de vos applications, quelques modifications au fichier web.xml de votre déploiement seront requises.

•La modification du fichier web.xml de l'application nécessitera un déchargement/chargement de votre déploiement. Ceci peut être fait depuis la section déploiement de JMap Admin.

•Toutes modifications faites aux fichiers du déploiement seront perdues si vous en faites la mise-à-jour.

 

1. Activer l'authentification HTTP pour le filtre JMapLoginFilter_index.

 <filter>
    <filter-name>JMapLoginFilter_index</filter-name>
    <!-- ... -->
    <init-param>
      <param-name>httpauthentication</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>

 

2. Instancier et configurer le filtre CORS. Ajoutez la déclaration suivante avant le premier «mapping» du ByPassFilter.

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization,Cookie</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

Intégrer une carte

Une fois que le répertoire jmap sera copié vers votre serveur web, il faudra ajouter les références aux resources suivantes dans la balise <head> du document dans lequel vous souhaitez intégrer votre déploiement.

<script type="text/javascript" src="jmap/vendor/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="jmap/vendor/OpenLayers-v3.15.1_master/ol.css" />
<script type="text/javascript" src="jmap/vendor/OpenLayers-v3.15.1_master/ol.js"></script>
<script type="text/javascript" src="jmap/jmap-web.min.js"></script>

•Il est possible que vous deviez modifier les chemins relatifs mentionnés plus haut.

•L'inclusion de jQuery n'est pas nécessaire si vous l'utilisez déjà. JMap Web nécessite une version minimale de 1.9.1 afin d'assurer la plus part des fonctionnalités.

L'initialisation de la carte requiert une balise div vide dans laquelle la carte sera crée.

<div id="map" style="height: 600px; width: 600px;"></div>

Tip: Si vous ne voyez pas la carte, assurez-vous que votre div possède une taille valide.

Ajoutez le JavaScript suivant pour déclencher l'initialisation de la carte.

<script type="text/JavaScript">
  $(document).ready(function() {
    var options = {
      // The URL of your deployed application. This must be an address that your users may access.
      jmapUrl: 'http://192.168.0.80:8080/web_deployment'
    };
 
    JMap.initialize(document.getElementById('map'), options);
  });
</script>

La fonction JMap.initialize qui est appelée plus haut est la même que celle qui fût détaillée ici. Vous pouvez modifier l'application intégrée en précisant ces mêmes propriétés de configuration dans un littéral objet mapConfig qui sera fournis à l'argument options.

 

embed_example.html

Un fichier embed_example.html est inclus dans le répertoire de votre application déployée. Ce fichier procure un exemple de d'application JMap Web intégrée. Vous pouvez ouvrir ce fichier dans un éditeur de texte afin de voir comment l'intégration est faite.

Vous pouvez également copier ce fichier ainsi que le répertoire jmap vers un serveur web séparé afin de pouvoir confirmer que le partage des ressources d'origines croisées est bien activé.

Gérer l'authentification

Si vous avez activé l'accès contrôlé sur votre déploiement JMap Web, une authentification auprès de JMap sera nécessaire avant de pouvoir initialiser la carte.

Le code suivant est fourni à titre d'exemple, mais n'est pas une façon recommandée de s'authentifier auprès de JMap Serveur.

<script type="text/JavaScript">
    $(document).ready(function() {
      $.ajaxSetup({
        xhrFields: {
          withCredentials: true
        }
      });
 
      $.ajax('http://192.168.0.80:8080/web_deployment/ajaxdispatch', {
        data: {
          action: 'ping'
        },
        beforeSend: function(xhr) {
          // Replace 'USERNAME:PASSWORD' with a valid string value.
          xhr.setRequestHeader('Authorization', 'Basic ' + btoa('USERNAME:PASSWORD'));
        },
      }).done(function(data, textStatus, jqXHR) {
        var options = {
          jmapUrl: 'http://192.168.0.80:8080/web_deployment'
          mapConfig: {},
          onMapInit: function() {
            console.log('Map was initialized.');
          }
        };
 
        JMap.initialize(document.getElementById('map'), options);
      });
    });
</script>