Draw polygons (shapes) on the map

To draw polygons on your map, do the following:

Step 1: Enable Polygon Drawing

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

Step 2: Add and Configure Polygons

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

Method 1: Using Post IDs

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

Method 2: Using Coordinates

        1. Select “Lat,Lng” in the “Polygon points type” field.
        2. Open “Polygon Paths” and enter the coordinates in the “Polygon 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 polygon!

Method 3: Draw Directly in the Plugin Settings

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

Step 3: Configure Polygon Options

  1. Open “Polygon options” and adjust the following settings:
    • “Clickable”: Choose whether the polygon responds to mouse events.
    • “Polygon redirect URL”: Add a link to open when the polygon is clicked (if clickable).
    • “Polygon 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 polygon follows the Earth’s curvature.
    • “z-index”: Specify the polygon’s stacking order.
    • “Visibility”: Set whether the polygon is visible by default.
  2. Customize the polygon’s style in the “Polygon 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 polygon’s style for hover events in the “Polygon hover style” group field:
    • In the “Change the polygon style on hover” field, select whether you want to change the polygon’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 Polygons

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

Step 5: Verify Polygon Placement

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

To resolve this issue, follow these steps:

    1. After adding your polygons, save the map settings.
    2. Revisit the map settings and review each polygon by opening the “Polygon path” widget to confirm their placement on the map.
    3. If a polygon 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 polygon vertices.
    4. Once the polygon appears correctly on the map, click “Update/Display polygon coordinates” to save the changes.
    5. Save your map settings after verifying the placement of all polygons.

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

In the same context