Implement Advance Snapping in OpenLayers

When using OpenLayers for map drawing or modification, it’s important to know about the snap interaction. This will allow your features (such as roads) line up with other nearby objects when you’re done editing them so that they look nice and tidy instead of jumbled together carelessly like in confuse fashion!

Click here to get the full source code for this tutorial.

Click here to test the live demo.

In this tutorial, we will implement slightly advance snapping. In this tutorial, we will draw features whose edges will be perpendicular to either x-axis or y-axis as shown in the above image.

Few points to consider while implementing snapping:

1. Snap Interaction must be defined after Draw/Modify Interactions else it will not work.
2. When you define Snap interaction, you need to pass vector layer’s source. The vector source contains features to which drawn/modified features will snap to.

Let’s come to coding part. To understand it thoroughly, we will divide it into three parts:

1. Define Draw Interaction
2. Define Snap Interaction
3. Define a function that will allow drawn features to snap at 90 degrees with respect to x/y axis.

To define a draw interaction, we will use ol.interaction.Draw module as below(Please scroll) in code snippet at line number 12. type parameter is geometry type i.e. point/line/polygon. source parameter is used to store drawn features. In our case, it will store in vector_layer’s source. Finally, at line number 19, we are adding this interaction to map object which will then allow to draw on map.

After we have defined Draw interaction, now we will define Snap interaction. We will use ol.interaction.Snap module at line number 23. At line number 26, we are adding this interaction to map. After that only, it will be enabled. The source parameter defines the vector layers’s source whose features will be snapped when we will draw or modify any feature. This will enable default snapping behavior.

Even though, snapping is enable, it will not be snapped at 90 degrees relative to x/y axis which is our objective here. To snap our Draw interaction at 90 degrees, we will create 4 line features at every vertex or corner and they will be perpendicular to x/y axis. something like below image. The logic behind this is very simple:

1. First we are checking if new vertex or corner is added to geometry. At line number 101, we are checking for new vertex.
2. Once we know that a new vertex has been created, we will call snapFeatures function at line number 58 which is defined at line number 113.
3. Here first we get the coordinates of vertex(line number 117 and 118) and then we find four new coordinates(line number 127) at some distance which are at 0, 90, 180 and 270 degrees angles from the vertex. These all angles are perpendicular to x/y axis.
4. We are using mathematical formula at line number 129 and 130 to get four perpendicular coordinates from vertex.
5. Once we have all those perpendicular coordinates, we are creating four line geometry features from these points. And then these line features are added to vector_layer’s source at line number 136. Our Snap Interaction is also using same vector_layer’s source(see at line number 24). So, when we will start drawing, our drawing will be automatically snapped to any of these four line features if we take our drawing near to them.
6. One thing to note here is that, we have to add those line features to source which Snap Interaction is using.
7. Mission accomplished. We are able to snap at 90 degrees while drawing. See the first image at the top.

I hope this tutorial will create a good foundation for you and will help you to create other snapping functionalities as well.

If you want tutorials on another GIS topic, please reply in the comment section.

Click here to get the full source code for this tutorial.

Click here to test the live demo.