OpenLayers Primer

There are many benefits using OpenLayers for map functionalities compared with using map apis directly. here is a list of lessons I learned when I started out to use OpenLayers, they are basic  important concepts therefor critical to the correct use of OpenLayers, another reason they are here is I found them confusing too.

Projections:

Normally the maps as baselayer are using  EPSG:900913, which is using meters as unit, while google geocode service or normal geocoding all use degrees as coordinates which is EPSG:4326.

So coming into map coordinates need to be converted from degrees into meters

Coming out of map points in meters need to be converted into degrees

All the geometry objects, points, lines and polygons in the map are all meters based, and only meters based geometry objects can be used by map.

Point and LonLat:

OpenLayers.LonLat and OpenLayers.Geometry.Point are totally different types, you can not mistake one with the other in the OpenLayers function calls. And also you need to be careful  about what tthe method returns, is it  a point or LonLat?

They do not carry explicit projection information with them, the projections are decided by context, if you created a LonLat or point in degrees, then they are in degrees, LonLat or point which are retrieved from maps, are using maps projection which is meters in most scenarios.

When projection transformation is called for, both types can be converted from one projection to another project by calling transform function.

Relative to projection transformation, LonLat and Point can be created from each other by referencing  x and y  of a Point  or lon and lat of a LonLat.

var mapCenter = map.getCenter();

var myLocation = new
 OpenLayers.Geometry.Point(mapCenter.lon, mapCenter.lat);

Above is a good example of this,  mapCenter is LonLat, a Point myLocation can be created based on that, myLocation and mapCenter are on same projection.

While OpenLayers.Geometry.Point, OpenLayers.Geometry.LinearRing, OpenLayers.Geometry.Polygon all are based on Point.

Vector layer and Features

One of the things only OpenLayers can provide is the ability to draw lines, polygons on top of maps, these are called Features in  OpenLayers, Features are added to a container which is Vector layer in OpenLayers

var vectorLayer = new OpenLayers.Layer.Vector("Overlay", {
 styleMap: layer_styleMap
 });

map.addLayer(vectorLayer);

Point feature :

var pointFeature = new OpenLayers.Feature.Vector(point, null, style);

Line feature :

var lineFeature = new OpenLayers.Feature.Vector(

new OpenLayers.Geometry.LineString(pointList), null, style);

Polygon feature :

var linearRing = new OpenLayers.Geometry.LinearRing(pointList);

var polygonFeature = new OpenLayers.Feature.Vector(

new OpenLayers.Geometry.Polygon([linearRing]));

A circle

var circleFeature =new OpenLayers.Feature.Vector(

new OpenLayers.Geometry.Polygon.createRegularPolygon(

markerlocation, // center
 1000, //radius, map units
40, // sides
0));

So basically a Feature is Feature.Vector which is created based on a Geometry.

There are three parameters used to create a Feature, the first is the Geometry, the second (optional) is attributes {…} and the third(optional) is style.

Features can cover each other, so normally put smaller features only on top of bigger ones, so that smaller features can be picked on otherwise they will be hidden under the bigger ones, you will not be able to select them.

 

<strong>Style and StyleMap:</strong>

Styles are used by features,  the actual place it is used is in Openlayers.Layer.Vector, drawFeature.

Style can be passed to a Feature, and layer.Vector, but only layer.Vector can accept StyleMap,  when style of feature is provided, stylemap will not work.  the decision making of the styles of a Feature is as following

First search is feature.style

You can see that the style can be passed in in feature constructor

var pointFeature =
 new OpenLayers.Feature.Vector(point, null, style_green);

Second is container.style which is style of  the Layer.Vector

Third is Layer.Vector.styleMap, in this case the style is generated from the styleMap as

style = this.styleMap.createSymbolizer(feature, renderIntent);

which drills down to styles that are stored in styleMap, and calls style.createSymbolizer, therefore rule based styles and attribute replacement all work at styleMap level, and ONLY at styleMap level, aka Layer.Vector level not the feature level, once feature has a style, styleMap of container will no longer work.

Feature Movement:

Feature(Feature.Vector) movement is done through its geometry, which was passed in when the feature is created,

The moving of feature can be done like:

pointFeature.geometry.move(dx, dy);

pointFeature.layer.drawFeature(pointFeature);

circleFeature.geometry.move(dx, dy);

circleFeature.layer.drawFeature(circleFeature);

dx and dy is the movement happened in that direction