Couche de données

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.
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 la couche de données pour stocker vos 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. Si ces données contiennent des géométries, telles que des points, des lignes ou des polygones, l'API les affichera par défaut sous forme de repères, de polylignes et de polygones. Vous pouvez appliquer un style à ces éléments géographiques de la même manière qu'une superposition normale ou appliquer des règles de style basées sur d'autres propriétés contenues dans votre ensemble de données.

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

  • Dessinez des polygones sur votre carte.
  • Ajouter des données GeoJSON à votre carte
    La norme 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.
  • Utilisez google.maps.Data pour modéliser des données arbitraires.
    La plupart des entités du monde réel sont associées à d'autres propriétés. Par exemple, les magasins ont des horaires d'ouverture, les routes ont une vitesse de circulation et chaque troupe du guide féminin dispose de gazon. Avec google.maps.Data, vous pouvez modéliser ces propriétés et styliser vos données en conséquence.
  • Choisissez la façon dont vos données sont représentées et changez d'avis à la volée.
    La couche de données vous permet de prendre des décisions concernant la visualisation et l'interaction de vos données. Par exemple, si vous consultez une carte des commerces de proximité, vous pouvez choisir 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 transmettez plusieurs anneaux linéaires, le deuxième et les anneaux linéaires suivants sont utilisés pour définir les tracés internes (trous) du 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;

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 },
    { lat: -35.364, lng: 153.207 },
    { lat: -35.364, lng: 158.207 },
    { 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;

Charger un fichier GeoJSON

GeoJSON est une norme courante pour le partage de données géospatiales sur Internet. Légère et facile à comprendre, elle est idéale pour le partage et la collaboration. Avec la couche de données, vous pouvez 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 couche de données 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;

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;
Voir un exemple

Essayer l'exemple

Fichier GeoJSON d'exemple

La plupart des exemples de cette page se basent sur le même fichier GeoJSON. Ce fichier définit les six caractères de "Google" en tant que polygones sur l'Australie. N'hésitez pas à copier ou modifier ce fichier lorsque vous testez la couche de données.

Remarque: Pour pouvoir charger un fichier JSON à partir d'un autre domaine, celui-ci doit avoir activé le partage des ressources entre origines multiples.

Pour afficher le texte complet du fichier ci-dessous, cliquez sur la petite flèche à côté des mots 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 caractéristique.

Règles de style simples

Le moyen le plus simple de styliser les caractéristiques consiste à transmettre un littéral d'objet StyleOptions à setStyle(). Vous définirez ainsi un style unique pour chaque élément de votre collection. Notez que chaque type de caractéristique ne peut afficher qu'un sous-ensemble des options disponibles. Cela signifie qu'il est possible de combiner des styles pour différents types de caractéristiques dans un seul littéral d'objet. Par exemple, l'extrait ci-dessous définit à la fois un icon personnalisé, 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 style/d'élément valides, consultez Options de style.

Vous trouverez ci-dessous un exemple de définition de la couleur de trait et de remplissage pour plusieurs caractéristiques à l'aide d'un littéral d'objet StyleOptions. Notez que le style de chaque polygone est le même.

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

Règles de style déclaratives

Si vous souhaitez mettre à jour le style d'un grand nombre de superpositions, tels que des repères ou des polylignes, vous devez généralement itérer chaque superposition sur votre carte et définir son style individuellement. Avec la couche de données, vous pouvez définir des règles de manière déclarative. Elles seront appliquées à l'ensemble de votre ensemble de données. Lorsque les données ou les règles sont mises à jour, le style est automatiquement appliqué à chaque élément géographique. Vous pouvez utiliser les propriétés d'un composant 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 nos 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({});

Tous les styles personnalisés que vous avez spécifiés seront supprimés, et les éléments géographiques s'afficheront à l'aide des styles par défaut. Si vous préférez ne plus afficher les caractéristiques, 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 composants du calque Data. Cependant, il peut arriver que vous souhaitiez appliquer des règles de style spéciales à des éléments géographiques spécifiques. Cela permet par exemple de mettre un composant en évidence lorsque l'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 lors d'un clic, 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 composant dépendent du type de composant. Par exemple, fillColor s'affiche uniquement sur les géométries de polygones, tandis que icon n'apparaît que sur une géométrie de points. Pour en savoir plus, consultez la documentation de référence sur StyleOptions.

Disponible sur toutes les géométries

  • clickable : si la valeur est true, la fonctionnalité reçoit les événements de souris et d'appui.
  • visible : si la valeur est true, l'élément géographique est visible.
  • zIndex: tous les éléments géographiques sont affichés sur la carte par ordre de zIndex, les valeurs les plus élevées devant celles dont les valeurs sont inférieures. Les marqueurs s'affichent toujours devant les polylignes et les polygones.

Disponible sur les géométries de points

  • cursor: curseur de la souris à afficher lors du passage de la souris
  • icon: icône à afficher pour la géométrie du point.
  • shape: définit la carte illustrée utilisée pour la détection des appels.
  • title : texte de survol.

Disponible sur les géométries de lignes

  • strokeColor : couleur du trait. Toutes les couleurs CSS3 sont acceptées, à l'exception des couleurs étendues.
  • strokeOpacity : opacité du trait comprise 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 acceptées, à l'exception des couleurs étendues.
  • fillOpacity : opacité de remplissage entre 0.0 et 1.0.
  • strokeColor: couleur du trait. Toutes les couleurs CSS3 sont acceptées, à l'exception des couleurs étendues.
  • strokeOpacity: opacité du trait comprise entre 0.0 et 1.0.
  • strokeWeight: épaisseur du trait en pixels.

Ajouter des gestionnaires d'événements

Les fonctionnalités répondent aux événements tels que mouseup ou mousedown. Vous pouvez ajouter des écouteurs d'événements pour permettre aux utilisateurs d'interagir avec les données de la carte. Dans l'exemple ci-dessous, nous ajoutons un événement de souris qui affiche des informations sur l'élément géographique sous le curseur de la souris.

// 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 de la couche de données en transmettant une fonction qui calcule le style de chaque caractéristique à la méthode google.maps.data.setStyle(). Cette fonction est appelée à chaque mise à jour des propriétés d'une caractéristique.

Dans l'exemple ci-dessous, nous ajoutons un écouteur d'événements pour l'événement click qui met à jour la propriété isColorful de la fonctionnalité. Le style de la caractéristique est mis à jour pour refléter la modification 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();
});