CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Misiu
Misiu

Reputation: 4919

Load external data to google maps and build heatmap

In my database I have set of zip codes and number of orders for specific zip code

zip    | count
--------------
12-456 |   23
12-100 |  120
12-220 |   93
10-300 |    2

I need a way to show that data as heat map using GoogleMaps. I found basic example at https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap It is a nice start, but it requires me to add all the points to my page.

Is there an option to show page and then do request to server to get all the points? I know that I can make ajax request to server, get json as result and then in loop add those point to taxiData (code from example), but maybe this can be done easier? In Poland are almost 23 thousands zip codes, so I can have very large dataset from server.

Is it possible to load data as latitude, longitude, count? I can convert zip codes to locations (GPS coordinates) but I would like to send number of orders in that location.

How can I show heat map for specific region? Like in this sample: http://maps.forum.nu/v3/gm_customTiles.html heat map is only presented for United States.

Any ideas on how to start (links, examples) are big help.

Upvotes: 0

Views: 2145

Answers (1)

Hugo Rocha
Hugo Rocha

Reputation: 537

First question: Well just a thought, you could sample the zip codes and let the user choose the detail. If he wants more detail it will take a little more to load. In low map zooms you don't need that many points. If the user wants more detail in higher map zooms you fetch more. But don't underestimate ajax, I had a web site page that loaded around 9000 database entries and it was ready in around 3 secs, maybe less. Just don't block the page and don't forget to use a loader :)

Second question: In SQL you could do 

SELECT latitude, longitude, COUNT(*) count FROM Table GROUP BY latitude, longitude

This will give you the unique pairs of latitude and longitude and their count. If you want you could play with the decimal points to get more or less accuracy.

Third question: That map uses MCustomTileLayer. You can see and download the source code here http://code.google.com/p/biodiversity-imageserver/source/browse/trunk/unittest/gmap3/MCustomTileLayer.js?r=49

That site's example:

var hMap = new MCustomTileLayer(map,theme);

var oDiv = document.getElementById('controlsDiv');
var tlcOptions = {
    parent: oDiv,
    overlay: hMap,
    caption: theme.toUpperCase()
}
var tlc = new MTileLayerControl(tlcOptions);

To be honest I prefer a lot more the standard google API, its simpler and prettier. They just produce an image and place it on the map. You can play with the heatmap radius to fill just the zones you want.

Hope it helps :)

Upvotes: 1

Related Questions