Section: Overlays

Render images on the map

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:

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

Step 2:

  1. 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).
  2. Identify your image by giving it a name/label in the field “Image Label”.
  3. 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:
        1. Upload your image or paste its URL in the field “Image URL”.
        2. 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.
        3. 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!
  4. Open the group field “Image options”.
  5. Select the image opacity in the field “Image opacity”.
  6. 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.
  7. 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”.
  8. If you don’t like the button icons, you can change them from the fields “Show buttom icon” and “Hide buttom icon”.
  9. To add a new image overlay, click on the button “Add new image”, then, repeat the steps above.

Make a polygon clickable

Making a polygon 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 polygon clickable, do the following:

  1. Edit a map
  2. Open the widget “Progress Map Settings”.
  3. Click on the menu “Polygons settings”.
  4. Edit your polygon by clicking on it related group field.
  5. Select the option “Yes” in the field “Clickable”.
  6. To open a link when the user clicks on the polygon. Paste your polygon link in the field “Polygon redirect URL”, then, choose how to open the link in the field “URL target”.
  7. Enter the polygon description in the field “Polygon description”. The description will be displayed inside an infobox when the user hover over the polygon.
  8. Enter the maximum width (in pixels) of the infobox that will contain the polygon description in the field “Infowindow Maximum width”.

Make a polyline clickable

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:

  1. Edit a map
  2. Open the widget “Progress Map Settings”.
  3. Click on the menu “Polylines settings”.
  4. Edit your polylone by clicking on it related group field.
  5. Select the option “Yes” in the field “Clickable”.
  6. 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”.
  7. Enter the polyline description in the field “Polyline description”. The description will be displayed inside an infobox when the user hover over the polyline.
  8. Enter the maximum width (in pixels) of the infobox that will contain the polyline description in the field “Infowindow Maximum width”.

Draw polylines on the map

To draw polylines 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 polyline).
  2. Enter your polyline name/title in the field “Polyline Label”.
  3. Enter the unique name/key/ID of your polyline in the field “Polyline ID/Name”. Do not use the same name/key/ID for multiple polylines on the same map!
  4. Specify the polyline points type in the field “Polyline points type”, then, draw your polyline using one of these methods:
    • 1st Method: Draw a polyline 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 polyline. You should add at least 2 posts!
    • 2nd Method: Draw a polyline 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 polyline 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 polyline 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 polyline. Since version 5.2, a new feature has been added allowing you to easly draw your polylines. 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 Polyline handles mouse events or not by choosing an option in the field “Clickable”.
    2. If your polyline is clickable, you may want to open a link when the user clicks on it. Paste your polyline link in the field “Polyline redirect URL”, then, choose how to open the link in the field “URL target”.
    3. Enter the polyline description in the field “Polyline description”. The description will be displayed inside an infobox when the user hover over the polyline. For this to appear, your polyline must be clickable!
    4. Enter the maximum width (in pixels) of the infobox that will contain the polyline description in the field “Infowindow Maximum width”.
    5. Choose whether your polyline should follow the curvator of the earth or not by selecting an option in the field “Geodesic”.
    6. Enter the z-index of your polyline in the field “z-index”.
    7. Hide and/or show your polyline on the map by choosing an option in the field “Visibility”.
  6. To customize your polyline 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 polyline stroke type. You can draw linear polylines or dashed polylines!
  7. To add a new polyline, click on the button “Add new polyline”, then, repeat the steps above.

Draw polygons (shapes) on the map

To draw polygons on your map, do the following:

Step 1:

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

Step 2:

  1. Scroll down to the section “Polygons”, then, click on the group field “Polygon 1” (or click on the button “Add new polygon” if this is not your first polygon).
  2. Enter your polygon name/title in the field “Polygon Label”.
  3. Enter the unique name/key/ID of your polygon in the field “Polygon ID/Name”. Do not use the same name/key/ID for multiple polygons on the same map!
  4. Specify the polygon points type in the field “Polygon points type”, then, draw your polygon using one of these methods:
    • 1st Method: Draw a polygon by connecting multiple posts already available on the map:
        1. In this field, select the option “Post IDs”.
        2. In the field “Polygon Paths (Post IDs)”, select the posts that will be used/connected to form your polygon. You should add at least 3 posts!
    • 2nd Method: Draw a polygon by providing the “lat,lng” coordinates:
        1. In this field, select the option “Lat,Lng”.
        2. Open the group field “Polygon Paths [Lat,Lng]” and enter or paste the polygon coordinates in the field/textarea “Polygon 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 polygon in the plugin settings:
        1. In this field, select the option “Lat,Lng”.
        2. Open the group field “Polygon Paths [Lat,Lng]” and draw your polygon. Since version 5.2, a new feature has been added allowing you to easly draw your polygons. 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 “Polygon options”.
    1. Choose whether this polygon handles mouse events or not by choosing an option in the field “Clickable”.
    2. If your polygon is clickable, you may want to open a link when the user clicks on it. Paste your polygon link in the field “Polygon redirect URL”, then, choose how to open the link in the field “URL target”.
    3. Enter the polygon description in the field “Polygon description”. The description will be displayed inside an infobox when the user hover over the polygon. For this to appear, your polygon must be clickable!
    4. Enter the maximum width (in pixels) of the infobox that will contain the polygon description in the field “Infowindow Maximum width”.
    5. Choose whether your polygon should follow the curvator of the earth or not by selecting an option in the field “Geodesic”.
    6. Enter the z-index of your polygon in the field “z-index”.
    7. Hide and/or show your polygon on the map by choosing an option in the field “Visibility”.
  6. To customize your polygon style, open the group field “Polygon style”.
    1. Modify the colors and values in the fields “Fill color”, “Fill opacity” and “Stroke color”, “Stroke opacity”, “Stroke weight” and “Stroke Position”.
    2. In the field “Stroke type”, choose the polygon stroke type. You can draw linear polygons or dashed polygons!
    3. Customize the polygon style on hover/mouse enter #.
  7. To add a new polygon, click on the button “Add new polygon”, then, repeat the steps above.