Draw routes on the map

To draw routes on your map, do the following:

Step 1: Enable Routes Drawing

  1. Edit your map and open the “Progress Map Settings” widget.
  2. Navigate to the “Polylines settings” menu.
  3. Set the “Draw Polyline option” field to “Yes”.

Step 2: Add and Configure Routes

  1. Scroll to the “Polylines” section. Click on the group field “Polyline 1” or “Add new polyline” for additional routes.
  2. In the “Polyline Label” field, enter the route’s name or title.
  3. Enter a unique identifier in the “Polyline ID/Name” field. Each route must have a unique ID/Name.
  4. Specify the “Polyline points type” and draw your route using one of the following methods:

Method 1: Using Post IDs

        1. Select “Post IDs” in the “Polyline points type” field.
        2. In the “Polyline Paths (Post IDs)” field, select at least three posts to form the route.

Method 2: Using Coordinates

        1. Select “Lat,Lng” in the “Polyline points type” field.
        2. Open “Polyline Paths” and enter the coordinates in the “Polyline coordinates” field using the format [Lat,Lng] or [Lng,Lat]. Example: [45.5215,-1.5245],[41.2587,-1.2479],[40.1649,-1.9879]
        3. Select the coordinates format in the field “LatLngs order”. Refer to the instructions in “Step 5” below to ensure the proper placement and display of your route!

Method 3: Draw Directly in the Plugin Settings

        1. Select “Lat,Lng” in the “Polyline points type” field.
        2. Open “Polyline Paths” and draw your route. Use the drawing tool to create the route directly. Refer to the provided instructions in the field to use the tool.

Step 3: Configure Route Options

  1. Open “Polyline options” and adjust the following settings:
    • “Clickable”: Choose whether the route responds to mouse events.
    • “Polyline redirect URL”: Add a link to open when the route is clicked (if clickable).
    • “Polyline description”: Enter a description displayed in an infobox on hover.
    • “Infowindow Maximum width”: Set the max width (in pixels) for the infobox.
    • “Geodesic”: Choose whether the route follows the Earth’s curvature.
    • “z-index”: Specify the route’s stacking order.
    • “Visibility”: Set whether the route is visible by default.
  2. Customize the route’s style in the “Polyline style” group field:
    • Adjust “Fill color”, “Fill opacity”, “Stroke color”, “Stroke opacity”, “Stroke weight”, and “Stroke Position”.
    • In “Stroke type”, choose between linear or dashed strokes.
  3. Optionally, customize the route’s style for hover events in the “Polyline hover style” group field:
    • In the “Change the polyline style on hover” field, select whether you want to change the route’s style when the mouse enters or hovers over it.
    • Adjust “Fill color”, “Fill opacity”, “Stroke color”, “Stroke opacity”, “Stroke weight”, and “Stroke Position”.
    • In “Stroke type”, choose between linear or dashed strokes.

Step 4: Adding More Routes

Click “Add new polyline” and repeat the steps above for additional routes, or save your map settings if you’ve finished adding routes.

Step 5: Verify Route Placement

To ensure routes added using “Method 2” are displayed correctly on the frontend map, it’s essential to verify that their coordinate order is “Latitude” followed by “Longitude.” Many services provide coordinates in reverse order, i.e., “Longitude, Latitude”, which can result in routes being displayed incorrectly or not at all.

To resolve this issue, follow these steps:

    1. After adding your routes, save the map settings.
    2. Revisit the map settings and review each route by opening the “Polyline path” widget to confirm their placement on the map.
    3. If a route is misplaced, it may have reversed coordinates. In this case, click the “Reverse coordinates” button at the top of the map. This tool quickly reverses the order of all route vertices.
    4. Once the route appears correctly on the map, click “Update/Display polyline coordinates” to save the changes.
    5. Save your map settings after verifying the placement of all routes.

By taking these steps, you ensure your routes are displayed accurately on the frontend map.

In the same context