Générer une carte personnalisée

Prérequis

Technologie

Pour utiliser rapidement LASCARjs, il vous faudra vous prémunir au préalable des librairies suivantes :

jQuery (>= 3.2.1)
Leaflet (>= 1.2.0)

Les versions indiquées entre partenthèses sont celles utilisées dans le cadre des démonstrateurs sur la page d'accueil, mais rien ne vous empêche d'utiliser des versions supérieures ou inférieures. Sachez que nous n'avons pas encore testé ces autres versions et ne pouvons pas garantir de support.

Il vous faudra aussi disposer d'une page web dans laquelle intégrer les cartes. Dans le cadre de cet exemple, nous vous proposons de générer deux cartes en mode "plein écran" se partageant de manière équitable l'espace disponible. Pour simplifier ce tutoriel, je vous propose de partir d'une page HTML simple, sans framework (Bootstrap par exemple).

Objectifs

En repartant de la carte en mode "plein écran" du tutoriel Utilisation rapide¹, nous allons :

Intégrer deux cartes en simultané sur une même page en intervenant sur les identifiants.
Voir comment ajouter, modifier et supprimer les layers utilisables.
Modifier la position de la carte (via son centre et son niveau de zoom).
Intervenir sur la génération des contrôles.

Pour conclure, ces deux cartes devront être synchronisées, c'est-à-dire qu'un changement de position ou de zoom sur l'une devra être répercutée sur l'autre.

Réalisation

Etape 1 : Mise en place de la structure

Pour générer deux cartes sur la même page, nous allons commencer par modifier le code HTML issu du tutoriel de base¹. Il vous faudra pour se faire utiliser deux identifiants DOM différents, et je vous propose d'utiliser les suivants :

l-map-left : pour la carte de gauche.
l-map-right : pour la carte de droite.

Insérez les conteneurs suivant afin de permettre la génération des cartes :

<!-- CONTENEUR "l-left-map" permettant la génération de la carte de gauche -->
<div id="l-left-map"></div>

<!-- CONTENEUR "l-right-map" permettant la génération de la carte de droite -->
<div id="l-right-map"></div>

Etape 2 : Configuration de la carte de gauche

Comme indiqué dans la documentation du constructeur de la classe Lascar.cl.Map², le premier paramètre : id permet de personnaliser l'identifiant du conteneur de la carte, tandis que le second : options permet de personnaliser la configuration de la carte (layers, zoom, centre, contrôles, ...).

Afin que les cartes soient positionnées comme demandé ci-dessus, nous profitons de la possibilité de gérer le style de la carte depuis la configuration JavaScript.

Ci-dessous, voici comment j'ai configuré la carte de gauche. Pour rappel, nous souhaitions garder les mêmes propriétés (zoom, layers, ...), nous avons juste à intégrer le bon identifiant et le style approprié.

// Carte de gauche, que l'on positionne sur la première
// moitié de l'écran, il s'agît là d'une carte "par défaut".
var leftMap = new Lascar.cl.Map("l-left-map", {
    style: { width: "50%", float: "left" }
});

Etape 3 : Configuration de la carte de droite

Au travers de la carte de droite, nous allons pousser plus loin la personnalisation fournie par le constructeur de la classe Lascar.cl.Map². Pour ce faire, je vous propose de désactiver le contrôle du zoom et d'utiliser les tuiles suivantes de Google :

Vue satellite

Url : http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}

Vue terrain

Url : http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}

Vue hybride

Url : http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}

Vue routière

Url : http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}

Pour information, l'attribut {s} pour les ressources de Google ci-dessus prend pour valeur : mt0, mt1, mt2, mt3. Cela nécessite donc la configuration du paramètre subdomains de l'objet Lascar.cl.layer.RasterTileLayer³.

Comme précédemment pour la carte de gauche, nous profitons aussi de la possibilité de gérer le style de celle-ci depuis la configuration JavaScript.

Ci-dessous, voici comment j'ai configuré la carte de droite.

// Carte de droite, que l'on positionne sur la seconde
// moitié de l'écran. On en profite pour supprimer les
// layers par défaut et intégrer ceux de Google.
var rightMap = new Lascar.cl.Map("l-right-map", {
  style: { width: "50%", float: "right" },
  zoomControl: false,
  "base_layers": new Lascar.cl.util.ArrayOf(
    Lascar.cl.layer.RasterTileLayer, [
      new Lascar.cl.layer.RasterTileLayer(
        "http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", {
          "code": "satellite",
          "title": "Vue satellite (Google)",
          "attribution": '© Contributeurs d\'<a href="http://openstreetmap.org">OpenStreetMap</a> - Hébergeur : <a href="http://google.com/">Google</a>',
          "maxZoom": 20,
          "default": true,
          "subdomains": ["mt0", "mt1", "mt2", "mt3"]
        }),
      new Lascar.cl.layer.RasterTileLayer(
        "http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}", {
          "code": "terrain",
          "title": "Vue terrain (Google)",
          "attribution": '© Contributeurs d\'<a href="http://openstreetmap.org">OpenStreetMap</a> - Hébergeur : <a href="http://google.com/">Google</a>',
          "maxZoom": 20,
          "subdomains": ["mt0", "mt1", "mt2", "mt3"]
        }),
      new Lascar.cl.layer.RasterTileLayer(
        "http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}", {
          "code": "hybride",
          "title": "Vue hybride (Google)",
          "attribution": '© Contributeurs d\'<a href="http://openstreetmap.org">OpenStreetMap</a> - Hébergeur : <a href="http://google.com/">Google</a>',
          "maxZoom": 20,
          "subdomains": ["mt0", "mt1", "mt2", "mt3"]
        }),
      new Lascar.cl.layer.RasterTileLayer(
        "http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}", {
          "code": "streets",
          "title": "Routes (Google)",
          "attribution": '© Contributeurs d\'<a href="http://openstreetmap.org">OpenStreetMap</a> - Hébergeur : <a href="http://google.com/">Google</a>',
          "maxZoom": 20,
          "subdomains": ["mt0", "mt1", "mt2", "mt3"]
        })
  ])
});

Etape 4 : Gérer la position d'une carte

Avant toute chose, il nous faut être d'accord sur le terme "position d'une carte". Derrière ce terme, je veux parler deux de éléments importants :

le niveau de zoom de la carte
les coordonnées du centre de la carte

Au travers de la librairie LASCARjs, il est possible de modifier cette position à deux moments :

à l'initialisation de la carte
durant l'utilisation de la carte

4.1 - à l'initialisation ...

Cela se passe lors de la configuration JavaScript de la carte au travers des paramètres center et zoom, dans l'exemple je souhaite positionner la carte de la manière suivante :

Niveau de zoom : 9
Centre de la carte : latitude = 47, longitude = 0

var rightMap = new Lascar.cl.Map(
  // "id_map", 
  {
    // Autres paramètres ...
    center: [47, 0], // ou : new L.LatLng(47, 0),
    zoom: 9
    // ...
  });

4.2 - pendant l'utilisation ...

Pour cela, deux manière s'offrent à vous :

l'utilisation des méthodes fournies par la librairie Leaflet : setView(center, zoom) et/ou setZoom(zoom).
l'utilisation de la méthode apply(options) fournie par LASCARjs vous permettant de configurer le zoom, le centre et si besoin le layer à utiliser.

En reprenant les valeurs de l'exemple précédent, voici ce que cela donne :

// Configuration via Leaflet ...
rightMap.setView([47,0], 9);

// Configuration via LASCARjs ...
rightMap.apply({
  center: [47,0],
  zoom: 9
  // Autres paramètres ...
});

Etape 5 : Synchronisation des cartes

Dans cette dernière étape, je vous propose d'exploiter l'ensemble des connaissances acquises dans l'objectif de faire en sorte de synchroniser les deux cartes : c'est-à-dire que la modification de position (latitude, longitude et zoom) de l'une se répercute sur l'autre.

Pour ce faire, vous allez devoir surveiller les événements de type moveend de chacune des cartes. Vous serez ainsi notifié des changements de positions ou de zoom. Il ne reste plus qu'à répercuter les changements sur l'autre carte.

Attention il vous faudra procéder à une vérification supplémentaire car en l'état, vous venez de générer une belle boucle infinie ... Je vous propose donc de récupérer uniquement les notifications liées à l'événement moveend lorsque le mouvement n'est pas issu d'un mouvement programmé (comprendre, qui est dû à un utilisateur).

Pour ma part, j'ai opté pour le développement suivant :

// On génère un composant dont l'objectif et de synchronizer
// les cartes entre elles de manière à conserver le même niveau
// de zoom et le même point central tout en offrant des vues
// différentes (grâce aux layers).
var synchronizer = new (
    L.Class.extend({
        initialize: function () {
            // On génère le tableau des cartes gérées par le 
            // synchroniseur.
            this.maps = new Array();
        },

        add: function (maps) {
            // S'il s'agît d'une carte, on lui affecte des 
            // réactions permettant de traiter la synchronisation.
            if (maps instanceof Lascar.cl.Map) {
                this.maps.push(maps);
                // On ajoute un comportement permettant de récupérer
                // les changements de position et de zoom.
                var _this = this;
                maps.options.isProgramatic = false;
                maps.on("moveend", function (event) {
                    console.log(this);
                    if (!this.options.isProgramatic) {
                        var config = {
                            lat: this.getCenter().lat,
                            lng: this.getCenter().lng,
                            zoom: this.getZoom()
                        };
                        // Dans notre cas, on provoque une synchronisation !
                        _this.synchronize(this, config);
                    } else {
                        // S'il s'agît d'un mouvement "programmé", 
                        // on le désactive une fois le mouvement terminé !
                        this.options.isProgramatic = false;
                    }
                });
            }
            // S'il s'agît d'un tableau, on le parcourt ...
            else if (maps instanceof Array) {
                var _this = this;
                $.each(maps, function (i, map) {
                    _this.add(map);
                });
            }
        },

        synchronize: function (caller, config) {
            // S'il s'agît d'une des cartes actuellement 
            // gérée par le composant, on répercute son 
            // changement de position sur les autres cartes.
            if (caller instanceof Lascar.cl.Map && $.inArray(caller, this.maps) >= 0) {
                // Pour les consignes à appliquer, on récupère 
                // celle de la notification et on supprime la 
                // notion de layer pour éviter les conflits ;-)
                var _this = this;
                $.each(this.maps.diff([caller]), function (i, map) {
                    map.options.isProgramatic = true;
                    map.apply(config);
                });

                return true;
            }
        }
    })
);

// Il ne reste plus qu'à associer les cartes au synchroniseur ...
synchronizer.add(leftMap);
synchronizer.add(rightMap);

Rendu

Une fois chacune des étapes précédentes réalisées, vous obtiendrez le résultat suivant :

Consulter le rendu

Accéder au tutoriel Utilisation rapide. ↩ ↩
Documentation de la classe Lascar.cl.Map. ↩ ↩
Documentation de la classe Lascar.cl.layer.RasterTileLayer. ↩