http://openlayers.org/
Online Mapping with OpenLayers
Adding Dimension: Points, Lines, and Shapes

Point

You've already learned to create points on the map, from the first part of "Clickable Icons in OpenLayers"  - http://p2pu.org/webcraft/online-maps-openlayers/document/clickable-icons-openlayers

The point is the basis for OpenLayers's lines and shapes (sometimes called polylines and polygons).  This lesson will explain creating and styling these objects, and also cover built-in tools for your users to draw points, lines, and shapes onto the map.

Line

OpenLayers's official class name for a line is LineString http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Geometry/LineString-js.html

The first section on that page, a constructor, explains that to create a LineString, you need to send it an array (list) of points.  There are multiple ways to do this:

pointA = new OpenLayers.Geometry.Point( ... ).transform( ... )
pointB = new OpenLayers.Geometry.Point( ... ).transform( ... )
pointList = [ pointA, pointB ];


// the array is a list of something (in this case, a lists of [ longitude, latitude ] lists
var linePts = [
    [ 91.811628, 24.904771 ],
    [ 91.810856, 24.91096   ],
    [ 91.817636, 24.911855 ],
    [ 91.831133, 24.907477 ],
    [ 91.841497, 24.898679 ],
    [ 91.841025, 24.895312 ],
    [ 91.837935, 24.891225 ],
    [ 91.842356, 24.889006 ],
    [ 91.853814, 24.888626 ]
];

// a FOR loop operates on each item inside a list
for( i=0; i<=linePts.length-1; i=i+1 ) {
    // turn this coordinate array into a point
  linePts[i] = new OpenLayers.Geometry.Point( linePts[i][0], linePts[i][1]);
    // use projection transformation
  linePts[i] = linePts[i].transform( map.displayProjection, map.projection);
}

For my example, I wanted a section of a river to stand out on my map of Sylhet, Bangladesh.  I found longitude and latitude values, put them together, and made this map:
http://jsfiddle.net/ndoiron/UAxun/89/


Shape

Lines simply aren't enough.  To highlight buildings, properties, districts and any other area, you advance to a shape.  OpenLayers officially calls these Polygons, but if it's been awhile since you were in geometry class, you probably think of them as shapes: http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Geometry/Polygon-js.html

You'd think that constructing a Polygon would be about the same as a line... trace the outside and you're done, right?  Well, what would you do about donut shapes, or countries within countries?  So a Polygon is a list of LinearRings.  A LinearRing - http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Geometry/LinearRing-js.html - is a list of points which form an outer or inner boundary of the shape.  They're as easy to make as LineStrings, but automatically OpenLayers will connect the first and last points of a LinearRing.

For my example, I was thinking about outlining a state or a country, but there are better, accurate ways to do that: http://openlayers.org/dev/examples/cql-format.html

I decided instead to outline some buildings in Boston, and play a related video when someone clicks on them: http://jsfiddle.net/ndoiron/UAxun/90/
This is some useful code if you were looking to add YouTube to your maps ( or open video ).

Multi-Geometry

If you want multiple points, lines, or shapes to be part of the same object -- particularly useful to style several objects at once, or to make clicking easy with any one object -- you can use Multi- objects.  Just send it a list of objects: http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Geometry/MultiPoint-js.html


Advanced Style

You don't want all of your lines and polygons to look the same... that's boring.  Have a diverse amount of style items that you can set on each polygon.

The most noticeable things you can control are border and fill color, as well as transparency.

Hope to see people using these attributeshttp://openlayers.org/
-strokeLinecap
-strokeDashstyle

http://docs.openlayers.org/library/feature_styling.html#style-properties


Drawing Control

You aren't the only one who wants to draw on your map.  Users want to add their own favorite places, trace hiking trails, and select search areas.  Fortunately, OpenLayers has these tools baked in.  Here's a working example where you can practice drawing.  Click to draw, double-click to stop: http://openlayers.org/dev/examples/draw-feature.html

The Control is described here http://dev.openlayers.org/docs/files/OpenLayers/Control/DrawFeature-js.html

//start by creating the layer where polygons will go
var polygonLayer = new OpenLayers.Layer.Vector("Drawn Shapes");
map.addLayer(polygonLayer);

// OpenLayers.Handler.Polygon is only a number, but it tells DrawFeature what to draw 
polygonControl = new OpenLayers.Control.DrawFeature( polygonLayer, OpenLayers.Handler.Polygon );
polygonControl.featureAdded=useDrawnPolygon;
map.addControl(polygonControl);
polygonControl.activate();

We connect featureAdded event to the useDrawnPolygon function.  Let's make that now, and have it turn the finished polygons red.

function useDrawnPolygon( feature ) {
        // turn the polygon red
        feature.style.fillColor="red";
        // get a list of points (in case you want to use this for other applications)
        featurePts=feature.geometry.getVertices();
}