The OpenLayers map here: http://www.dassh.ac.uk/demonstrations/valmer/demo5.html

has an event to add a vector layer, plus creates a textbox on the page below. Ideally I'd like the click event to add the marker, plus display a popup with a textbox/textarea where the user can fill in information on the location. This would then be submitted to the textbox below.

Can anyone help?

1 Answer 1


Use a control.select added to a Vector Layer, an example of drawing and selecting a Polygon can be seen here

When you display your popup, you would include the fields that needed to be updated, along with a button to update your database using AJAX, or you could update some html elements as per the example you provided.

This is an example of using the control.select and taking some fo the code from the example you provided:

    function onFeatureSelect(feature) {
        selectedFeature = feature;
        popup = new OpenLayers.Popup.FramedCloud("chicken", 
                                 "<div id='"+ vid + "'><input type='hidden' name='lat' value='"+ addLat.lat + "'><input type='hidden' name='lon' value='"+ addLat.lon + "'><button onclick=removeSite('"+ vid + "')><img src='images/editing-delete-icon.png' height='40' alt='Delete Site'></button><textarea name='comment' placeholder='Site Description'></textarea><br/></div>",
                                 null, true, onPopupClose);
        feature.popup = popup;
    function onFeatureUnselect(feature) {
        feature.popup = null;
        selectControl = new OpenLayers.Control.SelectFeature(polygonLayer,
            {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

You will need to modify the code in the popup to update your database via an AJAX Call or some additional HTML areas on your page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.