JavaScript library for dynamic visualising of datasets as tables on Google Maps and full, well-commented example of it's work. Live example is here.
In your HTML:
..in <head>:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
<script src="http://www.aivanf.com/static/gmt/gmapstable.js"></script>
..in <body>:
<div id="map"></div>In your JavaScript:
// Arguments: ID of div
// and GoogleMaps parameters dictionary
var container = new DataContainer("map", {
zoom: 9,
center: {lat: 55.7558, lng: 37.6173},
mapTypeId: 'roadmap'
});
container.dataLoader = function (scale, borders) {
... call container.processData(some_data)
}
container.scaler = function getScale(zoom) {
... return some number
}Structure of the data object:
data: {
minLat: float,
difLat: float,
minLon: float,
difLon: float,
scale: int,
table: [
[value, value, ...],
[value, value, ...],
...
],
tocache: boolean
}You may specify the following properties of DataContainer:
-
scaler(zoom)— translates GoogleMaps zoom to GMapsTable scale. Both are integer numbers. -
dataLoader(scale, borders)— is called when DataContainer needs new data. Must callDataContainer.processData(data).
borders is a JavaScript object with properties minlat, maxlat, minlon, maxlon — current bounds of Google Maps view with big padding on each side.
-
tableBeforeInit(map, table, data)— is called when table element was created but not filled with rows and cells.mapis a Google Maps object,tableis an HTML element, and data is your data object for current scale. Here you can prepare your table, some variables with actual data object and current maps parameters. -
cellFormatter(td, val)— is called when table is generating.tdis an HTML element, a cell of the table.valis a value from your data object. Here you can easily set output for multiple values or fill background according to some parameters. -
boundsChangedListener(zoom)— is called when Google Maps bounds are changed. -
minZoomLevel,maxZoomLevel— minimal and maximal zoom of Google Maps. Integer numbers ranged between 1 (world map) and 22 (street view).
Only the 1st and 2nd are necessary for DataContainer successful operation.