I use OpenLayers 6.5 for my mapping application.

With the Modify Interaction, it is possible to add or move vertices for a line layer. However, the symbol (circle) is the same whether the mouse is over an existing vertex (to be moved) or a non-existing (potential) vertex laying on a line (to be created), see the pictures below.

The is only a single style option for the Modify interaction. Any hint on how to setup a different style for these two types of nodes?

Existing vertex (can be moved) Existing vertex (can be moved)

Non-existing vertex (can be created) Non-existing vertex (can be created)

Here is the code for my current Modify interaction, where vectorLayerSource is a LineString vector source:

let modify = new ol.interaction.Modify({
    source: vectorLayerSource,
    deleteCondition: ol.events.condition.shiftKeyOnly,
    insertVertexCondition: ol.events.condition.shiftKeyOnly,
  • 1
    Coding question on GIS SE site should include relevant existing code, otherwise it's most likely to be closed as not compliant with the site policy. Please edit your question and add relevant existing code.
    – TomazicM
    Commented Apr 16, 2021 at 14:35
  • @TomazicM I believe that in this case the code distracts the reader rather than providing any useful information, but OK, question edited.
    – seb007
    Commented Apr 19, 2021 at 9:28

1 Answer 1


You can get around the absence of an event by using the features property of the point feature which is passed to a style function by the modify interaction (see the description of style in https://openlayers.org/en/latest/apidoc/module-ol_interaction_Modify-Modify.html) If the coordinates of the point match the coordinates a of vertex on that feature use the style appropriate style for existing node, otherwise use the style for adding a vertex

var modify = new Modify({
  source: source,
  style: function (feature) {
    var point = feature.getGeometry().getCoordinates();
    var geometry = feature.get("features")[0].getGeometry();
    var type = geometry.getType();
    var coordinates =
      type === "Point"
        ? [geometry.getCoordinates()]
        : type === "LineString"
        ? geometry.getCoordinates()
        : type === "Polygon"
        ? geometry.getCoordinates()[0]
        : [];
    var match = false;
    coordinates.forEach(function (coordinate) {
      match =
        match || (coordinate[0] === point[0] && coordinate[1] === point[1]);
    return match ? style1 : style2;


You should avoid having a draw interaction active at the same time as the modify as its style will take precedence.


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.