Commeint intégrer des cartes en encart dans vos applications cartographiques Web ?

Bonjour, aujourd'hui je vais vous présenter comment intégrer les cartes en encart (petite carte dans une grande carte) dans votre application Web. Une carte en encart est une carte plus petite insérée dans une carte plus grande. Les cartes en encart servent à plusieurs fins, notamment:

- Donnez un aperçu de la carte principale.

Les cartes en encart peuvent montrer l'emplacement de la carte principale dans le contexte d'une zone plus grande.

- Afficher plus de détails sur une partie de la carte principale.

- Communiquez des variables de données supplémentaires, ou des vues filtrées, de la zone principale de la carte.

Les cartes en encart peuvent afficher la même zone que la carte principale, mais dans le contexte de données filtrées ou de variables de données associées.

- Affichez les géométries non contiguës d'un seul coup d'œil.

Les cartes en encart peuvent afficher des données liées mais non continues dans une vue compacte. Il s'agit d'une approche courante pour visualiser l'Alaska et Hawaï sur les cartes des États-Unis.

Les cartes en encart sont fréquemment utilisées dans la cartographie imprimée, mais sont beaucoup moins courantes dans le monde de la cartographie Web. Cela a du sens étant donné que les cartes Web fournissent souvent des fonctionnalités interactives, telles que le panoramique et le zoom, l'affichage d'informations supplémentaires dans des fenêtres contextuelles et l'utilisation de widgets pour filtrer et explorer les données à différents intervalles et étendues de temps.

Malgré tout ce que le Web a à offrir en termes d'interactivité, il existe toujours une demande pour des applications Web simplifiées qui tirent parti des cartes en encart. Cela est particulièrement vrai dans le quatrième scénario répertorié ci-dessus: pour afficher des géométries non continues d'un seul coup d'œil.

Géométries non contiguës en un coup d'œil

Les cartes imprimées traditionnelles des États-Unis placent souvent l'Alaska et Hawaï dans des cartes incrustées sous les 48 États inférieurs. Cela permet aux utilisateurs de visualiser les informations des 50 états en un coup d'œil sans avoir à tourner les pages ou à ouvrir de nouvelles cartes.

Cette vue des États-Unis peut être utile même pour les cartes Web. La carte suivante montre l'évolution des visites dans les parcs nationaux de 2019 à 2020.

Changement total des visites dans les parcs nationaux des États-Unis 2019-2020. Cette carte a trois vues en encart: l'Alaska, Hawaï et les îles Vierges.

Une carte, plusieurs vues

L'API ArcGIS for JavaScript (ArcGIS JS API) comprend des classes MapView (2D) et SceneView (3D) qui rendent des données géographiques dans des cartes et des scènes Web. Les applications Web peuvent contenir plusieurs vues à la fois. Ces vues peuvent rendre différentes cartes qui se complètent, offrir une comparaison 2D / 3D d'une zone ou être utilisées pour rendre une occurrence de carte dans différentes étendues de vue.

Chaque vue nécessite un contexte de rendu WebGL. Étant donné que les navigateurs ne prennent en charge que 16 contextes WebGL à la fois, vous devez limiter le nombre de vues dans votre application à moins de 16.

Du point de vue de l'utilisateur, l'application des parcs nationaux illustrée ci-dessus rend quatre cartes qui pointent vers une seule source de données. Dans le jargon de l'API ArcGIS JS, nous disons qu'il s'agit de quatre vues de la même carte.

Cela signifie que je peux créer, styliser et gérer mes couches dans une seule instance de carte. Ensuite, je peux référencer la même carte dans chacune des quatre vues.

const map = new WebMap({ // manage operational layers here layers: [] }); const usView = new MapView({ container: "usView", map, ...usViewProperties }); const akView = new MapView({ container: "akView", map, ...akViewProperties }); const viView = new MapView({ container: "viView", map, ...viViewProperties }); const hiView = new MapView({ container: "hiView", map, ...hiViewProperties });

Chaque vue a besoin d'une référence au nœud DOM contenant la vue, la carte et d'autres propriétés, telles que la référence spatiale (projection cartographique), le point central et l'échelle (ou alternativement une étendue).

const usView = new MapView({ map: new WebMap(), container: "usViewDiv", center: { spatialReference: { wkid: 5070 }, x: 672019, y: 1501270 }, scale: 36353220, spatialReference: { // NAD_1983_Contiguous_USA_Albers wkid: 5070 } });

Référence spatiale

La vue vous permet de projeter des données à la volée à l'aide de la propriété spatialReference.

const akView = new MapView({ ...viewParams, spatialReference: { // WGS_1984_EPSG_Alaska_Polar_Stereographic wkid: 5936 } });

Ceci est important pour les vues incrustées qui affichent des zones, telles que l'Alaska, qui seraient autrement fortement déformées dans la projection Web Mercator courante.

L'Alaska projeté dans Web Mercator (à droite) est fortement déformé en surface et en forme en raison de sa distance par rapport à la ligne de tangence de la projection, l'équateur. À l'inverse, la projection stéréographique polaire de l'Alaska préserve les propriétés, telles que la surface et la forme.

La référence spatiale d'une vue dépend généralement de la référence spatiale des couches dans un fond de carte. Ces couches sont souvent carrelées. Malheureusement, les couches en mosaïque ne peuvent pas être reprojetées à la volée. Par conséquent, la définition de la référence spatiale d’une vue ne fonctionne que pour les fonds de carte créés à l’aide de couches d’entités, qui peuvent être reprojetées à la volée.

Afficher les contraintes

Les cartes Web qui tirent parti des encarts nécessitent probablement une sorte de contraintes de vue. La propriété constraints de MapView vous permet de restreindre la manière dont l'utilisateur interagit avec la vue. Vous pouvez contraindre leur navigation en fonction de l'étendue ou de la géométrie, de l'échelle maximale et minimale et de la rotation.

const akView = new MapView({ ...viewParams, constraints: { rotationEnabled: false, minScale: 13076340, maxScale: 4338033, geometry: new Extent({ spatialReference: { wkid: 5936 }, xmin: 737823.0703569443, ymin: -2103604.250401656, xmax: 3689660.4504700145, ymax: 110273.7846831464 }) } });

La contrainte par une étendue vous permet toujours de naviguer dans une limite d'état. Il ne restreint pas complètement la navigation dans les vues. Pour les cartes incrustées, vous souhaiterez peut-être figer la vue afin que l'utilisateur ne puisse pas faire un panoramique lâche. Par exemple, le panoramique de la vue Hawaï n’ajoute pas de valeur à l’utilisateur.

Permettre à l'utilisateur de faire un panoramique et un zoom dans la vue incrustée d'Hawaï n'ajoute pas de valeur réelle à l'utilisateur final.

Toute navigation est désactivé sur cette vue (et la vue pour les îles Vierges).

En raison de la taille et des variations de densité et de dispersion des données, j'ai choisi de permettre une navigation limitée des utilisateurs dans les vues des 48 États inférieurs et de l'Alaska.

Autoriser la navigation peut être approprié pour les encarts qui couvrent de grandes surfaces.

Remarque : J'ai réinitialisé l'étendue de la vue Alaska sur le flou (lorsque le focus est défini sur un autre élément de l'application). Cela réinitialise la vue afin que l'utilisateur puisse voir tous les parcs de l'Alaska lorsqu'il a fini de se concentrer sur cette vue.

Popup

Chaque instance d'un MapView a sa propre fenêtre contextuelle. Par défaut, lorsque vous cliquez sur une fonction, la fenêtre contextuelle tentera de s'ouvrir dans le conteneur de vue de la fonction sur laquelle vous avez cliqué.

Par défaut, la fenêtre contextuelle s'ouvre dans la vue de la fonction cliquée. Cela rend la fenêtre contextuelle presque impossible à lire dans les vues incrustées.

Étant donné que le contenu de la fenêtre contextuelle, en particulier le graphique, est difficile à lire, vous devrez afficher la fenêtre contextuelle d'une autre manière.

Dans les applications qui contiennent des cartes incrustées, je suggère de désactiver la fenêtre contextuelle dans toutes les vues et d'utiliser le widget Feature à la place. Le widget de fonctionnalité vous permet de rendre le contenu contextuel en dehors d'une vue. Ce widget vous donne un contrôle total sur l’emplacement, le contenu et le style de la fenêtre contextuelle. Ainsi, vous n’êtes pas limité aux petits conteneurs de vue lorsque l’utilisateur interagit avec des cartes en encart.

Dans cette application, j'ai désactivé le popupTemplate sur toutes les couches et j'utilise MapView.hitTest() pour trouver les fonctionnalités sélectionnées par l'utilisateur et les pousser vers le widget Feature.

const layerView = await view.whenLayerView(layer); view.on("click", async(event) => { const response = await view.hitTest(event, { include: layer }); lastHighlight = highlight; // if a feature is returned, highlight it // and display its attributes in the popup // if no features are returned, then close the popup let id = null; if (response && response.results.length) { const feature = response.results[0].graphic; // feature.popupTemplate = layer.popupTemplate; id = feature.getObjectId(); highlight = layerView.highlight([id]); const selectionId = Widgets.featureWidget.graphic ? Widgets.featureWidget.graphic.getObjectId() : null; if (highlight && id !== selectionId) { Widgets.featureWidget.graphic = feature; (Widgets.featureWidget.container as HTMLElement).style.display = "block"; } } else { if (Widgets.featureWidget && Widgets.featureWidget.graphic) { Widgets.featureWidget.graphic = null; (Widgets.featureWidget.container as HTMLElement).style.display = "none"; } } // remove the previous highlight if (lastHighlight) { lastHighlight.remove(); lastHighlight = null; } });

Le widget Fonctionnalité vous permet de détacher une fenêtre contextuelle d'une vue afin que vous puissiez afficher le contenu interrogé à partir des fonctionnalités dans n'importe quelle vue et l'afficher n'importe où dans l'application.

Attribution

Par défaut, chaque vue contient des instances de widgets par défaut, tels que Zoom et Attribution. Étant donné que chaque vue représente la même carte, et donc les mêmes sources de données, le texte d'attribution est inutilement affiché quatre fois.

Les composants d'interface utilisateur par défaut, tels que le zoom et l'attribution encombrent les vues incrustées et affichent inutilement des informations en double.

Étant donné que plusieurs widgets d'attribution affichent des informations en double, je masque l'attribution dans toutes les cartes en encart et je ne la conserve que pour la vue principale.

Le code suivant affiche uniquement l'attribution dans les vues non incrustées.

const akView = new MapView({ ...viewProperties, ui: { // displays attribution only in non-inset views components: !isInset ? ["attribution"] : [] } }); Il exclut également le widget de zoom de ces vues car il n 'est pas nécessaire dans les inserts avec la navigation désactivée.

Considérations mobiles

Les cartes en encart fonctionnent bien lorsque vous avez beaucoup d'espace d'écran à votre disposition, comme les résolutions fournies par les moniteurs de bureau et d'ordinateur portable. Cependant, ils sont difficiles à implémenter dans les vues mobiles.

Sans parler des écrans mobiles, une carte avec plusieurs encarts pourrait ressembler à ce qui suit sur un appareil mobile Pixel 2.

L'application Parcs nationaux telle qu'elle est affichée sur un Pixel 2 lorsqu'elle n'est pas conçue pour une visualisation mobile. Les cartes en encart sur les appareils mobiles sont difficiles à gérer, en particulier lorsque plusieurs sont impliqués.

Étant donné que l'Alaska et Hawaï abritent de nombreux parcs nationaux, j'ai estimé qu'il était important de veiller à ce que les utilisateurs puissent bien visualiser leurs données sur les appareils mobiles.

Si un navigateur mobile est détecté, l'application crée uniquement la vue des 48 états inférieurs. Vous pouvez ensuite fournir des options d'interface utilisateur pour afficher les données en Alaska et à Hawaï.

Par défaut, l'application masque toutes les vues incrustées et affiche uniquement une vue contrainte des 48 états inférieurs.

L'interface utilisateur fournit une option pour sélectionner des vues d'autres états qui auraient autrement été rendues sous forme de vues incrustées dans une application de bureau.

Le widget Expand permet à l'utilisateur d'afficher / masquer facilement des widgets, tels que la légende dans de petites vues mobiles.

Pourquoi ne pas utiliser des géosignets au lieu de changer de vue sur les appareils mobiles?

Les géosignets fonctionnent bien pour les ensembles de données qui reposent sur une projection cartographique cohérente pour chaque zone d'intérêt. Dans le cas du rendu des données pour l'Alaska et Hawaï, je souhaitais continuer à utiliser des projections spécifiques à ces états pour une meilleure visualisation. Si j'utilisais des signets, je serais limité à utiliser une projection commune pour les 48 inférieurs, l'Alaska et Hawaï.

Contraintes mobiles

Les contraintes que vous déterminez pour chaque carte et vue en encart devront probablement également être ajustées pour les appareils mobiles.

J'ai défini les propriétés de vue initiales, telles que l'échelle, le centre et les contraintes pour chaque type de vue dans l'application: bureau, mobile et encart (disponible uniquement pour certaines vues sur bureau).

export async function createAkView(params) { const { container, map, isMobile, isInset } = params; const mobileScale = 24510951; const desktopScale = 13076340; const insetScale = 40436349; const scale = isInset ? insetScale : isMobile ? mobileScale : desktopScale; const insetCenter = fromJSON({ "spatialReference": { "wkid": 5936 }, "x": 2103194.674427798, "y": -957221.1614695506 }); const fullCenter = fromJSON({ "spatialReference": { "wkid": 5936 }, "x": 1811978.2456641502, "y": -1043832.0433061125 }); const center = isInset ? insetCenter : fullCenter; const mobileConstraints = { // constraints defined here }; const desktopConstraints = { // constraints defined here }; const constraints = isInset || isMobile ? mobileConstraints : desktopConstraints; const akView = new MapView({ map, container, center, scale, constraints, spatialReference: { // WGS_1984_EPSG_Alaska_Polar_Stereographic wkid: 5936 }, ui: { components: !isInset ? ["attribution"] : [] } }); return akView.when(); }

Choses à considérer

Gardez à l'esprit que la création de cartes en incrustation peut être problématique dans certains scénarios, en particulier avec les moteurs de rendu qui dépendent de l'échelle de la vue.

Étant donné que les cartes en incrustation affichent généralement les données à différentes échelles, la création d'une visualisation dépendante de l'échelle est déconseillée. Cela inclut toute visualisation impliquant une heatmap, une densité de points, des icônes dépendant de l'échelle et des symboles gradués.

Par exemple, dans le cas des plages de tailles dépendant de l'échelle (symboles gradués), les icônes en Alaska (une vue à plus petite échelle) apparaîtront plus petites qu'elles ne le devraient par rapport aux parcs des 48 états inférieurs. Ceci est similaire dans le concept à la mesure des distances dans l'espace d'écran en Alaska et à la comparaison de la même distance dans les 48 inférieurs. Cela communique des modèles incorrects à l'utilisateur final.

Conclusion

J'espère que vous avez trouvé cet article utile et qu'il vous incite à essayer des cartes en encart dans vos propres applications Web. N'hésitez pas à retrouver le code sur GitHub de Kristian Ekenes et à le modifier avec vos propres données.

Vous pouvez vous abonner à ce blog pour lire d'autres articles sur le développement Web d'applications cartographiques et découvrir comment l'ArcGIS API JavaScript est une superbe alternative à Google Maps ! Vous voulez vous aussi réaliser des applications Web cartographiques et dynamiques ? N'hésitez pas à souscrire à un plan gratuit ArcGIS for Developers pour développer vos propres applications cartographiques 2D ou 3D ! Cet article résume ce que vous obtiendrez. Et pour en savoir sur l'API c'est ici.