Draw routes on the map

To draw routes on your map, do the following:

Step 1:

  1. Edit a map
  2. Open the widget “Progress Map Settings”.
  3. Click on the menu “Polylines settings”.
  4. Select the option “Yes” in the field “Draw Polyline option”.

Step 2:

  1. Scroll down to the section “Polylines”, then, click on the group field “Polyline 1” (or click on the button “Add new polyline” if this is not your first route).
  2. Enter your route name/title in the field “Polyline Label”.
  3. Enter the unique name/key/ID of your route in the field “Polyline ID/Name”. Do not use the same name/key/ID for multiple routes on the same map!
  4. Specify the route points type in the field “Polyline points type”, then, draw your route using one of these methods:
    • 1st Method: Draw a route by connecting multiple posts already available on the map:
        1. In this field, select the option “Post IDs”.
        2. In the field “Polyline Path (Post IDs)”, select the posts that will be used/connected to form your route. You should add at least 2 posts!
    • 2nd Method: Draw a route by providing the “lat,lng” coordinates:
        1. In this field, select the option “Lat,Lng”.
        2. Open the group field “Polyline Path [Lat,Lng]” and enter or paste the route coordinates in the field/textarea “Polyline coordinates” by putting each line segment (LatLng) as [Lat,Lng] or [Lng,Lat] seperated by comma. For example, [45.5215,-1.5245],[41.2587,-1.2479],[40.1649,-1.9879]
        3. Select the coordinates format in the field “LatLngs order”.
    • 3rd Method: Draw your route in the plugin settings:
        1. In this field, select the option “Lat,Lng”.
        2. Open the group field “Polyline Path [Lat,Lng]” and draw your route. Since version 5.2, a new feature has been added allowing you to easly draw your routes. All the inscructions you’ll need to use that drawing tool can be found under that field. Read the insctructions and start drawing!
  5. Once finished drawing, scroll down and open the group field “Polyline options”.
    1. Choose whether this route handles mouse events or not by choosing an option in the field “Clickable”.
    2. If your route is clickable, you may want to open a link when the user clicks on it. Paste your route link in the field “Polyline redirect URL”, then, choose how to open the link in the field “URL target”.
    3. Enter the route description in the field “Polyline description”. The description will be displayed inside an infobox when the user hover over the route. For this to appear, your route must be clickable!
    4. Enter the maximum width (in pixels) of the infobox that will contain the route description in the field “Infowindow Maximum width”.
    5. Choose whether your route should follow the curvator of the earth or not by selecting an option in the field “Geodesic”.
    6. Enter the z-index of your route in the field “z-index”.
    7. Hide and/or show your route on the map by choosing an option in the field “Visibility”.
  6. To customize your route style, open the group field “Polyline style”.
    1. Modify the colors and values in the fields “Stroke color”, “Stroke opacity” and “Stroke weight”.
    2. In the field “Stroke type”, choose the route stroke type. You can draw linear routes or dashed routes!
  7. To add a new route, click on the button “Add new polyline”, then, repeat the steps above.

In the same context