CODEWITHSUNDEEP
javascriptjsongoogle-maps
gladys0313
gladys0313

Reputation: 2679

How to generate a heatmap based on a json file

I have a json file containing 200000 point coordinates in geojson format and I want to generate a heat map of these coordinates. I have two ideas to do that but I have problems with both ideas:

  1. use google map-->heatmap layer. I plan to write a html file as shown on https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap , however, I dont know how to put the coordinates of json file into the batch of google.maps.LatLng(), any idea?

  2. use google Fusion Table. However, it seems that a delimited text file(.csv, .tsv, or .txt), and Keyhole Markup Language file(.kml) are necessary, is that right?

I don't know whether there are some other good ways to generate a heat map. Any good idea?

Upvotes: 0

Views: 8226

Answers (2)

Dr.Molle
Dr.Molle

Reputation: 117324

I dont think that geoJson is a good choice to transport such an amount of data(I wouldn't even use it for 2000 items).

Let's take a look at a single LatLng, (lets assume 5 decimals): to simply transport the needed data via JSON you would need e.g.:

//17 bytes, about 3.5 MB for 200000 points
[9.12345,5.43219]

in geoJson:

//95 bytes, about 18 MB for 200000 items
{"type":"Feature","geometry":{"type": "Point","coordinates":[5.43219,9.12345]},"properties":{}}

I guess I don't have to say anything....

The basic issue with #1: (I don't think it's recommendable for 200000 points, no matter which format you choose): As you can't transport a google.maps.LatLng via JSON, you'll need to pre-process the JSON to create an array with LatLngs(will take some time for 200000 points)

I think #2 is the only option you should think about.

You may set up a script, macro, etc. which parses the geoJson when it's static and upload it to a FusionTable.

When the data are not static you may use a serverside script which uploads/updates the data automatically.

KML isn't required for points, you may simply use a CSV(lat and lng may be stored in a single field, delimited by a comma) or in separate fields.

Upvotes: 1

TaoPR
TaoPR

Reputation: 6052

There are two reasons why you should go for option#1.

a) Serializing the GeoJSON data points to GoogleMap-compatible format latlng is relatively easier than option #2. You can even load GeoJSON data, parse it to GoogleMap coordinate, and draw on the map without any need to convert the file type.

b) If you choose option 2, you definitely need to write a script which converts GeoJSON file to a comma-delimited (or whatever symbol) text file. When you have a new GeoJSON data, you will need to convert it again. This doesn't save your time.

So let's say you choose option #1

You can just add a script tag which refers to your GeoJSON data file like this:

<script type="text/javascript" src="data.json"></script>

Then parse it into a JSON format with your JavaScript code like this:

var geoData = JSON.parse(data);

Then you'll need to parse these geoJSON data into an array of lat-lng coordinates:

var coords = geoData.map(function mapToLatLng(c){
    return new google.maps.LatLng(c.geometry.coordinates[0], c.geometry.coordinates[1])
});

With this code above, you should get coords which carries all Google Map latitude-longitude coordinates ready for rendering into a heatmap.

To render those points, you may try:

heatmap = new google.maps.visualization.HeatmapLayer({
    data: new google.maps.MVCArray(coords)
});
heatmap.setMap(map);

Upvotes: 0

Related Questions