Hopeful Llama Hopeful Llama - 7 months ago 37
Javascript Question

OpenLayers3 Overlay with textboxes and buttons

I have an Overlay on my OpenLayers3 map which displays over a Feature upon selection. This Overlay is destroyed upon deselection of a Feature, which occurs when the user clicks anywhere on the map (not on a feature).

The Overlay shows some textboxes, and two buttons: Save Changes and Delete. The user should be able to use the textboxes and press Save Changes to edit the Feature, or press Delete which will display a modal window for confirmation before deletion.

However, the nature of event propagation is causing some trouble. With the Overlay's option of stopEvent set to true, the textboxes are clickable and editable, but the button's events do not fire. When set to false, the textboxes are click-through to the map, causing a deselect and destruction of the Overlay, though the buttons can now be clicked.

Any suggestions on how to get both the textboxes enterable and editable, while maintaining the button's events capabilities?

I couldn't quite get a jsFiddle working, but here is some example code below:

Select Tool on the Map

var interaction = new ol.interaction.Select({
condition: ol.events.condition.click
});
var refreshView = function () {
refreshPopup();
};
interaction.getFeatures().on('add', refreshView);
interaction.getFeatures().on('remove', refreshView);
map.addInteraction(interaction);


HTML for the Popup

<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div class="popover-content">
<table class="popupTable table table-bordered table-hover">
<tbody>
<tr><td>ID: </td><td>id</td></tr>
<tr><td>value1/td><td><input type="text"></td></tr>
<tr><td>value2</td><td><input type="text"></td></tr>
</tbody>
</table>
<button class="btn save-feature">Save</button>
<button class="btn delete-feature">Delete</button>
</div>
</div>

Answer

After some testing I found that while stopEvent: true; had been set, the .click() function of the buttons were still being called, although the default behaviour had been stopped.

Thus the solution (although it may not be pretty) was to explicitly define the behaviour in each buttons .click() event. For example, showing the modal on click rather than using Bootstrap's data attributes to handle that.

For example:

$(".save-feature").click(function (event) {
    // Do Save stuff here
});
$(".delete-feature").click(function (    
    // Explicitly show modal because OpenLayers Overlay with stopEvent: true 
    // suppresses stuff
    $("#delete-modal").modal('show');
});
Comments