Changer le style de la carte

Le contrôle de carte prend en charge différentes options de style de carte et plusieurs styles de carte de base. Tous les styles peuvent être définis lors de l’initialisation du contrôle de carte. Vous pouvez également définir des styles à l’aide de la fonction setStyle du contrôle de carte. Cet article vous explique comment utiliser ces options de style pour personnaliser l’apparence de la carte et comment implémenter le contrôle sélecteur de style dans votre carte. Le contrôle du sélecteur de styles permet à l’utilisateur de basculer entre différents styles de base.

Définir les options de style de carte

Les options de style peuvent être définies lors de l’initialisation du contrôle web. Vous pouvez également mettre à jour les options de style en appelant la fonction setStyle du contrôle de carte. Pour afficher toutes les options de style disponibles, consultez Options de style.

//Set the style options when creating the map.
var map = new atlas.Map('map', {
    renderWorldCopies: false,
    showLogo: true,
    showFeedbackLink: true,
    style: 'road'

    //Additional map options.
});

//Update the style options at anytime using `setStyle` function.
map.setStyle({
    renderWorldCopies: true,
    showLogo: false,
    showFeedbackLink: false
});

Définir un style de carte de base

Vous pouvez également initialiser le contrôle de carte avec l’un des styles de carte de base disponibles dans le Kit de développement logiciel (SDK) web. Vous pouvez ensuite utiliser la fonction setStyle pour mettre à jour le style de base avec un style de carte différent.

Définir un style de carte de base lors de l’initialisation

Les styles de base du contrôle de carte peuvent être définis lors de l’initialisation. Dans le code suivant, l'option style du contrôle de carte est définie sur le style de carte de base grayscale_dark.

var map = new atlas.Map('map', {
    style: 'grayscale_dark',

    //Additional map options
});

Mettre à jour le style de carte de base

Le style de la carte de base peut être mis à jour à l’aide de la fonction setStyle et en définissant l’option style pour changer le style de la carte de base ou pour ajouter des options de style supplémentaires.

Dans le code suivant, après le chargement d’une instance de carte, le style de carte est mis à jour de grayscale_dark en satellite à l’aide de la fonction setStyle.

map.setStyle({ style: 'satellite' });

Personnaliser la carte de base

Les options styleOverrides permettent aux utilisateurs de simplifier la carte de base en désactivant des éléments spécifiques de la carte comme les frontières pays/région, les frontières des districts administratifs, les empreintes des bâtiments et les couches de détails routiers. Cela permet une vue cartographique plus nette et plus simple, facilitant la visualisation des données géométriques.

Le code suivant montre comment désactiver les frontières des pays/régions et les empreintes des bâtiments sur la carte.

var map = new atlas.Map('map', {
    styleOverrides: {
        countryRegion: { borderVisible: false },
        buildingFootprint: { visible: false },
    },

    //Additional map options
});

Voici des exemples des cinq options disponibles styleOverrides :

• Frontières pays/région

styleOverrides: {
    countryRegion: { borderVisible: false }
}

• Frontières du district administratif

styleOverrides: {
    adminDistrict: { borderVisible: false }
}

• Frontières du second district administratif

styleOverrides: {
    adminDistrict2: { borderVisible: false }
}

• Empreintes de construction

styleOverrides: {
    buildingFootprint: { visible: false }
}

• Détails de la route

styleOverrides: {
    roadDetails: { visible: false }
}

Pour un exemple montrant les différents styles et leur influence sur le rendu de la carte, consultez les options de style de carte dans les Azure Maps Samples. Pour le code source de cet exemple, voir code source des options de style de la carte.

Ajouter le contrôle du sélecteur de styles

Le contrôle du sélecteur de styles fournit un bouton facile à utiliser doté d’un panneau volant que l’utilisateur final peut se servir pour passer d’un style de base à un autre.

Le sélecteur de styles propose deux options de disposition distinctes : icon et list. En outre, le sélecteur de styles vous permet de choisir deux options style différentes pour le contrôle : light et dark. Dans cet exemple, le sélecteur de styles utilise la disposition icon et affiche une liste sélective de styles de carte de base sous forme d’icônes. Le sélecteur de styles inclut l’ensemble de styles de base suivant : ["road", "grayscale_light", "grayscale_dark", "night", "road_shaded_relief"]. Pour plus d’informations sur les options de contrôle du sélecteur de styles, consultez Options de contrôle de style.

L’image suivante montre le contrôle de sélection du style affiché dans la disposition icon.

L’image suivante montre le contrôle du sélecteur de styles avec la disposition list.

Le code suivant montre comment remplacer la liste de styles de base mapStyles par défaut. Dans cet exemple, nous définissons l’option mapStyles pour répertorier les styles de base que le contrôle du sélecteur de styles doit afficher.

/*Add the Style Control to the map*/
map.controls.add(new atlas.control.StyleControl({
  mapStyles: ['road', 'grayscale_dark', 'night', 'road_shaded_relief', 'satellite', 'satellite_road_labels'],
  layout: 'list'
}), {
  position: 'top-right'
});  

Étapes suivantes

Pour en savoir plus sur les classes et les méthodes utilisées dans cet article :

Pour obtenir plus d’exemples de code à ajouter à vos cartes, consultez les articles suivants :