Skip to content
September 30, 2010 / Gagan

Draw Line direction on OpenLayers Feature

Many times its required to draw the line direction on LineString of OpenLayers. It may be to show the flow of water in pipe, one-way roads or directed geometric network. I have written generic code to draw the line direction using OpenLayers. Here is example to check my code how it is working.

Basically I create a point feature and set the angle attribute of this feature same as of the line at that position. And position of point/direction-arrow could be start, end or middle of the LineString or segment. For each segment of linestring  a arrow can be added. Not shown in the  example but the position can be set any where on the linestring by giving the measure value (between 0-1) to the function “getPointOnLine( )” in Direction.js



Leave a Comment
  1. Mario / Feb 18 2011 5:54 pm

    One could get the angle of a line with values from 0 º to 360 º, with the bearing function.



  2. Gagan / Feb 20 2011 12:10 pm

    Hi Mario,

    Is the bearing function available in openlayers.


  3. NicolasDumoulin / Nov 7 2011 2:26 am


    Thanks for your example. I was needed exactly this type of feature for a personal project. I haven’t found any licensing information for your code. Could you precise the license you want to use for publishing your code?
    Thank you

    • Gagan / Nov 7 2011 7:59 am

      Hi Nicolas,
      I am not very particular about the license if the code is useful for your project. I would prefer Creative Common License (CCL) if you are publishing this code with your project.

      • NicolasDumoulin / Nov 7 2011 1:54 pm

        Good news.
        To be more precise, what CC license you want?
        I propose CC by-sa.

        Thank you again 🙂

      • Gagan / Nov 8 2011 4:09 pm

        Yes, CC by Share Alike suits well.

  4. J Jones / Nov 18 2011 3:03 pm

    angle_rad = Math.acos((a_x*b_x+a_y*b_y)/Math.sqrt(a_x*a_x+a_y*a_y)) ;

    Consider avoiding the Pythagorean theorem and use the atan2 function:
    a = atan( y/x )
    or a = atan2( y , x)

    angle_rad = Math.atan2( b_y – a_y , b_x – a_x )

    or am I missing something?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: