Camada de dados

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.
Selecione a plataforma: Android iOS JavaScript

A camada de dados do Google Maps oferece um contêiner para dados geoespaciais arbitrários. Você pode usar a camada de dados para armazenar seus dados personalizados ou exibir dados GeoJSON em um mapa do Google.

Visão geral

Assista a este vídeo do DevBytes para saber mais sobre a camada de dados.

Com a API Maps JavaScript, você pode marcar um mapa com diversas sobreposições, como marcadores, polilinhas, polígonos etc. Cada uma dessas anotações combina informações de estilo com dados de local. A classe google.maps.Data é um contêiner para dados geoespaciais arbitrários. Em vez de adicionar essas sobreposições, você pode usar a camada de dados para incluir dados geográficos arbitrários no seu mapa. Se esses dados tiverem geometrias, como pontos, linhas ou polígonos, a API os renderizará por padrão como marcadores, polilinhas e polígonos. Você pode estilizar esses recursos como faria em uma sobreposição normal ou aplicar regras de estilo com base em outras propriedades contidas no conjunto de dados.

A classe google.maps.Data permite que você:

  • Desenhe polígonos no mapa.
  • Adicionar dados GeoJSON ao seu mapa
    O GeoJSON é um padrão para dados geoespaciais na Internet. A classe Data segue a estrutura do GeoJSON na representação de dados dele e facilita a exibição de dados do GeoJSON. Use o método loadGeoJson() para importar facilmente dados GeoJSON e exibir pontos, strings de linha e polígonos.
  • Use google.maps.Data para modelar dados arbitrários.
    A maioria das entidades reais tem outras propriedades associadas a elas. Por exemplo, as lojas têm horário de funcionamento, as vias têm velocidade de tráfego, e cada trupe do Guia para meninas tem um gramado que vende biscoitos. Com o google.maps.Data, você pode modelar essas propriedades e estilizar seus dados adequadamente.
  • Escolha como seus dados são representados e mude de ideia em tempo real.
    A camada de dados permite que você tome decisões sobre a visualização e a interação dos seus dados. Por exemplo, em um mapa de lojas de conveniência, você pode exibir apenas as lojas que vendem passagens de transporte público.

Desenhar um polígono

A classe Data.Polygon lida com o enrolamento de polígono para você. Você pode passar uma matriz de um ou mais anéis lineares, definidos como coordenadas de latitude/longitude. O primeiro anel linear define o limite externo do polígono. Se você passar mais de um anel linear, o segundo e os seguintes anéis lineares serão usados para definir os caminhos internos (buracos) no polígono.

O exemplo a seguir cria um polígono retangular com dois furos:

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;

Carregar GeoJSON

O GeoJSON é um padrão comum para compartilhar dados geoespaciais na Internet. Ele é leve e fácil de ler, o que o torna ideal para compartilhamento e colaboração. Com a camada de dados, você pode adicionar dados GeoJSON a um mapa do Google em apenas uma linha de código.

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

Cada mapa tem um objeto map.data, que funciona como uma camada de dados para dados geoespaciais arbitrários, incluindo GeoJSON. É possível carregar e exibir um arquivo GeoJSON chamando o método loadGeoJSON() do objeto data. O exemplo abaixo mostra como adicionar um mapa e carregar dados GeoJSON externos.

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;
Ver exemplo

Testar amostra

Exemplo de GeoJSON

A maioria dos exemplos desta página usa um arquivo GeoJSON comum. Esse arquivo define os seis caracteres em "Google" como polígonos na Austrália. Você pode copiar ou modificar esse arquivo ao testar a camada de dados.

Observação: para carregar um arquivo json de outro domínio, ele precisa ter ativado o compartilhamento de recursos de origem cruzada.

Para visualizar o texto completo do arquivo abaixo, expanda a seta pequena ao lado das palavras 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]
          ]
        ]
      }
    }
  ]
}

Aplicar estilo a dados GeoJSON

Use o método Data.setStyle() para especificar a aparência dos seus dados. O método setStyle() usa um literal de objeto StyleOptions ou uma função que calcula o estilo de cada recurso.

Regras de estilo simples

A maneira mais simples de definir o estilo dos recursos é transmitir um literal de objeto StyleOptions para setStyle(). Isso definirá um único estilo para cada recurso na sua coleção. Cada tipo de recurso só pode renderizar um subconjunto das opções disponíveis. Isso significa que é possível combinar estilos para diferentes tipos de recursos em um único literal de objeto. Por exemplo, o snippet abaixo define um icon personalizado, que afeta apenas geometrias de pontos, e fillColor, que afeta apenas polígonos.

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

Veja mais informações sobre combinações válidas de estilo e recursos em Opções de estilo.

Veja abaixo um exemplo de como definir a cor do traço e do preenchimento para vários recursos usando um literal de objeto StyleOptions. Observe que cada polígono tem o mesmo estilo.

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

Regras de estilo declarativas

Se você quiser atualizar o estilo de um grande número de sobreposições, como marcadores ou polilinhas, normalmente precisará iterar cada sobreposição no mapa e definir o estilo individualmente. Com a camada de dados, você pode definir regras de maneira declarativa, e elas serão aplicadas em todo o conjunto de dados. Quando os dados ou as regras são atualizados, o estilo é aplicado automaticamente a cada recurso. Use as propriedades dos recursos para personalizar seu estilo.

Por exemplo, o código abaixo define a cor de cada caractere no google.json examinando a posição dele no conjunto de caracteres ASCII. Nesse caso, codificamos a posição dos caracteres com os dados.

// 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
    };
});

Remover estilos

Se você quiser remover qualquer estilo aplicado, transmita um literal de objeto vazio para o método setStyles().

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

Isso removerá todos os estilos personalizados especificados, e os recursos serão renderizados usando os estilos padrão. Se você não quiser mais renderizar os recursos, defina a propriedade visible de StyleOptions como false.

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

Substituir estilos padrão

Normalmente, as regras de estilo são aplicadas a todos os recursos da camada de dados. No entanto, há momentos em que você quer aplicar regras de estilo especiais a recursos específicos. Por exemplo, como uma forma de destacar um recurso ao clicar.

Para aplicar regras de estilo especiais, use o método overrideStyle(). As propriedades mudadas com o método overrideStyle() são aplicadas além dos estilos globais já especificados em setStyle(). Por exemplo, o código abaixo mudará a cor de preenchimento de um polígono no clique, mas não definirá outros estilos.

// 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'});
});

Chame o método revertStyle() para remover todas as substituições de estilo.

Opções de estilo

As opções de estilo disponíveis para cada recurso dependem do tipo do recurso. Por exemplo, fillColor será renderizado apenas nas geometrias de polígono, enquanto icon aparecerá apenas em uma geometria de pontos. Mais informações estão disponíveis na documentação de referência para StyleOptions.

Disponível em todas as geometrias

  • clickable: se true, o recurso recebe eventos de mouse e toque.
  • visible: se for true, o recurso estará visível.
  • zIndex: todos os recursos são exibidos no mapa na ordem de zIndex, com valores mais altos em frente aos recursos com valores menores. Os marcadores são sempre exibidos na frente de linestrings e polígonos.

Disponível em geometrias de pontos

  • cursor: cursor do mouse a ser exibido ao passar o cursor.
  • icon: ícone a ser exibido para a geometria do ponto.
  • shape: define o mapa de imagens usado para detecção de hits.
  • title: texto acumulado.

Disponível em geometrias de linha

  • strokeColor: a cor do traço. Todas as cores CSS3 são compatíveis, exceto as cores nomeadas estendidas.
  • strokeOpacity: a opacidade do traço entre 0,0 e 1,0.
  • strokeWeight: é a largura do traço em pixels.

Disponível em geometrias de polígono

  • fillColor: a cor de preenchimento. Todas as cores CSS3 são compatíveis, exceto as cores nomeadas estendidas.
  • fillOpacity: a opacidade de preenchimento entre 0.0 e 1.0.
  • strokeColor: a cor do traço. Todas as cores CSS3 são compatíveis, exceto as cores nomeadas estendidas.
  • strokeOpacity: a opacidade do traço entre 0,0 e 1,0.
  • strokeWeight: é a largura do traço em pixels.

Adicionar manipuladores de evento

Os recursos respondem a eventos, como mouseup ou mousedown. Você pode adicionar listeners de eventos para permitir que os usuários interajam com os dados no mapa. No exemplo abaixo, adicionamos um evento de mouseover, que exibe informações sobre o recurso abaixo do cursor do mouse.

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

Eventos de camada de dados

Os eventos a seguir são comuns a todos os recursos, independentemente do tipo de geometria:

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

Mais informações sobre esses eventos podem ser encontradas na documentação de referência da classe google.maps.data.

Alterar dinamicamente a aparência

Você pode definir o estilo da camada de dados transmitindo uma função que calcula o estilo de cada atributo para o método google.maps.data.setStyle(). Essa função será chamada sempre que as propriedades de um recurso forem atualizadas.

No exemplo abaixo, adicionamos um listener de eventos para o evento click, que atualiza a propriedade isColorful do recurso. O estilo do recurso é atualizado para refletir a mudança assim que a propriedade é definida.

// 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();
});