Note: This feature has been first introduced in version 3.5!
The plugin provides the possibility to use the ground overlays in order to place images on the map. The image will be rendered on the map, constrained to the given bounds, and conformed using the map’s projection. You can add multiple images on a single map. To place an image on your map, do the following:
Step 1:
Edit a map
Open the widget “Progress Map Settings”.
Click on the menu “Ground overlays settings”.
Select the option “Yes” in the field “Ground overlays option”.
Step 2:
Scroll down to the section “Images (Ground Overlays)”, then, click on the group field “Image 1” (or click on the button “Add new image” if this is not your first ground overlay).
Identify your image by giving it a name/label in the field “Image Label”.
Open the group field “Image overlay URL & Bounds” and create your ground overlay using one of these two methods:
1st Method: If you already know the image bounds:
Upload your image or paste its URL in the field “Image URL”.
In the field “North-East coordinates”, enter the Latitude & Longitude of the top-right corner of the image. In other words, the location where you want the top-right corner of the image to be.
In the field “South-West coordinates“, enter the Latitude & Longitude of the bottom-left corner of the image. In other words, the location where you want the bottom-left corner of the image to be.
2nd Method: Find the image overlay bounds in the plugin settings. Since version 5.2, a new feature has been added allowing you to easly find your ground overlay bounds. All the inscructions you’ll need to use that drawing tool can be found under that field. Read the insctructions and start drawing!
Open the group field “Image options”.
Select the image opacity in the field “Image opacity”.
Specify the image visibility in the field “Visibility”.
The option “Always visible” will display the image on the map and users won’t be able to hide it.
The option ““ will hide the image once the map is loaded but users will have the possibility to show it.
The option “Show on map load and allow users to hide & show it when they want” will display the image once the map is loaded and users will have the possibility to hide & show it.
The option “Disable” will deactivate the image.
The button that hides & shows the image will be displayed on the top-right corner of the map (The coordinates in the field “North-East Image Bounds”). If you don’t like the position of the button, specify the coordinates of the location where you want it to be in the field “Icon position”.
If you don’t like the button icons, you can change them from the fields “Show buttom icon” and “Hide buttom icon”.
To add a new image overlay, click on the button “Add new image”, then, repeat the steps above.
Making a polygon clickable allows it to trigger a request when a user clicks and/or hovers over it. The request depends on the user’s action: a click will open a link, while a hover will display an infobox. To enable this feature, follow these steps:
Edit your map and open the “Progress Map Settings” widget.
Go to the “Polygons settings” menu.
Select the polygon you want to edit by clicking on its corresponding group field.
Open the “Polygon options” widget.
Set the “Clickable” field to “Yes”.
To link the polygon to a URL, paste the link in the “Polygon redirect URL” field and choose how to open it in the “URL target” field.
Add a description for the polygon in the “Polygon description” field, which will appear in an infobox when a user hovers over the polygon.
Set the maximum width (in pixels) of the infobox that will display the polygon description in the “Infowindow Maximum width” field.
Making a polyline clickable means that when a user clicks and/or hovers over it, it’ll execute a request. This request varies depending on the user’s action. If it a click action/event, a link will be opened, if it’s a hover action/event, an infobox will be displayed. To make a polyline clickable, do the following:
Edit a map
Open the widget “Progress Map Settings”.
Click on the menu “Polylines settings”.
Edit your polylone by clicking on it related group field.
Select the option “Yes” in the field “Clickable”.
To open a link when the user clicks on the polyline. Paste your polyline link in the field “Polyline redirect URL”, then, choose how to open the link in the field “URL target”.
Enter the polyline description in the field “Polyline description”. The description will be displayed inside an infobox when the user hover over the polyline.
Enter the maximum width (in pixels) of the infobox that will contain the polyline description in the field “Infowindow Maximum width”.
Edit your map and open the “Progress Map Settings” widget.
Navigate to the “Polylines settings” menu.
Set the “Draw Polyline option” field to “Yes”.
Step 2: Add and Configure Polylines
Scroll to the “Polylines” section. Click on the group field “Polyline 1” or “Add new polyline” for additional polylines.
In the “Polyline Label” field, enter the polyline’s name or title.
Enter a unique identifier in the “Polyline ID/Name” field. Each polyline must have a unique ID/Name.
Specify the “Polyline points type” and draw your polyline using one of the following methods:
Method 1: Using Post IDs
Select “Post IDs” in the “Polyline points type” field.
In the “Polyline Paths (Post IDs)” field, select at least three posts to form the polyline.
Method 2: Using Coordinates
Select “Lat,Lng” in the “Polyline points type” field.
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]
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
Select “Lat,Lng” in the “Polyline points type” field.
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
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.
Customize the polyline’s style in the “Polyline style” group field:
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:
After adding your polylines, save the map settings.
Revisit the map settings and review each polyline by opening the “Polyline path” widget to confirm their placement on the map.
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.
Once the polyline appears correctly on the map, click “Update/Display polyline coordinates” to save the changes.
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.
Edit your map and open the “Progress Map Settings” widget.
Navigate to the “Polygons settings” menu.
Set the “Draw Polygon option” field to “Yes”.
Step 2: Add and Configure Polygons
Scroll to the “Polygons” section. Click on the group field “Polygon 1” or “Add new polygon” for additional polygons.
In the “Polygon Label” field, enter the polygon’s name or title.
Enter a unique identifier in the “Polygon ID/Name” field. Each polygon must have a unique ID/Name.
Specify the “Polygon points type” and draw your polygon using one of the following methods:
Method 1: Using Post IDs
Select “Post IDs” in the “Polygon points type” field.
In the “Polygon Paths (Post IDs)” field, select at least three posts to form the polygon.
Method 2: Using Coordinates
Select “Lat,Lng” in the “Polygon points type” field.
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]
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
Select “Lat,Lng” in the “Polygon points type” field.
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
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.
Customize the polygon’s style in the “Polygon style” group field:
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:
After adding your polygons, save the map settings.
Revisit the map settings and review each polygon by opening the “Polygon path” widget to confirm their placement on the map.
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.
Once the polygon appears correctly on the map, click “Update/Display polygon coordinates” to save the changes.
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.
