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:
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?
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?
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.
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);
Related
I am currently getting PostGIS points at client side using JavaScript, is there a way to convert those points into ordinary x, y coordinates using JavaScript?
Here is how I get the points currently:
0101000020E6100000DE02098A1FF33F40BADA8AFD65F74140
You haven't posted your actual query, but if you wrap the geometry referenced in your SELECT statement with ST_AsText() then it will return the geometry in a human readable format called Well Known Text.
e.g.
SELECT my_id, ST_AsText(my_geom) FROM my_table;
-- returns POINT(31.9497 35.9328) using the geometry from your question.
This is then fairly ordinary parsing exercise. Or, if you just want the raw lon / lat (or easting / northing), then structure your query like this:
SELECT ST_X(my_geom), ST_Y(my_geom) FROM my_table;
-- returns: 31.9497, 35.9328 using the geometry from your question
Note that you can also transform the geometry, if necessary, to the coordinate system that you need to use. For example, if the geometry is stored in the database in conventional lon/lat format (EPSG code 4326) and you need to retrieve it in the Pseudo Mercator Projection ordinarily used in online maps (EPSG code 3857), then you need to do this:
-- note the explicit ::geometry cast
SELECT my_id, ST_AsText(ST_Transform(my_geom::geometry, 3857)) FROM my_table;
For fun, you can try this in a PostGIS enabled Postgres SQL query window (using the geometry from your question):
Return as WKT:
SELECT ST_AsText('0101000020E6100000DE02098A1FF33F40BADA8AFD65F74140');
-- returns: POINT(31.9497 35.9328)
Return as Pseudo Mercator:
SELECT ST_AsText(ST_Transform('0101000020E6100000DE02098A1FF33F40BADA8AFD65F74140'::geometry, 3857))
-- returns: POINT(3556624.33499785 4291378.69099916)
Return as X, Y:
SELECT ST_X('0101000020E6100000DE02098A1FF33F40BADA8AFD65F74140'),
ST_Y('0101000020E6100000DE02098A1FF33F40BADA8AFD65F74140');
-- returns: 31.9497, 35.9328
I have a file which has a extension of .casa-model. Is there aany way for representing it in .obj ?model link
This .casa-model looks like it's a proprietary JSON-format and it doesn't seem to be documented. However, it contains exactly the same information (vertices, normals, uv-coordinates and indices) that you'll find in the .obj (or any other) file format.
The way I would go is this:
Load and parse the JSON-file
iterate over casa_model.mesh
create a new THREE.BufferGeometry
create attributes position, normal, uv and fill them with data from JSON (casa_model.mesh[i].vertices, casa_model.mesh[i].normals, casa_model.mesh[i].uvs). Something like this:
buffergeometry.addAttribute('position',
new THREE.BufferAttribute(new Float32Array(casa_model.mesh[i].vertices), 3));
create an index-attribute and fill with data from json (casa_model.mesh[i].triangle_indices)
At this point you should be able to render the object in three.js, if you still want to have the .obj-file, use THREE.OBJExporter to get it in .obj format.
I'm trying to render Antarctica geojson shape on a map using the HERE maps api.
The geojson is found here: https://github.com/johan/world.geo.json/blob/master/countries/ATA.geo.json
You can see github renders it nicely.
Using the same geojson on geojson.io also renders it nicely.
But somehow it seems to render the 'inverse' of Antarctica when using it in HERE maps.
It colors everything except antarctica.
see: http://imagebin.ca/v/1dZIn5vsEuFx
(I've tried making an expample using jsfiddle, but it's not able to load external json. And the HERE maps api doesn't allow you to load geoJSON from a string)
Is there an issue with the geoJSON? Is there an issue with the HERE maps api?
The API doesn't quite understand what to do with the open polygon. Because the polygon is basically just a line around the globe the API doesn't know if you shape closes over the north pole or the south pole. By default it assumes that open polygons close over the north pole. You can change this by using this flag (setNorthPoleCovering):
http://developer.here.com/javascript-apis/documentation/v3/maps/topics_api_nlp/h-map-polygon.html#h-map-polygon__setnorthpolecovering
However, actually getting to that point in the code where this can be done is a bit complicated:
// When you instantiate the geojson.Reader you can specify a function that
// receives all objects the reader parsed. It is called when objects are
// being rendered on the map. At that point we can look into the object and
// check whether it is Antarctica
var reader = new H.data.geojson.Reader('...ATA.geo.json', {
style: function(obj) {
if (obj.getData().properties.name === "Antarctica") {
//AHA! We found Antarctica!
// Since this is a multi-polygon we have a group here which contains
// all polygons. We apply the north-pole-covering flag to each of the
// polygons
obj.forEach(function(polygon) {
polygon.setNorthPoleCovering(false);
});
}
}
});
reader.parse();
map.addLayer(reader.getLayer());
Depending on what you want to accomplish in terms of dynamic behavior, if you are just looking to display or share a map with cards and other metadata about a country with some basic styling -- HERE XYZ can be used to render GeoJSON on a HERE map.
If you want to do it with JavaScript rather than an embedded iframe, the other answer may be what you are looking for.
There is an there an issue with the GeoJSON, and other mapping APIs would have the same problem. It needs to be closed at the 180th meridian, so
[178.277212,-84.472518],[180,-84.71338],[-179.942499,-84.721443]
becomes
[178.277212,-84.472518],[180,-84.71338],[180,-90],[-180,-90],[-180,-84.71338],[-179.942499,-84.721443]
I am trying to get the raw pixel data from two "items" in paper.js. One is already a Raster object so that's not too bad. The problem is that I have another Group object containing a bunch of triangles and I want to capture the Raster data for that layer and then be able to compare it.
I have the following (highlighted lines) code:
https://gist.github.com/mtahmed/2b27c4c6aee42d3ac3fb#file-paper_update-js
It seems to always return 0 or some other odd unexpected number. Any hints/ideas?
Thanks! :)
It looks like you are always setting child_gene.visible = false, but never set it back to visible = true before you rasterize the layer in computeFitness(). I'm not sure that there's a need for juggling layers in each frame - it should work just as well without it.
Here's a simplified example that uses a square with a gradient as the target raster.
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.
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 :)