Draw Automatically The First Vertice Of A Path With Open Layers

I'd like to help the user to input an orientation for a segment with OpenLayers. I have that form where user can input the bearing for a point, but I would like to help him by : s

Solution 1:

OpenLayers.Handler.Path.addPoint works on OpenLayers.Pixel, not OpenLayers.LonLat:

/**
 * Method: addPoint
 * Add point to geometry.  Send the point index to override
 * the behavior of LinearRing that disregards adding duplicate points.
 *
 * Parameters:
 * pixel - {<OpenLayers.Pixel>} The pixel location for the new point.
 */
addPoint: function(pixel) {
    this.layer.removeFeatures([this.point]);
    var lonlat = this.layer.getLonLatFromViewPortPx(pixel); 
    this.point = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat)
    );
    this.line.geometry.addComponent(
        this.point.geometry, this.line.geometry.components.length
    );
    this.layer.addFeatures([this.point]);
    this.callback("point", [this.point.geometry, this.getGeometry()]);
    this.callback("modify", [this.point.geometry, this.getSketch()]);
    this.drawFeature();
    delete this.redoStack;
}

I actually see no good way of achieving this other than adding an addPointByLonLat method:

OpenLayers.Handler.Path.prototype.addPointByLonLat = function(lonLat) {
    this.layer.removeFeatures([this.point]);
    this.point = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat)
    );
    this.line.geometry.addComponent(
        this.point.geometry, this.line.geometry.components.length
    );
    this.layer.addFeatures([this.point]);
    this.callback("point", [this.point.geometry, this.getGeometry()]);
    this.callback("modify", [this.point.geometry, this.getSketch()]);
    this.drawFeature();
    delete this.redoStack;
};

Or subclass as your own handler class (propbably cleaner).

Notes:

• addPoint is not an API method (so addPointByLonLat is also not). This may result in problem on version changes.
• Don't use the compressed/minified JS in development and check docs on methods you use.
• Next time consider asking on https://gis.stackexchange.com/.
• Consider asking for a code review on your JS.

Solution 2:

You can also use insertXY(x,y) function in order to insert a point with geographic coordinates http://dev.openlayers.org/docs/files/OpenLayers/Handler/Path-js.html#OpenLayers.Handler.Path.insertXY

    lonlat = new OpenLayers.LonLat(1,45);
    lonlat.transform(CONSTANTS.MAP_FROM_PROJECTION,CONSTANTS.MAP_TO_PROJECTION);
    handler.createFeature(new OpenLayers.Pixel(100, 100));
    handler.insertXY(lonlat.lon,lonlat.lat);
    handler.drawFeature();

You can check it here with a fork of your original jsfiddle : http://jsfiddle.net/mefnpbn2/

Solution 3:

See this fiddle for the solution.

tldr :

// draw the first point as I needed, as if a user has clicked on the map
handler.modifyFeature(new OpenLayers.Pixel(50, 50), true); 

// draw a first point on the map (not clicked). // This will be the initial point where the "cursor" is on the map, as long as // the user hasn't hovered onto the map with its mouse. This make the blue // line showing current segment to appear, without this segment is drawn but // no feedback is given to the user as long as he hasn't clicked.
handler.addPoint(new OpenLayers.Pixel(50, 50)); //