Appliquer un style aux niveaux de zoom

Sélectionnez une plate-forme : Android iOS JavaScript Services Web

Disponibilité : cette fonctionnalité est visible sur Android, iOS, JavaScript et Maps Static.

Pour que votre carte soit mieux adaptée aux besoins de vos utilisateurs, mettez en avant les éléments cartographiques en fonction du niveau de zoom sélectionné pour afficher la carte. Par exemple, vous pouvez mettre en avant les POI ou les routes lorsque les utilisateurs effectuent un zoom sur un lieu d'intérêt particulier.

Vous pouvez appliquer un style à des éléments cartographiques pour qu'ils s'affichent de la même manière à tous les niveaux de zoom d'une carte. Vous pouvez également créer, pour certains éléments, des styles différents selon les niveaux de zoom.

Tous les éléments ne permettent pas de personnaliser les niveaux de zoom. Les éléments cartographiques auxquels vous pouvez appliquer un style selon le niveau de zoom sont accompagnés d'une icône en forme de losange située à droite.

Icône en forme de losange indiquant qu'un style selon le niveau de zoom est disponible

Comprendre le style selon le niveau de zoom

Les niveaux de zoom vont de 0 (le plus grand zoom arrière, qui montre le monde entier) à 22 (le plus grand zoom avant, permettant d'afficher un détail spécifique de la carte). Un Keyzoom est un niveau de zoom à partir duquel vous souhaitez appliquer un nouveau style.

Lorsque vous appliquez un style à des éléments cartographiques à différents niveaux de zoom, ce style s'applique à tous les niveaux de zoom supérieurs (plus rapprochés) jusqu'à ce qu'un autre style de niveau de zoom soit atteint. Le niveau de zoom 0 est toujours ajouté avec le style actuel.

Par exemple, si vous appliquez des styles aux niveaux de zoom 5 et 10 :

  • Le style "Niveau de zoom 5" s'applique aux niveaux de zoom 5 à 9.
  • Le style "Niveau de zoom 10" s'applique aux niveaux de zoom 10 à 22.
  • Les niveaux de zoom 0 à 4 conservent le style actuel.

Lorsque vous personnalisez un style selon le niveau de zoom pour un élément cartographique, il remplace tous les styles personnalisés sur l'ensemble de l'élément cartographique.

Comprendre les transitions de niveau de zoom pour les cartes 3D

Lorsque vous inclinez une carte 3D et que vous passez d'un niveau de zoom à un autre, vous pouvez voir des couleurs de transition en dehors des styles de niveau de zoom que vous avez définis.

Par exemple, si vous définissez les styles de niveau de zoom comme suit :

  • Pour le niveau de zoom 10, la couleur de remplissage de l'eau est noire.
  • Pour le niveau de zoom 11, la couleur de remplissage de l'eau est blanche.

La couleur de remplissage de l'eau peut apparaître en gris lors de la transition entre les deux niveaux de zoom, comme illustré dans la figure suivante :

La couleur de remplissage de l'eau est noire au niveau de zoom 10, grise lors de la transition vers le niveau de zoom 11, puis blanche au niveau de zoom 11.

Personnaliser différents niveaux de zoom

  1. Dans la console Cloud, accédez à Styles de carte et sélectionnez un projet si nécessaire.

  2. Créez ou ouvrez un style de carte, puis sélectionnez Personnaliser. Pour en savoir plus, consultez Créer un style de carte.

  3. Dans le volet Éléments cartographiques, sélectionnez un élément cartographique à personnaliser. Un panneau s'ouvre et affiche les éléments personnalisables.

  4. À côté de l'élément auquel vous souhaitez ajouter un style selon le niveau de zoom, sélectionnez le losange de zoom à droite pour ouvrir le panneau correspondant au style selon le niveau de zoom.

    Icône en forme de losange indiquant qu'un style selon le niveau de zoom est disponible

  5. À côté de Niveau de zoom actuel, sélectionnez le niveau de zoom que vous souhaitez personnaliser. L'aperçu de la carte s'adapte à ce niveau de zoom.

    Menu affichant tous les styles de Keyzoom et un sélecteur pour le niveau de zoom actuel

  6. Sélectionnez Ajouter un Keyzoom. Le volet du style selon le niveau de zoom ajoute le nouveau keyzoom au niveau de zoom sélectionné et affiche la valeur de la carte de base par défaut correspondante.

    Un nouveau style de niveau de zoom pour le niveau de zoom actuel 12 s'affiche dans le volet du style selon le niveau de zoom avec sa valeur de carte de base par défaut.

  7. Appliquez un style à ce niveau de zoom et à tous les autres niveaux de zoom, si nécessaire.

    Définir un nouveau style selon le niveau de zoom

  8. Pour définir un autre niveau de zoom, modifiez le niveau de zoom actuel et sélectionnez à nouveau Ajouter un Keyzoom pour ajouter un autre niveau de zoom à la liste. Continuez à ajouter et à définir des styles selon le niveau de zoom jusqu'à ce que vous ayez terminé.

  9. Ensuite, fermez le volet du style selon le niveau de zoom.

Remplacer les valeurs de couleur de la carte de base par défaut pour un élément

Pour remplacer toutes les valeurs de couleur de la carte de base par défaut pour un élément à tous les niveaux de zoom, commencez par définir le style de l'élément dans le volet "Éléments". Lorsque vous ajoutez des keyzooms, ils utilisent la couleur que vous avez définie pour l'élément au lieu de la couleur de fond de carte par défaut.

Enregistrer et publier un style selon le niveau de zoom

  1. Pour enregistrer les modifications apportées à votre style de carte, sélectionnez Enregistrer.

  2. Pour appliquer vos modifications aux ID de carte associés à votre style de carte, sélectionnez Publier.

Supprimer un style selon le niveau de zoom

  1. Dans le volet Éléments cartographiques, sélectionnez un élément cartographique personnalisé.

  2. À côté d'un élément de style, sélectionnez le losange à droite. Les éléments appliquant un style selon le niveau de zoom personnalisé comportent un losange bleu plein.

    L'élément de style de visibilité comporte une icône en forme de losange gris vide. L'élément de style de couleur de remplissage comporte un losange bleu plein, ce qui indique qu'un style personnalisé selon le niveau de zoom est défini.

  3. Dans le panneau "Zoom clé", sélectionnez l'icône Moins pour supprimer un niveau de zoom.

    Pour supprimer un style selon le niveau de zoom, sélectionnez l'icône Moins.

Supprimer tous les styles selon le niveau de zoom

Si vous souhaitez supprimer tous les styles personnalisés d'un élément cartographique, vous pouvez procéder de l'une des manières suivantes :

  • Dans le panneau "Éléments", sélectionnez l'icône  à côté du nom de l'élément.
  • Dans le panneau de zoom sur les images clés, sélectionnez l'icône de réinitialisation  à côté du nom de l'élément.

Aperçu des détails au niveau de la route

Vous pouvez prévisualiser des détails améliorés au niveau des routes à des niveaux de zoom de 17 et plus sur vos styles existants, tels que des largeurs de route réalistes, des trottoirs, des marquages au sol et d'autres éléments dans certaines villes. Vous devez activer l'aperçu pour chaque session de l'éditeur de style. Ces fonctionnalités de carte routière détaillée ne sont visibles que dans les SDK ou les API qui prennent en charge les informations détaillées sur les routes. Pour les appliquer dans votre application, vous devez mettre à jour le SDK ou l'API associés vers la version qui prend en charge les informations au niveau de la route. Pour en savoir plus sur les versions des API et des SDK, consultez Informations détaillées sur Google Maps Platform.

Pour activer l'aperçu des détails des routes :

  1. Dans la console Google Cloud, accédez à Styles de carte.

  2. Sélectionnez un style existant ou créez-en un.

  3. Cliquez sur Personnaliser.

  4. Dans l'éditeur de style, cliquez sur Aperçu des détails des routes.

  5. Dans la boîte de dialogue d'aperçu, activez l'option Détails routiers.

Pour savoir quels détails de niveau de route vous pouvez styliser, consultez Éléments auxquels vous pouvez appliquer un style sur la carte.

Ajouter des styles de niveau de zoom pour adoucir la transition de style pour les niveaux de zoom 17 et plus

Aux niveaux de zoom 17 et plus, lorsque les détails au niveau des routes sont activés, les éléments de la carte routière disparaissent et deviennent des éléments de la carte de surface. Lorsque vous effectuez un zoom avant, tous les éléments stylisés qui s'appliquent à l'élément cartographique "Surface" s'affichent et remplacent les éléments et styles de la carte routière.

Pour rendre la transition entre les styles d'éléments cartographiques plus fluide, vous pouvez ajouter des styles de niveau de zoom afin de verrouiller les couleurs de votre style entre des niveaux de zoom spécifiques. Vous pouvez également utiliser des styles de niveau de zoom pour contrôler le moment où la couleur d'un nouveau style doit être appliquée de manière fluide.

Par exemple, au niveau de zoom 16, les éléments cartographiques listés sont stylisés comme suit :

  • Les artères sont en rouge.
  • L'autoroute est bleue.
  • Le local est jaune.
  • La surface est beige.

Carte de Seattle au niveau de zoom 16, où les routes sont stylisées en rouge, bleu et jaune.

Lorsque vous effectuez un zoom avant jusqu'au niveau 17, les routes principales, les autoroutes et les routes locales sont remplacées par l'élément cartographique "Surface", qui est stylisé en beige.

La même carte de Seattle au niveau de zoom 17, où toutes les routes sont désormais beiges, car elles sont passées à la fonctionnalité de carte de surface.

Pour créer une transition plus fluide entre les fonctionnalités de la carte routière et celles de la carte de surface, ajoutez les keyzooms et le style de niveau de zoom suivants :

Élément cartographique Niveau de zoom 0 Niveau de zoom 12 Niveau de zoom 17
Artérielle rouge rouge beige
Autoroute bleu bleu beige
Local jaune jaune beige

Après avoir ajouté un style selon le niveau de zoom, voici ce qui se produit lorsque vous effectuez un zoom avant :

  • Les routes principales, les autoroutes et les routes locales affichent la couleur personnalisée des niveaux de zoom 0 à 12.
  • Au-delà du niveau de zoom 12, la couleur stylisée commence à s'estomper pour laisser place à la couleur beige, jusqu'à ce qu'elle soit entièrement remplacée par la couleur beige du style de l'élément cartographique "Surface" au niveau de zoom 17.

La même carte de Seattle, mais avec des styles de niveau de zoom ajoutés à 12 et 17 afin que les couleurs de l'autoroute bleue se fondent dans la surface beige.