Composant SXA Map – Blogs performants

Salut les gens! Dans cet article, nous allons explorer comment configurer le composant SXA Map.

Conditions préalables:

1. Instance Sitecore 10.2 avec SXA (si vous avez une ancienne version de Sitecore avec SXA, essayez quand même).
2. Clé API Google Map – Suivez ce lien ci-dessous pour générer la clé google map.
   • https://developers.google.com/maps/documentation/javascript/get-api-key

3. Un locataire avec un emplacement.

La carte est un module. Pour vérifier si le module Carte est installé ou non lors de la création d’un site. Traversée vers un élément de site – /sitecore/content/tenant/site

Dans le champ Module, il devrait y avoir une entrée « Maps Site Setup » dans la liste sélectionnée.

Maps Site Setup dans la liste Site Module

S’il n’est pas trouvé, vous pouvez cliquer avec le bouton droit sur l’élément Site > Scripts > Ajouter un module de site et sélectionner Cartes et cliquer sur OK pour installer.

Si vous créez un nouveau site, sélectionnez le module « Cartes ».

Module Cartes

Configurons le composant Carte sur la page.

Sous l’élément Accueil, créez un élément à partir du modèle de page nommé « Démo de localisation ». Créez un autre élément nommé « Liste des emplacements » sous « Démo d’emplacement » et ouvrez-le dans l’éditeur d’expérience. Ou vous pouvez parcourir la page existante.

Par défaut, nous avons 3 espaces réservés – en-tête, principal et pied de page.

Sélectionnez l’espace réservé principal, cliquez sur « Ajouter ici » pour ajouter un rendu > Cartes > Carte, puis cliquez sur Sélectionner.

Ajouter ici sur l’espace réservé principal

Ajouter le rendu de la carte sur la page

Créez la source de données de la carte sous l’élément de données de la page actuelle ou sous l’élément Site Data Maps.

Créer une source de données Map

La carte ne se charge pas

Enregistrez la page.

La carte ne se charge pas. Pour résoudre ce problème, nous devons fournir la clé Map. Dans l’éditeur de contenu, accédez à l’élément de fournisseur de carte sous l’élément de paramètres du site – /sitecore/content/tenant/site/Settings/Maps Provider

Dans le champ Clé, indiquez la clé de carte que vous avez générée dans le cadre du prérequis. Enregistrez l’élément Fournisseur de cartes. Rechargez la page de l’éditeur d’expérience où la carte est ajoutée. Il devrait être résolu maintenant.

Si le problème persiste, veuillez vérifier le journal de la console de l’outil de développement. Les raisons peuvent être des problèmes de facturation ou la restriction du site Web liée au domaine ou à l’IP autorisé. Pour résoudre ce problème, gérez les paramètres en conséquence dans Console cloud de Google > Sélectionnez votre projet > API et services > identifiant.

Remarque : Si vous avez besoin de Bing, vous pouvez fournir sa clé API.

Jusqu’à présent, nous avons ajouté un composant Map avec une source de données et configuré la clé. Mais il n’affiche aucun emplacement ou marqueur de carte car nous n’avons pas encore fourni d’informations de localisation dans le champ POI de la source de données Map. Ajoutons donc quelques emplacements à la carte.

Accédez à /sitecore/content/tenant/site/Data/POIs

Ajouter un dossier POI

Cliquez avec le bouton droit sur l’élément POI > Sélectionnez le dossier POI et indiquez le nom de l’élément, puis cliquez sur OK.

Cliquez avec le bouton droit sur l’élément Dossier POI nouvellement créé > Sélectionnez POI et indiquez le nom de l’emplacement comme nom d’élément, puis cliquez sur OK.

Créez autant d’éléments POI que nécessaire pour chaque emplacement.

J’ai la structure ci-dessous.

Éléments de point d’intérêt de localisation

Il est bon d’avoir le dossier POI pour regrouper les emplacements. De plus, nous pouvons sélectionner le dossier POI directement dans le champ POI de la source de données Map au lieu de sélectionner chaque élément POI.

L’élément POI a les propriétés ci-dessous pour stocker les informations de localisation.

Élément POI qui stocke toutes les informations sur un emplacement

Fournissez la latitude et la longitude de l’emplacement donné.

Soyez prudent avec les signes. Il existe plusieurs façons de l’obtenir. Vous pouvez google l’emplacement donné. Par exemple, les coordonnées de l’Utah.

Ici, nous ne voyons pas le signe. Faites défiler le résultat pour trouver les coordonnées avec des signes comme indiqué ci-dessous.

Copiez les coordonnées de gauche avec un signe

Indiquez la valeur du champ Titre et POI simple dans le champ Type.

Le champ Type a le type de marqueur de /sitecore/content/tenant/site/Presentation/POI Types. Ici, chaque type de POI est mappé avec une variante pour représenter le marqueur dans le champ Variante par défaut.

Propriétés des éléments de type POI

La variante est définie sous /sitecore/content/tenant/site/Presentation/Rendering Variants/POI

Fournissez les valeurs des champs de description, d’image et de page POI.

Assurez-vous de fournir les coordonnées dans l’élément POI sinon, il n’apparaîtra pas sur la carte.

Ainsi, une fois que vous avez créé des éléments POI, donnez toutes les valeurs de champ. Traverser vers l’élément de source de données Map. Dans mon cas, il se trouve sous l’élément de données de la page en cours.

Source de données cartographiques

Ci-dessus, les valeurs par défaut. Modifiez-le selon vos besoins. Le mode point central a les 3 options ci-dessous qui sont très utiles.

Champ de mode de point central dans la source de données Map

Tous les POI visibles – Tous les marqueurs de localisation sont visibles lors du chargement de la page.

Emplacement actuel – Au chargement de la page, le navigateur vous invite à autoriser l’accès à l’emplacement actuel s’il n’est pas autorisé. Réinitialisez l’accès à l’emplacement actuel s’il est bloqué au niveau du navigateur.

Point central défini – Si cette option est sélectionnée, fournissez les valeurs de champ pour la latitude du point central et la longitude du point central, sinon elle sera considérée comme 0 (Île nulle) 😉

Gardons la valeur par défaut – « Tous les POI visibles » à des fins de test.

Zoom – La valeur par défaut est 15. Complète les options « Emplacement actuel » et « Point central défini ». Plus le nombre est élevé pour effectuer un zoom avant, plus le nombre est bas pour effectuer un zoom arrière.

Source de données cartographiques – champ POI pour la cartographie des emplacements

Dans le champ POI, sélectionnez les éléments POI individuels ou le dossier POI pour la cartographie de l’emplacement. Si vous souhaitez prendre en compte tous les emplacements, vous pouvez simplement sélectionner l’élément POI du site actuel lui-même.

Sauvegarder. Rechargez la page dans l’éditeur d’expérience où la carte est ajoutée.

Basé sur la configuration ci-dessus ci-dessous est la sortie.

Carte

Marqueur de points d’intérêt

J’espère que cela t’aides.

Vérifiez Carte Sitecore SXA Partie 2 pour en savoir plus sur l’utilisation de la carte en conjonction avec les composants Location Finder et Search Results.

Bonne cartographie Sitecore SXA 🙂