Couche de données

Sélectionnez une plate-forme : Android iOS JavaScript

Le calque Google Maps Data fournit un conteneur pour les données géospatiales arbitraires. Vous pouvez utiliser le calque Data pour stocker des données personnalisées ou pour afficher des données GeoJSON sur une carte Google.

Présentation

Pour en savoir plus sur le calque Data, regardez cette vidéo DevBytes.

Avec l'API Maps JavaScript, vous pouvez baliser une carte à l'aide de différentes superpositions (repères, polylignes, polygones, etc.). Chacune de ces annotations associe des informations de style aux données de localisation. La classe google.maps.Data est un conteneur de données géospatiales arbitraires. Au lieu d'ajouter ces superpositions, vous pouvez utiliser le calque Data pour ajouter des données géographiques arbitraires à votre carte. Par défaut, l'API affiche des éléments géométriques (points, lignes ou polygones, par exemple) inclus dans ces données, le cas échéant, sous la forme de repères, polylignes et polygones. Vous pouvez définir le style de ces composants, comme vous le feriez pour une superposition normale, ou appliquer des règles de style basées sur d'autres propriétés comprises dans votre jeu de données.

La classe google.maps.Data vous permet d'effectuer les opérations suivantes :

  • Dessiner des polygones sur votre carte
  • Ajouter des données GeoJSON à votre carte
    GeoJSON est une norme pour les données géospatiales sur Internet. La classe Data suit la structure de GeoJSON dans sa représentation de données et facilite l'affichage des données GeoJSON. Utilisez la méthode loadGeoJson() pour importer facilement des données GeoJSON et afficher des points, des lignes et des polygones.
  • Utiliser google.maps.Data pour modéliser des données arbitraires.
    Dans la pratique, les entités sont associées à d'autres propriétés (horaires d'ouverture pour un magasin, vitesse de circulation pour une route, par exemple). Avec google.maps.Data, vous pouvez modéliser ces propriétés et styliser vos données en conséquence.
  • Choisir la façon dont vos données sont représentées et changer d'avis à la volée
    Le calque Data vous permet de prendre des décisions concernant la visualisation et l'interaction de vos données. Par exemple, lorsque vous examinez une carte des commerces de proximité, vous pouvez décider d'afficher uniquement les magasins qui vendent des titres de transport.

Dessiner un polygone

La classe Data.Polygon gère pour vous le tracé des polygones. Vous pouvez lui transmettre un tableau d'un ou de plusieurs anneaux linéaires, définis en tant que coordonnées de latitude/longitude. Le premier anneau linéaire définit la limite extérieure du polygone. Si vous spécifiez plusieurs anneaux linéaires, le deuxième et les suivants définissent des tracés intérieurs (des trous) dans le polygone.

L'exemple ci-dessous crée un polygone rectangulaire comportant deux trous :

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;
index.js

Charger un fichier GeoJSON

GeoJSON est une norme courante de partage de données géospatiales sur Internet. Légère et facile à interpréter par l'homme, elle est idéale pour le partage et la collaboration. Le calque Data vous permet d'ajouter des données GeoJSON à une carte Google en une seule ligne de code.

map.data.loadGeoJson('google.json');

Chaque carte dispose d'un objet map.data qui sert de calque Data pour les données géospatiales arbitraires, y compris GeoJSON. Vous pouvez charger et afficher un fichier GeoJSON en appelant la méthode loadGeoJSON() de l'objet data. L'exemple ci-dessous montre comment ajouter une carte et charger des données GeoJSON externes.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json",
  );
}

window.initMap = initMap;
index.js
Voir l'exemple

Essayer l'exemple

Exemple de GeoJSON

La plupart des exemples de cette page se basent sur le même fichier GeoJSON. Celui-ci définit les six caractères du mot "Google" comme étant des polygones répartis sur l'Australie. N'hésitez pas à copier et modifier ce fichier pour tester le calque Data.

Remarque : Pour pouvoir charger un fichier json à partir d'un autre domaine, celui-ci doit avoir activé le Cross-Origin Resource Sharing.

Pour afficher le texte complet du fichier ci-dessous, cliquez sur la petite flèche à côté de "google.json".

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

Données GeoJSON de style

Utilisez la méthode Data.setStyle() pour spécifier l'apparence des données. La méthode setStyle() utilise soit un littéral d'objet StyleOptions, soit une fonction qui calcule le style de chaque élément géographique.

Règles de style simples

Le moyen le plus simple de styliser les éléments géographiques consiste à transmettre un littéral d'objet StyleOptions à setStyle(). Cela permet de définir un style qui sera appliqué à l'ensemble des éléments géographiques de votre collection. Notez que chaque type d'élément ne peut afficher qu'une partie des options disponibles. Il est donc possible de combiner des styles applicables à différents types d'éléments géographiques dans un même littéral d'objet. Par exemple, l'extrait ci-dessous définit à la fois une icon personnalisée, qui affecte uniquement les géométries de points, et fillColor, qui affecte uniquement les polygones.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

Pour en savoir plus sur les combinaisons de styles et d'éléments valides, consultez Options de style.

Vous trouverez ci-dessous un exemple de définition de la couleur de trait et de remplissage pour plusieurs éléments géographiques à l'aide d'un littéral d'objet StyleOptions. Notez que tous les polygones ont le même style.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

Règles de style déclaratives

Normalement, pour modifier le style d'un grand nombre de superpositions (repères ou polylignes, par exemple), vous devez répéter l'opération pour chaque superposition de la carte et en définir le style individuellement. Le calque Data vous permet de définir des règles déclaratives qui seront appliquées sur l'ensemble de votre jeu de données. En cas de modification des données ou des règles, le style est automatiquement appliqué à tous les composants. Vous pouvez utiliser les propriétés d'un élément géographique pour personnaliser son style.

Par exemple, le code ci-dessous définit la couleur de chaque caractère de notre google.json en examinant sa position dans le jeu de caractères ASCII. Dans ce cas, nous avons encodé la position du caractère avec les données.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

Supprimer des styles

Si vous souhaitez supprimer les styles appliqués, transmettez un littéral d'objet vide à la méthode setStyles().

// Remove custom styles.
map.data.setStyle({});

Les styles personnalisés préalablement spécifiés seront supprimés, et les éléments géographiques s'afficheront avec les styles par défaut. Si vous préférez ne plus afficher les éléments géographiques, définissez la propriété visible de StyleOptions sur false.

// Hide the Data layer.
map.data.setStyle({visible: false});

Remplacer les styles par défaut

En général, les règles de style s'appliquent à tous les éléments géographiques du calque Data. Toutefois, il peut être nécessaire d'appliquer des règles de style spéciales à certains composants (par exemple, pour mettre un élément en surbrillance lorsqu'un utilisateur clique dessus).

Pour appliquer des règles de style spéciales, utilisez la méthode overrideStyle(). Toutes les propriétés que vous modifiez avec la méthode overrideStyle() s'appliquent en plus des styles globaux déjà spécifiés dans setStyle(). Par exemple, le code ci-dessous modifie la couleur de remplissage d'un polygone lorsque l'utilisateur clique dessus, mais ne définit aucun autre style.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

Appelez la méthode revertStyle() pour supprimer tous les remplacements de style.

Options de style

Les options disponibles pour définir le style de chaque élément géographique dépendent du type d'élément. Par exemple, fillColor s'affiche uniquement sur les géométries de polygones, tandis que icon n'apparaît que sur les géométries de points. Pour en savoir plus, consultez la documentation de référence sur StyleOptions.

Disponible pour toutes les géométries

  • clickable : si la valeur est true, l'élément géographique reçoit les événements tactiles et de souris.
  • visible : si la valeur est true, l'élément est visible.
  • zIndex : tous les éléments géographiques sont affichés sur la carte par ordre de zIndex, les valeurs plus élevées s'affichant devant les éléments ayant des valeurs plus faibles. Les repères s'affichent toujours devant les polylignes et les polygones.

Disponible sur les géométries de points

  • cursor : le curseur de la souris s'affiche lorsque l'utilisateur pointe sur l'élément.
  • icon : une icône s'affiche pour la géométrie de points.
  • shape : définit l'image cliquable utilisée pour la détection des clics.
  • title : texte de roulement.

Disponible sur les géométries de lignes

  • strokeColor : couleur du trait. Toutes les couleurs CSS3 sont compatibles, à l'exception des noms de couleurs étendus.
  • strokeOpacity : opacité du trait (entre 0.0 et 1.0).
  • strokeWeight : épaisseur du trait, en pixels.

Disponible sur les géométries de polygones

  • fillColor : couleur de remplissage. Toutes les couleurs CSS3 sont compatibles, à l'exception des noms de couleurs étendus.
  • fillOpacity : opacité de remplissage, entre 0.0 et 1.0.
  • strokeColor : couleur du trait. Toutes les couleurs CSS3 sont compatibles, à l'exception des noms de couleurs étendus.
  • strokeOpacity : opacité du trait (entre 0.0 et 1.0).
  • strokeWeight : épaisseur du trait, en pixels.

Ajouter des gestionnaires d'événements

Les éléments géographiques répondent aux événements comme mouseup ou mousedown. Vous pouvez ajouter des écouteurs d'événements pour permettre aux utilisateurs d'interagir avec les données de la carte. L'exemple ci-dessous ajoute un événement de survol avec la souris qui affiche des informations sur un élément géographique lorsque l'utilisateur pointe dessus.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

Événements du calque Data

Les événements suivants sont communs à tous les éléments géographiques, quel que soit leur type de géométrie :

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Pour en savoir plus sur ces événements, consultez la documentation de référence sur la classe google.maps.data.

Modifier l'apparence de manière dynamique

Vous pouvez définir le style du calque Data en transmettant à la méthode google.maps.data.setStyle() une fonction qui calcule le style de chaque élément géographique. Cette fonction est appelée chaque fois que les propriétés d'un élément sont modifiées.

L'exemple ci-dessous ajoute un écouteur d'événements pour l'événement click qui modifie la propriété isColorful de l'élément géographique. Le style du composant est modifié conformément au changement dès que la propriété est définie.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});