In OpenLayers, if you want to define simple function, which is called, when you draw some object on the screen (point, line, polygon, box), it is relatively complicated. In HSLayers, we defined set of classes, which do exactly what you want and do it fast. This classes are used later for construction of length and area measurement tools.
Note
While constructing the instances, displayClass attribute is used. This means, that the div, rendered into the panel, bound with this control, will get name “displayClass”+”item”+”Inactive” and when you click on it, it will became “Active”. So, you can define the particular buttons in CSS file.
HSLayers.Control.DrawPoint is control, which lets you draw point to map and bound it with special function. The Control can be added to OpenLayers.Control.Panel and so it will be rendered as button:
var point = new HSLayers.Control.DrawPoint(vector_layer,{displayClass:"hsControlDrawPoint"});
panel.addControls([point]);
// define the function called on "done" callback
point.handler.callbacks["done"] = function(g){
// do something or in this case nothing
};
HSLayers.Control.DrawLine is control, which lets you draw point to map and bound it with special function. The Control can be added to OpenLayers.Control.Panel and so it will be rendered as button:
var line = new HSLayers.Control.DrawLine(vector_layer,{displayClass:"hsControlMeasureLine"});
panel.addControls([line]);
// you can redefine empty functions, to your custom ones, defined
// elsewhere
line.handler.mousedown = myOnMeasureLineMousedownFunction;
line.handler.mousemove = myOnMeasureLineMousemoveFunction;
// call something when the line is done
line.handler.callbacks["done"] = function(g){ // do something or in this
case nothing};
HSLayers.Control.DrawPolygon is control, which lets you draw point to map and bound it with special function. The Control can be added to OpenLayers.Control.Panel and so it will be rendered as button:
The usage is excatly the same, like for previous draw controls:
var polygon = new HSLayers.Control.DrawPolygon(vector_layer,{displayClass:"hsControlMeasureArea"});
this.panel.addControls([polygon]);
polygon.handler.mousedown = onMeasureLineMousedown;
polygon.handler.mousemove = onMeasureLineMousemove;
polygon.handler.callbacks["done"] = function(g){};
HSLayers.Control.DrawBox is control, which lets you draw point to map and bound it with special function. The Control can be added to OpenLayers.Control.Panel and so it will be rendered as button:
It is little bit different compared to the vector drawings, because boxes are drawed using standard HTML DIV element. You do not need to define any helper layer.
var boxbutton = new HSLayers.Control.DrawBox({displayClass:"hsControlDrawBox"});
app.panel.addControls([boxbutton]);
boxbutton.handler.callbacks["done"] = function(g){console.log("#");};