Develop Reference

How to read PostGIS point in JavaScript?

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

How can I smooth my polygons in a Three.js scene?

I've this model here in Three.js:
Unsmoothed part of the model
I used a plug-in from the Unity asset store, to export the model into a JSON file, then imported in my three.js application. The problem is that the plugin doesn't export the smoothing groups, so the quality of the model doesn't look so good.
Is there any way to smooth everything with three.js?

You can use the THREE.SubdivisionModifier and use it like this:
var modifier = new THREE.SubdivisionModifier(divisions);
// Apply the modifier to your geometry NOT MESH.
modifier.modify( geometry );
Actually it's not included in Three.js build, so you have to import it.
You can get it here
UPDATE 1
Basically you JSON file gets loaded as an Object3d, which is like a container. It's structured like this:
Object3D
children (arrays containing your meshes (the number can change based on the model in your scene))
Mesh (containing data about your geometry, which is what you need to modify).
So in order to modify the "geometry" you need to access it like so:
modifier.modify( mesh.children[0].children[0].geometry );
You'll need to apply a modifier to every model in your scene, so:
modifier.modify( mesh.children[0].children[0].geometry );
modifier.modify( mesh.children[0].children[1].geometry );
modifier.modify( mesh.children[0].children[2].geometry );
depending on the number of models you have.
It's like you have to open a container and inside you find a smaller container, then another one and so on, until you access geometry data. Hope it is clear enough :)

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:
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);

paper.js: getting raw pixel data for two layers/groups?

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.

Hardcore mathematic and 3d shapes using canvas and javascript

I have an old friend who is a mathematician. He has his own math to compress his formulas, which are incredibly beautiful.
He works in a program called Mathematica, which transforms the formulas for 3D-shapes.
I wonder if it is possible to obtain these figures using Canvas and JavaScript? See attached formula and figure.
I know little of this myself. But I would be delighted if some one could show me an example.

Since you mention Mathematica I'll use it to provide a few more examples for various values of t. I can't help you with canvas though.
This is the Mathematica code:
With[{a = 3, t = 0.7},
RegionPlot3D[
10^-(t x + y)^10 + 10^-(-t x + y)^10 + 10^-(t y + z)^10 +
10^-(-t y + z)^10 + 10^-(t z + x)^10 + 10^-(-t z + x)^10 >
5/2, {x, -a, a}, {y, -a, a}, {z, -a, a}, PlotPoints -> 50,
Boxed -> False, Axes -> None
]]
t=0.2
t=0.4
t=0.7
t=1

It's definitely possible. You can take a look at the javascript-surface-plot library and the working example at http://www.grvisualisation.50webs.com/javascript_surface_plot.html. It produces a 3D model from a mathematical formula that can be panned and rotated as desired.
If you look at the code for the example, there is a setup function that you would need to update to whatever formula you wanted. Just need to convert your math formula into javascript.
I'm not sure what you want to do with these models once you have one, but this library seems to fit your requirements. Doing a search for html canvas 3d plot brought up additional libraries as well.

I would think WebGL would be ideal for this. It's graphics-accelerated in the newest browsers and can render in full 3D.
Perhaps there are libraries out there that can render from functions out of the box, but it's a new technology so you may have to write much of it yourself.

You are really asking two questions:
Are there any 3D canvas libraries: YES K3D
Are there math libraries for javascript: YES discussed here
If you are doing hard core math equations (which it looks like you are), you're better off doing it in something like MatLab/Maple and dumping it in a file then using a canvas 2D library to render the image. I have a lot of 3D data and I do just that. I run a Python script which calculates the points then appends it to an html file (rememer, web pages can't read data from file, so you have to include the data as a part of your html file). Then I load the html file and display generate the image using EaselJS