Skip to content

cardinal snap for map editing page #4352

@brendanheywood

Description

@brendanheywood

The new editing page is pretty awesome. However it does not have snapping which makes it much harder to nicely line up adjacent areas.

There should be 2 types of snapping:

  1. snapping onto any other lines or vertexs from other area. This one is out of the box with open layers and should be trivial to add:

https://openlayers.org/en/latest/examples/snap.html

This one is much better than the one which was part of the old maps which only did vertex snapping and not line snapping.

  1. cardinal snapping east west north south so you can easily make a perfect rectangle. This only needs to snap to vertices in the current shape not other shapes. This makes a big different in making maps look tidy otherwise everything is free form and irregular.
import Draw from 'ol/interaction/Draw';

const draw = new Draw({
  source: vectorSource,
  type: 'LineString',
  geometryFunction: function (coords, geom) {
    if (!geom) {
      geom = new ol.geom.LineString(null);
    }

    if (coords.length > 1) {
      const last = coords[coords.length - 2];
      const curr = coords[coords.length - 1];

      const dx = Math.abs(curr[0] - last[0]);
      const dy = Math.abs(curr[1] - last[1]);

      // snap horizontally or vertically
      if (dx > dy) {
        curr[1] = last[1]; // horizontal
      } else {
        curr[0] = last[0]; // vertical
      }
    }

    geom.setCoordinates(coords);
    return geom;
  }
});

map.addInteraction(draw);

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions