Rendre une Carte disponible en Hors Ligne

Le mode hors ligne de vMap2 permet de rendre vos cartes accessibles sans connexion Internet. En quelques étapes simples, préparez et synchronisez vos cartes pour une utilisation continue sur le terrain, garantissant une performance optimale et une accessibilité fiable de vos données géospatiales, où que vous soyez. Profitez de cette fonctionnalité pour assurer la continuité de vos opérations, améliorer la collecte de données sur le terrain, et travailler sans interruption dans des environnements avec une connectivité limitée ou inexistante.


Configuration des zones hors ligne sur une carte

Paramétrer des zones sur une carte pour le mode hors ligne

Optimisez l'utilisation de vos cartes en définissant des zones spécifiques accessibles en mode hors ligne. Cette fonctionnalité vous permet de sélectionner et de télécharger des zones géographiques particulières, garantissant que les données cruciales sont toujours à portée de main, même sans connexion Internet. Configurez vos zones hors ligne pour assurer une navigation fluide et un accès continu aux informations géospatiales essentielles.

Pour définir et paramétrer les zones sur une carte pour le mode hors ligne, il est nécessaire d'avoir configuré les zones d'extraction au préalable dans l'application (voir plus ici).

Voici les étapes à suivre :

  1. Accéder à la modification d'une carte :

  • Allez dans la section Zones hors ligne lors de la modification d'une carte. Vous arriverez sur la liste des zones disponibles pour cette carte.

Zones disponible

  1. Gérer les zones :

  • Cliquez sur le bouton Gérer les zones. Ce bouton permet d'ajouter ou de supprimer facilement des zones d'une carte en se basant sur la liste des zones prédéfinies pour l'application. Ce bouton ouvre une interface de gestion intuitive pour les administrateurs.

  • Ajouter des zones : Déplacez les zones de la liste de gauche à droite pour les ajouter.

  • Supprimer des zones : Déplacez les zones de la liste de droite à gauche pour les retirer.


Configuration des couches hors ligne sur une carte

Personnalisez l'expérience hors ligne de vos cartes en configurant les couches spécifiques disponibles sans connexion. Sélectionnez les couches nécessaires et synchronisez-les pour une utilisation hors ligne, garantissant ainsi que les informations pertinentes sont toujours accessibles.

Seules les couches de type Postgres peuvent être configurées pour le mode hors ligne. L'option hors ligne ne sera disponible que pour ces couches. Pour configurer une couche vectorielle en hors ligne, suivez les étapes suivantes :

  1. Accéder aux Paramètres Avancés de la Couche :

Sélectionnez la couche à configurer pour le mode hors ligne et allez dans les paramètres avancés.

Paramètre avancé couche hors ligne

  1. Choisir le Type d'Intersection :

  • Extraction par valeur : Choisissez le champ sur lequel sera basée l'intersection. L'extraction se fera sur le code de la zone configurée précédemment.

  • Objet strictement contenu : Les données extraites seront celles strictement contenues dans la géométrie de la zone. Le champ sera automatiquement rempli par le champ géométrique de la couche.

  • Objet contenu ou intersectant : Les données extraites seront celles intersectant la géométrie de la zone. Le champ sera automatiquement rempli par le champ géométrique de la couche.

Vous pourrez par la suite ajouter les couches hors ligne à votre carte en passant par la section Couches hors ligne. Veuillez noter que seules les couches liées à une carte et disponible en mode hors ligne seront disponibles à l'ajout de cette même carte.


Configuration de la symbologie hors ligne d'une couche

Assurez-vous que vos cartes restent visuellement cohérentes et informatives en configurant la symbologie des couches pour le mode hors ligne. Personnalisez les styles pour qu'ils soient disponibles sans connexion, garantissant que vos cartes conservent leur clarté et leur efficacité. La configuration de la symbologie hors ligne permet une représentation fidèle et esthétique de vos données géospatiales en toutes circonstances. Dans cet exemple, nous appliquons différents styles aux villes de France selon leur population.

Pour configurer la symbologie hors ligne d'une couche, vous devez remplir un champ de type JSON contenant soit un objet avec les propriétés style, filter et/ou else soit un tableau de plusieurs objets. Le style détermine l'apparence des éléments et le filtre définit les conditions d'application de ce style. La configuration de la symbologie se base sur le style Flat de OpenLayers. La documentation complète pour réaliser votre symbologie personnalisée est disponible ici.

Exemple de configuration

[
    {
        "style": {
            "fill-color": "rgba(255,204,204,0.8)",
            "stroke-color": "#ffcccc",
            "stroke-width": 1,
            "circle-radius": 4,
            "circle-fill-color": "rgba(255,204,204,0.6)",
            "circle-stroke-width": 1.25,
            "circle-stroke-color": "#ffcccc"
        },
        "filter": [
            "<",
            [
                "get",
                "pop90"
            ],
            10000
        ]
    },
    {
        "style": {
            "fill-color": "rgba(255,102,102,0.6)",
            "stroke-color": "#ff6666",
            "stroke-width": 1,
            "circle-radius": 6,
            "circle-fill-color": "rgba(255,102,102,0.6)",
            "circle-stroke-width": 1.25,
            "circle-stroke-color": "#ff6666"
        },
        "filter": [
            "all",
            [
                ">=",
                [
                    "get",
                    "pop90"
                ],
                10000
            ],
            [
                "<",
                [
                    "get",
                    "pop90"
                ],
                50000
            ]
        ]
    },
    {
        "style": {
            "fill-color": "rgba(255,51,51,0.6)",
            "stroke-color": "#ff3333",
            "stroke-width": 1,
            "circle-radius": 8,
            "circle-fill-color": "rgba(255,51,51,0.6)",
            "circle-stroke-width": 1.25,
            "circle-stroke-color": "#ff3333"
        },
        "filter": [
            "all",
            [
                ">=",
                [
                    "get",
                    "pop90"
                ],
                50000
            ],
            [
                "<",
                [
                    "get",
                    "pop90"
                ],
                100000
            ]
        ]
    },
    {
        "else": true,
        "style": {
            "fill-color": "rgba(204,0,0,0.6)",
            "stroke-color": "#cc0000",
            "stroke-width": 1,
            "circle-radius": 12,
            "circle-fill-color": "rgba(204,0,0,0.6)",
            "circle-stroke-width": 1.25,
            "circle-stroke-color": "#cc0000"
        }
    }
]

Exemple détaillé de la Symbologie

Filtre

Population < 10 000 habitants

Remplissage

rgba(255,204,204,0.8)

Couleur de contour

#ffcccc

Largeur du contour

1

Rayon du cercle

4

Couleur de remplissage du cercle

rgba(255,204,204,0.6)

Largeur du contour du cercle

1.25

Couleur de contour du cercle

#ffcccc


Insertion d'Image en Base 64 :

  1. Opérateurs de Lecture :

  • ['get', 'attributeName', typeHint]: Récupère la valeur d'une propriété d'un objet, similaire à feature.get('attributeName'). Un type hint peut être spécifié pour lever les ambiguïtés de type.

  1. Opérateurs Logiques :

  • ['any', value1, value2, ...]: Renvoie vrai si l'une des valeurs est vraie.

  • ['==', value1, value2]: Renvoie vrai si value1 est égal à value2.


Exemple de Filtre avec image et texte

Icône Style

{
      "icon-src": "data:image/png;base64,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",
      "icon-scale": 0.4
    }

Propriétés de l'icône:

  • icon-src: L'image de l'icône encodée en base64.

  • icon-scale: L'échelle de l'icône (ici à 0.4).

Vous pouvez ajuster l'image encodée en base64, l'échelle de l'icône et les noms de ville selon vos besoins.


Texte Style

{
    "text-scale": [
        1.5,
        1.5
    ],
    "text-value": [
        "get",
        "nom"
    ],
    "text-offset-y": 20,
    "text-fill-color": "#000000"
}

Propriétés du texte:

  • text-scale: Échelle du texte (ici 1.5 fois plus grand).

  • text-value: Le nom de la ville à afficher. Utilise l'attribut "nom" de la source de données.

  • text-offset-y: La position verticale du texte par rapport à l'icône (ici à 20 pixels en dessous).

  • text-fill-color: La couleur du texte (ici en noir).


Filtre

Le filtre permet de sélectionner uniquement les villes ayant comme valeur de l'attribut nom : "Perpignan", "Lyon" et "Rennes". Utilisons le filtre any avec plusieurs conditions ==.

{
  "filter": [
    "any",
    [
        "==",
        [
            "get",
            "nom"
        ],
        "Perpignan"
    ],
    [
        "==",
        [
            "get",
            "nom"
        ],
        "Lyon"
    ],
    [
        "==",
        [
            "get",
            "nom"
        ],
        "Rennes"
    ]
  ]
}

Propriétés du filtre:

  • ["any", ...]: Ce filtre utilise l'opérateur any pour vérifier si l'une des conditions suivantes est vraie.

  • ["==", ["get", "nom"], "Perpignan"]: Vérifie si la valeur de l'attribut nom est "Perpignan".

  • ["==", ["get", "nom"], "Lyon"]: Vérifie si la valeur de l'attribut nom est "Lyon".

  • ["==", ["get", "nom"], "Rennes"]: Vérifie si la valeur de l'attribut nom est "Rennes".

Ce filtre appliquera l'icône spécifiée aux objets géographiques dont le nom est soit "Perpignan", "Lyon" ou "Rennes".


Exemple complet

[
    {
        "style": [
            {
                "icon-src": "data:image/png;base64,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",
                "icon-scale": 0.4
            },
            {
                "text-scale": [
                    1.5,
                    1.5
                ],
                "text-value": [
                    "get",
                    "nom"
                ],
                "text-offset-y": 20,
                "text-fill-color": "#000000"
            }
        ],
        "filter": [
            "any",
            [
                "==",
                [
                    "get",
                    "nom"
                ],
                "Perpignan"
            ],
            [
                "==",
                [
                    "get",
                    "nom"
                ],
                "Lyon"
            ],
            [
                "==",
                [
                    "get",
                    "nom"
                ],
                "Rennes"
            ]
        ]
    },
    {
        "style": {
            "fill-color": "rgba(255,204,204,0.8)",
            "stroke-color": "#ffcccc",
            "stroke-width": 1,
            "circle-radius": 4,
            "circle-fill-color": "rgba(255,204,204,0.6)",
            "circle-stroke-color": "#ffcccc",
            "circle-stroke-width": 1.25
        },
        "filter": [
            "<",
            [
                "get",
                "pop90"
            ],
            10000
        ]
    },
    {
        "style": {
            "fill-color": "rgba(255,102,102,0.6)",
            "stroke-color": "#ff6666",
            "stroke-width": 1,
            "circle-radius": 6,
            "circle-fill-color": "rgba(255,102,102,0.6)",
            "circle-stroke-color": "#ff6666",
            "circle-stroke-width": 1.25
        },
        "filter": [
            "all",
            [
                ">=",
                [
                    "get",
                    "pop90"
                ],
                10000
            ],
            [
                "<",
                [
                    "get",
                    "pop90"
                ],
                50000
            ]
        ]
    },
    {
        "style": {
            "fill-color": "rgba(255,51,51,0.6)",
            "stroke-color": "#ff3333",
            "stroke-width": 1,
            "circle-radius": 8,
            "circle-fill-color": "rgba(255,51,51,0.6)",
            "circle-stroke-color": "#ff3333",
            "circle-stroke-width": 1.25
        },
        "filter": [
            "all",
            [
                ">=",
                [
                    "get",
                    "pop90"
                ],
                50000
            ],
            [
                "<",
                [
                    "get",
                    "pop90"
                ],
                100000
            ]
        ]
    },
    {
        "else": true,
        "style": {
            "fill-color": "rgba(204,0,0,0.6)",
            "stroke-color": "#cc0000",
            "stroke-width": 1,
            "circle-radius": 12,
            "circle-fill-color": "rgba(204,0,0,0.6)",
            "circle-stroke-color": "#cc0000",
            "circle-stroke-width": 1.25
        }
    }
]

Résultat final

Carte de France hors ligne


Légendes

Pour garantir une interprétation claire et cohérente de vos cartes en mode hors ligne, configurez une légende adaptée à la symbologie de vos couches. Insérez des images explicatives directement dans un champ dédié, permettant ainsi aux utilisateurs de comprendre facilement les différents symboles et styles utilisés sur la carte, même sans connexion Internet. Une légende bien définie facilite la lecture et l'analyse des données géospatiales, assurant que toutes les informations nécessaires sont accessibles et compréhensibles en mode hors ligne.

Légende de la carte de France hors ligne

Légende à insérer pour la carte :

Légende de la carte de France hors ligne


Configuration du formulaire hors ligne d'une couche

Améliorez la collecte de données sur le terrain en configurant des formulaires hors ligne pour vos couches. Créez et personnalisez des formulaires de saisie de données qui peuvent être utilisés sans connexion Internet, facilitant la collecte d'informations précises et complètes sur le terrain.

Les mêmes champs du studio vMap2 en ligne sont disponibles en hors ligne. Il y a un nouveau bouton d'action capable de copier le formulaire publié et d'accéder à l'assistant de conception pour une gestion facile des champs. Il est important de bien comptabiliser le nombre de sources de données dépendantes du formulaire pour éviter qu'elles ne soient trop gourmandes en ressources sur le téléphone.