Ajouter un ensemble de données à une carte

Ce produit ou cette fonctionnalité est en phase de preview (pré-DG). La compatibilité des fonctionnalités et produits pré-DG peut être limitée, et il se peut que les modifications apportées à ces fonctionnalités ou produits ne soient pas compatibles avec d'autres versions pré-DG. Les offres en pré-DG sont couvertes par les Conditions spécifiques du service Google Maps Platform. Pour en savoir plus, consultez les descriptions des étapes de lancement.

La FeatureStyleFunction vous permet de définir une logique pour styliser les éléments géographiques d'un ensemble de données de manière sélective. Elle renvoie des FeatureStyleOptions en fonction cette logique. Si vous n'avez pas besoin de logique de stylisation, vous pouvez utiliser des FeatureStyleOptions pour définir directement des styles. Cette page explique comment ajouter un ensemble de données à une carte et appliquer un style.

Conditions préalables

Avant de continuer, vous devez disposer d'un ID de carte, d'un style de carte et d'un ID d'ensemble de données.

• Créer un ID de carte et un style de carte
• Créer et importer un ensemble de données

Associer l'ID d'un ensemble de données à un style de carte

Pour associer votre ensemble de données au style de carte que vous utilisez, procédez comme suit :

1. Dans la console Google Cloud, accédez à la page Ensembles de données.
2. Cliquez sur le nom de l'ensemble de données. La page Détails de l'ensemble de données s'affiche.
3. Cliquez sur l'onglet Aperçu.
4. Faites défiler la page vers le bas, puis cliquez sur AJOUTER UN STYLE DE CARTE.
   
5. Cochez les cases des styles de carte à associer, puis cliquez sur ENREGISTRER.

Attention : Si vous affichez plusieurs ensembles de données sur une carte, selon leur taille et leur nombre, les performances peuvent être affectées.

Utiliser des règles de style simples

Le moyen le plus simple de styliser les éléments géographiques consiste à transmettre des FeatureStyleOptions pour définir des attributs de style tels que la couleur, l'opacité et l'épaisseur du trait. Appliquez des options de style d'éléments géographiques directement au calque d'éléments géographiques d'un ensemble de données ou combinez-les à une FeatureStyleFunction.

TypeScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.ts

Remarque : Consultez ce guide sur l'utilisation de TypeScript et Google Maps.

JavaScript

const styleOptions = {
  strokeColor: "green",
  strokeWeight: 2,
  strokeOpacity: 1,
  fillColor: "green",
  fillOpacity: 0.3,
};
index.js

Utiliser des règles de style déclaratives

Utilisez la FeatureStyleFunction pour définir des règles de style de manière déclarative et les appliquer à tout votre ensemble de données. Appliquez FeatureStyleOptions à un élément géographique en fonction des valeurs des attributs de l'ensemble de données. Vous pouvez également afficher null à partir de la fonction de style d'élément géographique que vous avez définie (par exemple, si vous souhaitez qu'un sous-ensemble d'éléments géographiques reste invisible). Cet exemple montre une fonction de style qui colore un ensemble de points en fonction des attributs de données :

TypeScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break; 
    }
}
index.ts

Remarque : Consultez ce guide sur l'utilisation de TypeScript et Google Maps.

JavaScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
  // Get the dataset feature, so we can work with all of its attributes.
  const datasetFeature = params.feature;
  // Get all of the needed dataset attributes.
  const furColors =
    datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"];

  // Apply styles. Fill is primary fur color, stroke is secondary fur color.
  switch (furColors) {
    case "Black+":
      return /* FeatureStyleOptions */ { fillColor: "black", pointRadius: 8 };
      break;
    case "Cinnamon+":
      return /* FeatureStyleOptions */ { fillColor: "#8b0000", pointRadius: 8 };
      break;
    case "Cinnamon+Gray":
      return /* FeatureStyleOptions */ {
        fillColor: "#8b0000",
        strokeColor: "gray",
        pointRadius: 6,
      };
      break;
    case "Cinnamon+White":
      return /* FeatureStyleOptions */ {
        fillColor: "#8b0000",
        strokeColor: "white",
        pointRadius: 6,
      };
      break;
    case "Gray+":
      return /* FeatureStyleOptions */ { fillColor: "gray", pointRadius: 8 };
      break;
    case "Gray+Cinnamon":
      return /* FeatureStyleOptions */ {
        fillColor: "gray",
        strokeColor: "#8b0000",
        pointRadius: 6,
      };
      break;
    case "Gray+Cinnamon, White":
      return /* FeatureStyleOptions */ {
        fillColor: "silver",
        strokeColor: "#8b0000",
        pointRadius: 6,
      };
      break;
    case "Gray+White":
      return /* FeatureStyleOptions */ {
        fillColor: "gray",
        strokeColor: "white",
        pointRadius: 6,
      };
      break;
    default: // Color not defined.
      return /* FeatureStyleOptions */ { fillColor: "yellow", pointRadius: 8 };
      break;
  }
}
index.js

Appliquer un style au calque d'éléments géographiques de l'ensemble de données

Pour appliquer les styles dans la fonction de style de l'élément géographique :

1. Récupérez le calque d'éléments géographiques de l'ensemble de données en appelant map.getDatasetFeatureLayer() auquel vous transmettez l'ID de l'ensemble de données.
2. Appliquez le style en définissant les options de style d'élément géographique (par exemple, styleOptions) ou la fonction (par exemple, setStyle) sur le calque de l'ensemble de données.

TypeScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.ts

Remarque : Consultez ce guide sur l'utilisation de TypeScript et Google Maps.

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

Supprimer le style d'un calque

Pour supprimer le style d'un calque, définissez le style sur null :

featureLayer.style = null;

Vous pouvez également renvoyer null à partir de votre fonction de style d'éléments géographiques, par exemple, si vous souhaitez qu'un sous-ensemble d'éléments géographiques reste invisible.

Ajouter un texte d'attribution

Votre carte doit afficher toutes les attributions requises lors de l'affichage des ensembles de données importés sur Google Maps. Le texte d'attribution ne doit pas cacher ni chevaucher le logo Google.

Pour ajouter un texte d'attribution, vous pouvez utiliser des commandes personnalisées afin de placer du code HTML arbitraire aux positions standards sur la carte. L'exemple de code suivant montre une fonction qui crée programmatiquement une commande personnalisée de ce type :

TypeScript

function createAttribution(map) {
    const attributionLabel = document.createElement('div');
    // Define CSS styles.
    attributionLabel.style.backgroundColor = '#fff';
    attributionLabel.style.opacity = '0.7';
    attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif';
    attributionLabel.style.fontSize = '10px';
    attributionLabel.style.padding = '2px';
    attributionLabel.style.margin = '2px';
    attributionLabel.textContent = 'Data source: NYC Open Data';
    return attributionLabel;
}
index.ts

Remarque : Consultez ce guide sur l'utilisation de TypeScript et Google Maps.

JavaScript

function createAttribution(map) {
  const attributionLabel = document.createElement("div");

  // Define CSS styles.
  attributionLabel.style.backgroundColor = "#fff";
  attributionLabel.style.opacity = "0.7";
  attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif";
  attributionLabel.style.fontSize = "10px";
  attributionLabel.style.padding = "2px";
  attributionLabel.style.margin = "2px";
  attributionLabel.textContent = "Data source: NYC Open Data";
  return attributionLabel;
}
index.js

Une fois la commande définie, vous pouvez l'ajouter à la carte au moment de l'initialisation, comme illustré ici :

TypeScript

// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement('div');
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
index.ts

Remarque : Consultez ce guide sur l'utilisation de TypeScript et Google Maps.

JavaScript

// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement("div");
const attributionControl = createAttribution(map);

attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
index.js