Preparing multi-colored vector layer

Question

I need to present a multi-colored vector layer and something similar to below:

I need to prepare the vector layer by making use with the data set available in my database.

Inside my database, I have geo coordinate data and color data

Long            Lat         ColorCode
121.4698        40.8417     FF6600
121.4698        40.8325     FF6600
.
.
.
121.0344        40.4658     FFCC00
121.0344        40.4567     FFCC00

I am beginner in web GIS.

What would be the usual way to do this?

I would guess I should put the data into GeoJSON format but how do I prepare the polygon information?

Answer 1

If you are trying to duplicate the heat map in your example, you're not going to want to use vectors. In my experience after adding more than a few hundred vectors onto openlayers your map's performance will start to degrade significantly. This looks like it might require thousands.

In your example map, they are using an image overlay, not vectors. What you would want to do is serve this data out as an image/raster overlay, probably best using your geoserver using WMS (since you tagged this question with geoserver).

The image overlay in the example you show is blocky (perhaps 8bit) for a reason. The image needs to be small enough in size to be served out efficiently, especially if it changes often. So that's what you probably want to do. I'd stay away from Vectors in your case.

Answer 2

1) Making 1 coordinate point = 1 rectangle polygon

2) Make use with the longitude and latitude information calculate a rectangle polygon coordinates to represent 1 geo coordinate

3) After get the rectangle polygon coordinate, we can make use with the Polygon properties in GeoJSON format and access the color attribute for each of the polygon

Example of GeoJSON format

var featurecollection = {"type": "FeatureCollection", "features":[
{"type": "Feature", "geometry":{type: "Polygon", coordinates:[[[126.245035612,33.1425163721],[126.295035612,33.1425163721],[126.295035612,33.0925163721],[126.245035612,33.0925163721]]]},"properties":{"fillColor": "#FF6600"}};

At OpenLayers

        var myStyles = new OpenLayers.StyleMap({ 
                    "default": new OpenLayers.Style({ 
                                    fillColor: "${fillColor}", 
                                    strokeColor: "${fillColor}", 
                                    fillOpacity: 0.5,
                                    strokeOpacity: 0.0, 
                                })
               }); 

       var geojson_format = new OpenLayers.Format.GeoJSON({}); 
       var vector_layer = new OpenLayers.Layer.Vector("Zones",{ 
                            styleMap: myStyles, 
                            rendererOptions: {zIndexing: true}, 
               }); 

       vector_layer.addFeatures(geojson_format.read(featurecollection)); 
       map.addLayer(vector_layer); 

Answer 3

A start could be to check out this wikipedia: http://en.wikipedia.org/wiki/Well-known_text#Geometric_Objects

I.E You could create a polygon-String and generate an openlayers geometry from it:

polygon = "POLYGON ((30 10, 40 40, 20 40, 10 20, 30 10))";
var geometry = OpenLayers.Geometry.fromWKT(polygon);

Edit: well, this seems like unnecessary use of a string object. I'd perhaps look into creating a OpenLayers.Geometry.Polygon from a OpenLayers.Geometry.LinearRing from a bunch of OpenLayers.Geometry.Point's.