Agrega un conjunto de datos a un mapa

Selecciona la plataforma: Android iOS JavaScript

La función FeatureStyleFunction es donde se define la lógica para aplicar diseño a componentes de un conjunto de datos de manera selectiva. Según esa lógica, la función muestra FeatureStyleOptions. Si no es necesario aplicar una lógica de diseño, puedes usar FeatureStyleOptions para configurar los diseños directamente. En esta página, se muestra cómo agregar un conjunto de datos a un mapa y aplicar diseños.

Requisitos previos

Antes de continuar, debes tener un ID de mapa, un diseño de mapa y un ID de conjunto de datos.

• Cómo crear un ID de mapa y un diseño de mapa
• Cómo crear y subir un conjunto de datos

Asocia un ID de conjunto de datos a un diseño de mapa

Para asociar tu conjunto de datos al diseño de mapa que utilizas, sigue estos pasos:

1. En la consola de Google Cloud, ve a la página Conjuntos de datos.
2. Haz clic en el nombre del conjunto de datos. Se abrirá la página Detalles del conjunto de datos.
3. Haz clic en la pestaña Vista previa.
4. Desplázate hasta AGREGAR DISEÑO DE MAPA y haz clic en él.
   
5. Haz clic en las casillas de verificación correspondientes a los diseños de mapa que deseas asociar y, luego, en GUARDAR.

Advertencia: Renderizar varios conjuntos de datos en un mapa puede afectar el rendimiento según el tamaño y la cantidad de los conjuntos de datos.

Utiliza reglas de diseño simples

La manera más simple de aplicar diseño a un componente es pasar FeatureStyleOptions para definir atributos de diseño, como el color, la opacidad y el grosor de línea. Aplica opciones de diseño de componente directamente a una capa de componentes del conjunto de datos, o utilízalas en conjunto con FeatureStyleFunction.

TypeScript

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

Nota: Consulta la guía sobre cómo utilizar TypeScript y Google Maps.

JavaScript

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

Utiliza reglas de diseño declarativas

Usa FeatureStyleFunction para establecer reglas de diseño de forma declarativa y aplicarlas a todo el conjunto de datos. Aplica FeatureStyleOptions a un componente según los valores de los atributos del conjunto de datos. También puedes mostrar null desde la función de diseño del componente, por ejemplo, si deseas que un subconjunto de componentes permanezca invisible. En este ejemplo, se muestra una función de diseño que aplica colores a un conjunto de puntos según los atributos de datos:

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

Nota: Consulta la guía sobre cómo utilizar TypeScript y 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

Aplica diseño a la capa de componentes del conjunto de datos

Para usar la función de diseño de componentes, sigue estos pasos:

1. Para obtener la capa de componentes de un conjunto de datos, llama a map.getDatasetFeatureLayer() y pasa el ID del conjunto de datos.
2. Para aplicar el diseño, configura las opciones de diseño de componentes (p. ej., styleOptions) o la función (p. ej., setStyle) en la capa de conjunto de datos.

TypeScript

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

Nota: Consulta la guía sobre cómo utilizar TypeScript y Google Maps.

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

Quita el diseño aplicado a una capa

Para quitar el diseño aplicado a una capa, establece style en null:

featureLayer.style = null;

También puedes mostrar null desde tu función de diseño de componentes, por ejemplo, si quieres que un subconjunto de componentes permanezca invisible.

Agrega texto de atribución

Tu mapa debe mostrar las atribuciones requeridas cuando se muestran conjuntos de datos subidos en Google Maps. El texto de atribución no debe superponerse ni interferir con el logotipo de Google.

Una forma de agregar texto de atribución es usar controles personalizados para colocar HTML arbitrario en posiciones estándares del mapa. En el siguiente código de ejemplo, se muestra una función que crea uno de esos controles personalizados de forma programática:

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

Nota: Consulta la guía sobre cómo utilizar TypeScript y 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

Una vez que definas el control, podrás agregarlo al mapa en el momento de la inicialización, como se muestra a continuación:

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

Nota: Consulta la guía sobre cómo utilizar TypeScript y 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