ASE Home Page Products Download Purchase Support About ASE
ChartDirector General
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  ScatterContour plot as a layer on top of a Google Map
Posted by Steve on Oct-27-2009 15:30
| Reply | Monitor
I need to do a scatter contour superimposed over a google map.  I can see how to easily
put my z-axis data into the scatter contour.  However, my xy data is lat/long so that will
need to be mapped, and then the output png has to be added as a translucent layer on top
of a google map.  Has anyone done this or seen code samples?  Thx, Steve

  Re: ScatterContour plot as a layer on top of a Google Map
Posted by Peter Kwan on Oct-28-2009 01:47
| Reply | Monitor
Hi Steve,

You can simply uses the lat/long values as the x and y coordinates. One thing to note is that axis scale needs to be "monotonic internally" (that is, either increasing or decreasing). For example, the scale (-20, -10, 0, 10, 20, 30) works, while the scale (160, 170, 180, -170, -160) will not work, because the latter scale is not monotonic.

For geometric data, we often encounter non-monitonic case like (160, 170, 180, -170, -160). For these cases, we need to modify the coordinates, so that the scale becomes (160, 170, 180, 190, 200), that is, if the coordinates are not monotonic, we need to convert negative values on the right side by adding 360 to them. Note that you can still "label" your axis as (160, 170, 180, -170, -160). The labels are just for human reading and do not have to be the same as the real coordinates you use to plot the chart. For example, in Java, the code would like:

//actual scale used to plot the chart is 160 - 200, but the labels are (160, 170, 180, -170, -160).
c.xAxis().setLinearScale(160, 200, new String[] { "160", "170", "180", "-170", "-160" });

For the translucent part, you can use translucent colors as the fill colors for the contour chart. For example:

//create a chart with a transparent background
XYChart c = new XYChart(500, 400, Chart.Transparent);

.... create scatter and contour layers as usual ....

//an array of translucent colors to be used as the contour color
int[] fillColors =
{
0x800000C0, 0x8--000FF, 0x800030FF, 0x800060FF, 0x800090FF, 0x8000C0FF, 0x8000FFFF, 0x8030FFC0, 0x8060FF90, 0x8090FF60, 0x80C0FF30, 0x80FFFF00, 0x80FFCC00, 0x80FF8800,
0x80FF5500, 0x80FF0000
};

//layer = ContourLayer object
layer.colorAxis().setColorGradient(true, fillColors);

//ask ChartDirector to retain the alpha transparency when creating the PDF
c.setTransparentColor(-1);

.... output chart as PNG as usual ....


I am not familiar with the detail structure of google map. However, in general, you can put a PNG image anywhere you like on a web page, including over other HTML contents. So I assume you can put the PNG image overlap the google map. I am not aware of any existing code samples though.

Hope this can help.

Regards
Peter Kwan