[OSM-dev] how to make a line with OpenLayers

Christoph Boehme christoph at b3e.net
Mon Jun 22 11:49:06 BST 2009


Hi Ahmed,

> I would like to know how to make a line with openLayres and  display
> it on the map,
> I have of course the coordinates of the 2 extreme points ( lat and
> lon).

that's quite simple:

1. Create a vector layer:

var lineLayer = new OpenLayers.Layer.Vector('Line Layer');
map.addLayer(lineLayer);  // Assuming that map is your map object

2. Create a LineString geometry object with the end points of your line:

var points = new Array(
    new OpenLayers.Geometry.Point(lon1, lat1),
    new OpenLayers.Geometry.Point(lon2, lat2)
);
var line = new OpenLayers.Geometry.LineString(points); 

3. Transform the LineString into the map projection:

var defaultProj = new OpenLayers.Projection('EPSG:4326');
line = line.transform(defaultProj, map.getProjectionObject());

4. Define a style for your line:

var style = {
    strokeColor: '#0000ff', 
    strokeOpacity: 0.5,
    strokeWidth: 5
};

5. Create a vector feature with the LineString geometry:

lineFeature = new OpenLayers.Feature.Vector(line, null, style);

6. Add the feature to the vector layer:

lineLayer.addFeatures([lineFeature]);

On http://www.mappa-mercia.org/birmingham-half-marathon/ you find an
example that draws a number of lines to display a running course on top
of a map. Except for the javascript array with the coordinates the code
is embedded directly into the html file.

The documentation on http://docs.openlayers.org/ and the API reference
on http://dev.openlayers.org/apidocs/ are also very helpful.

	Cheers,
	Christoph

ahmed soua <ahmed.soua at gmail.com> wrote:
> Hi all,
> I would like to know how to make a line with openLayres and  display
> it on the map,
> I have of course the coordinates of the 2 extreme points ( lat and
> lon).
> 
> Thanks
> 
> -- 
> Le bonheur est comme l'écho : il vous répond : mais il ne vient pas.
> 




More information about the dev mailing list