Draw polylines on the map

To draw polylines on your map, do the following:

Step 1: Enable Polyline 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 Polylines

  1. Scroll to the “Polylines” section. Click on the group field “Polyline 1” or “Add new polyline” for additional polylines.
  2. In the “Polyline Label” field, enter the polyline’s name or title.
  3. Enter a unique identifier in the “Polyline ID/Name” field. Each polyline must have a unique ID/Name.
  4. Specify the “Polyline points type” and draw your polyline 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 polyline.

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 polyline!

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 polyline. Use the drawing tool to create the polyline directly. Refer to the provided instructions in the field to use the tool.

Step 3: Configure Polyline Options

  1. Open “Polyline options” and adjust the following settings:
    • “Clickable”: Choose whether the polyline responds to mouse events.
    • “Polyline redirect URL”: Add a link to open when the polyline 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 polyline follows the Earth’s curvature.
    • “z-index”: Specify the polyline’s stacking order.
    • “Visibility”: Set whether the polyline is visible by default.
  2. Customize the polyline’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 polyline’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 polyline’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 Polylines

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

Step 5: Verify Polyline Placement

To ensure polylines 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 polylines being displayed incorrectly or not at all.

To resolve this issue, follow these steps:

    1. After adding your polylines, save the map settings.
    2. Revisit the map settings and review each polyline by opening the “Polyline path” widget to confirm their placement on the map.
    3. If a polyline 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 polyline vertices.
    4. Once the polyline 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 polylines.

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

In the same context