Adicionar um conjunto de dados a um mapa

Este produto ou recurso está em pré-lançamento (pré-GA). Os produtos e recursos em pré-GA têm suporte limitado, e é possível que as mudanças neles não sejam compatíveis com versões anteriores. Todos os itens em pré-GA são cobertos pelos Termos de Serviço da Plataforma Google Maps. Para mais detalhes, consulte as descrições da fase de lançamento.

A FeatureStyleFunction é onde você define a lógica para aplicar um estilo seletivo aos elementos em um conjunto de dados. Ela retorna FeatureStyleOptions com base nessa lógica. Se a lógica de estilo não for necessária, use FeatureStyleOptions para definir estilos diretamente. Esta página mostra como adicionar um conjunto de dados a um mapa e aplicar um estilo.

Pré-requisitos

Antes de continuar, você precisa ter um ID do mapa, um estilo de mapa e um ID do conjunto de dados.

• Criar um ID do mapa e um estilo de mapa
• Criar e fazer upload de um conjunto de dados

Associar um ID do conjunto de dados a um estilo de mapa

Siga estas etapas para associar seu conjunto de dados com o estilo de mapa que você está usando:

1. No console do Google Cloud, acesse a página Conjuntos de dados.
2. Clique no nome do conjunto de dados. A página Detalhes do conjunto de dados vai aparecer.
3. Clique na guia Visualização.
4. Role a tela para baixo e clique em ADICIONAR ESTILO DE MAPA.
   
5. Clique nas caixas de seleção dos estilos de mapa que serão associados e clique em SALVAR.

Cuidado: a renderização de vários conjuntos de dados em um mapa pode afetar a performance dependendo do tamanho e número de conjuntos de dados.

Usar regras de estilo simples

A maneira mais simples de definir o estilo dos elementos é transmitir FeatureStyleOptions para definir atributos de estilo, como cor, opacidade e espessura da linha. Aplique opções de estilo diretamente a uma camada do elemento do conjunto de dados ou use com uma FeatureStyleFunction.

TypeScript

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

Observação: acesse o guia sobre como usar o TypeScript e o Google Maps.

JavaScript

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

Usar regras de estilo declarativas

Use a FeatureStyleFunction para definir regras de estilo de modo declarativo e aplique essas regras a todo o conjunto de dados. Aplique FeatureStyleOptions em um elemento com base nos valores de atributos do conjunto de dados. Você também pode retornar null da função de estilo de elemento, por exemplo, se quiser que um subconjunto de elementos permaneça invisível. Este exemplo mostra uma função de estilo que colore um conjunto de pontos com base nos atributos de dados:

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

Observação: acesse o guia sobre como usar o TypeScript e o 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

Aplicar estilo à camada de elementos do conjunto de dados

Para aplicar os estilos na função de estilo do elemento:

1. Recupere a camada de elementos do conjunto de dados chamando map.getDatasetFeatureLayer(), transmitindo o ID do conjunto de dados.
2. Aplique o estilo definindo as opções de estilo de elemento (por exemplo, styleOptions) ou função (por exemplo, setStyle) na camada do conjunto de dados.

TypeScript

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

Observação: acesse o guia sobre como usar o TypeScript e o Google Maps.

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

Remover o estilo de uma camada

Para remover o estilo de uma camada, defina style como null:

featureLayer.style = null;

Você também pode retornar null da função de estilo de elemento, por exemplo, se quiser que um subconjunto de elementos permaneça invisível.

Adicionar texto de atribuição

Seu mapa precisa exibir qualquer atribuição necessária quando mostrar os conjuntos de dados enviados no Google Maps. O texto de atribuição não deve obscurecer ou interferir no logotipo do Google.

Uma forma de adicionar o texto de atribuição é usando controles personalizados para inserir HTML arbitrário nas posições padrões no mapa. O exemplo de código a seguir mostra uma função que cria um controle personalizado programaticamente:

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

Observação: acesse o guia sobre como usar o TypeScript e o 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

Quando o controle for definido, ele poderá ser adicionado ao mapa na hora da inicialização, como mostrado aqui:

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

Observação: acesse o guia sobre como usar o TypeScript e o 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