Capa de tablas de fusión (experimental)

1. Información general
2. Límites
3. Configuración de tablas de fusión
4. Cómo construir una capa FusionTables
5. Consultas de tablas de fusión
6. Estilos de tablas de fusión
7. Mapas de calor de tablas de fusión

Nota: La capa de tablas de fusión es experimental.

La capa de tablas de fusión representa datos contenidos en tablas de fusión de Google.

Información general

La Google Maps JavaScript API te permite representar datos contenidos en tablas dinámicas de Google como una capa de un mapa usando el objeto FusionTablesLayer. Una tabla de fusión de Google es una tabla de base de datos en la cual cada fila contiene datos sobre una función en particular; para los datos geográficos, cada fila de una tabla de fusión de Google contiene adicionalmente datos de ubicación con información de posicionamiento de una función. FusionTablesLayer proporciona una interfaz con tablas de fusión y admite la representación automática de estos datos de ubicación, lo cual proporciona superposiciones seleccionables que muestran datos adicionales de una función.

Aquí se muestra un ejemplo de una tabla de fusión en la que se muestran datos geográficos:

Límites

Puedes usar la Google Maps JavaScript API para agregar hasta cinco capas de tablas dinámicas a un mapa, y puedes ajustar el estilo de una de ellas con hasta cinco reglas de estilo.

A su vez:

• Solo las primeras 100 000 filas de datos de una tabla se asignan o incluyen en resultados de consultas.
• Las consultas con predicados espaciales solo devuelven datos de estas primeras 100 000 filas. Por lo tanto, si aplicas un filtro a una tabla muy grande y este marca coincidencias en filas posteriores a las primeras 100 000, estas filas posteriores no se mostrarán.
• Cuando importes o insertes datos, recuerda que:
  • El tamaño total de los datos enviados en una llamada de API no puede ser superior a 1 MB.
  • Una celda de datos en las tablas de fusión admite como máximo 1 millón de caracteres. A veces, puede ser necesario reducir la precisión de las coordenadas o simplificar descripciones de polígonos o líneas.
  • El número máximo de vértices admitido por tabla es 5 millones.
• Al ver el mapa, puedes observar lo siguiente:
  • Se muestran los diez componentes de mayor superficie de una geometría múltiple.
  • Cuando se aplica más zoom de alejamiento, en las tablas con más de 500 funciones se muestran puntos (en lugar de líneas o polígonos).

Configuración de tablas de fusión

Las tablas de fusión son tablas de datos que proporcionan soporte de datos geográficos integrado. Para obtener más información, consulta Acerca de las tablas dinámicas. Para que en una capa de tablas de fusión se muestren datos dentro de la API de un mapa de Google, la tabla debe cumplir con los siguientes criterios:

• La tabla debe estar compartida como Public o Unlisted.
• La tabla de tener una o más columnas expuestas como Location. En la interfaz web de tablas de fusión, selecciona Edit > Modify Columns y luego las columnas deseadas.

La columna Location debe cumplir con los requisitos de formato que se muestran a continuación:

• Las coordenadas de latitud y longitud pueden introducirse en una única columna separadas por comas (latitud,longitude), o pueden dividirse en dos columnas (una columna para latitud y una para longitud). Para obtener más información, consulta la documentación de tablas de fusión.
• Las direcciones deben someterse a geocodificación. En la interfaz web de tablas de fusión, selecciona File > Geocode.
• Se admiten datos geométricos KML como puntos, líneas y polígonos.

Cómo construir una capa FusionTables

El constructor de objetos FusionTablesLayer crea una capa a partir de una tabla de fusión pública usando el id. cifrado de la tabla, que se puede encontrar seleccionando File > About en la IU de tablas de fusión.

Para agregar una capa de tablas de fusión a tu mapa, crea la capa y pasa un objeto query con lo siguiente:

• una propiedad select cuyo valor sea el nombre de columna que contenga la información de ubicación. Debes usar comillas para los nombres de columnas que contengan espacios o palabras reservadas, o que no comiencen con una letra;
• una propiedad from cuyo valor sea cualquier id. cifrado.

Luego, configura el map de la capa de tu objeto Map como en el caso de cualquier otra superposición.

Nota: En versiones anteriores de la Google Maps JavaScript API se hacía referencia a la tabla dinámica por su ID numérico. Si bien ese método aún funciona, se prefiere el ID encriptado.

En el ejemplo siguiente se muestran los homicidios de 2009 en Chicago con una tabla de fusión pública:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}

Ver el ejemplo de tabla de fusión

Consultas de tablas de fusión

Las tablas de fusión también te permiten aplicar consultas potentes que pueden restringir un conjunto de resultados conforme a un criterio especificado. Las consultas se especifican usando un parámetro FusionTablesLayerOptions query:

query: {
  select: locationColumn,
  from: fusionTableID,
  where: constraintClause
}

donde locationColumn es una columna con geocodificación existente de tipo Location. Debes usar comillas para los nombres de columnas de los campos select o where que contengan espacios o palabras reservadas, o que no comiencen con una letra.

Los operadores de búsqueda admitidos se muestran en la documentación de tablas de fusión.

En el ejemplo siguiente se muestran ubicaciones de la línea roja de la CTA con más de 5000 pasajeros en días entre semana:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}

Ver el ejemplo de tabla de fusión

Estilos de tablas de fusión

El constructor de capas de tablas de fusión también admite un parámetro FusionTablesLayerOptions styles para aplicar color, grosor de trazo y opacidad de líneas y polígonos. También se pueden especificar iconos de marcadores de los nombres de marcadores o iconos de mapas.

Nota: Solo se pueden aplicar estilos a una capa de tablas de fusión por mapa. Puedes aplicar hasta cinco estilos a dicha capa.

El parámetro styles tiene la siguiente sintaxis:

styles: [{
  where: 'column_name condition',
  markerOptions: {
    iconName: "supported_icon_name"
  },
  polygonOptions: {
    fillColor: "#rrggbb",
    strokeColor: "#rrggbb",
    strokeWeight: "int"
  },
  polylineOptions: {
    strokeColor: "#rrggbb",
    strokeWeight: "int"  }
}, {
  where: ...
  ...
}]

Los estilos se aplican sobre cualquier estilo especificado en la interfaz web de tablas de fusión. Los estilos proporcionados al constructor de capas luego se aplican en el orden en que se mencionan, y las funciones que coinciden con varias reglas adoptan el último estilo de coincidencias.

Para producir un estilo predeterminado que se aplique a todas las funciones, crea un estilo sin cláusula where:

styles: [{
  markerOptions: {
    iconName: "large_green"
  }
}]

En el ejemplo siguiente:

• un estilo predeterminado que aplicar color verde a todos los polígonos con un nivel de opacidad de 0,3;
• todos los polígonos en cuya columna ‘birds’ se supere el número 300 llevan color azul; estos conservan el nivel de opacidad establecido por el estilo predeterminado;
• Todos los polígonos en cuya columna “population” se supere el número 5 tienen un nivel de opacidad establecido de 1,0. Conservan sus valores fillColor.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}

Ver el ejemplo de tabla de fusión

Mapas de calor de tablas de fusión

Las tablas de fusión también proporcionan soporte limitado para mapas de calor, en los cuales la densidad de ubicaciones coincidentes se representa usando una paleta de colores. En los mapas de calor actuales usa un gradiente de rojo (denso) a verde (disperso) para indicar la prevalencia relativa de ubicaciones asociadas. Puedes habilitar un mapa de calor fijando el valor del parámetro FusionTablesLayerOptions heatmap de la capa en enabled: true.

Nota: Los mapas de calor de tablas de fusión se representan en el servidor. Si prefieres mapas de calor de clientes, usa la capa del mapa de calor.

En el ejemplo siguiente se muestran datos históricos de terremotos con un mapa de calor:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}

Ver el ejemplo de tabla de fusión