Show the number of posts available on the map


To show the number of posts/locations available on the map, do the following:

  1. Edit a map
  2. Open the widget “Progress Map Settings”.
  3. Click on the menu “Posts count settings”.
  4. Select the option “Yes” in the field “Show posts count”.
  5. In the field “Posts count label”, modify the text that identifies your posts/locations. For example, if you’re displaying “fishing spots” in your map, change the text [posts_count] Posts to [posts_count] Fishing spots.
  6. To change the color of the text, modify the color in the field “Label color”.

Changing the carousel items size


To change (increase or decrease) the carousel items size, do the following:

  1. Edit a map
  2. Open the widget “Progress Map Settings”.
  3. Click on the menu “Carousel items settings”.

Horizontal view

  1. Enter the size of the horizontal items in the field “Items size (Horizontal view)”. You must provide the width (in pixels) followed by the height (in pixels) like this example: (600,200). (600 = width | 200 = height)!
  2. Enter the image size in the field “Image size (Horizontal view)”. You must provide the width (in pixels) followed by the height (in pixels) like this example: (200,200). (200 = width | 200 = height)!
  3. Enter the size of the description area in the field “Description area size (Horizontal view)”. You must provide the width (in pixels) followed by the height (in pixels) like this example: (400,200). (400 = width | 200 = height)!

Note that the image width + the width of the description area must be equal to the items width (200 + 400 = 600)! The height of the image and the description area must be the same as the items height (200)!

vertical view

  1. Enter the size of the vertical items in the field “Items size (Vertical view)”. You must provide the width (in pixels) followed by the height (in pixels) like this example: (300,500). (300 = width | 500 = height)!
  2. Enter the image size in the field “Image size (Vertical view)”. You must provide the width (in pixels) followed by the height (in pixels) like this example: (300,200). (300 = width | 200 = height)!
  3. Enter the size of the description area in the field “Description area size (Vertical view)”. You must provide the width (in pixels) followed by the height (in pixels) like this example: (300,300). (300 = width | 300 = height)!

Note that the image width and the width of the description area must be the same as the items width (300)! The height of the image + the height of the description area must be equal to the items height (200 + 300 = 500)!

Customize the carousel arrows background and/or images


To customize the carousel arrows background and/or images, do the following:

  1. Edit a map
  2. Open the widget “Progress Map Settings”.
  3. Click on the menu “Carousel style”.
  4. To change the background color of the arrows, change the color in the field “Arrows background color”. This will affect all arrows in both horizontal and vertical carousels!
  5. To change the image of the left arrow in the horizontal carousel, upload your custom image in the field “Horizontal left arrow image”.
  6. To change the image of the right arrow in the horizontal carousel, upload your custom image in the field “Horizontal right arrow image”.
  7. To change the image of the top arrow in the vertical carousel, upload your custom image in the field “Vertical top arrow image”.
  8. To change the image of the bottom arrow in the vertical carousel, upload your custom image in the field “Vertical bottom arrow image”.

Customize markers icons by categories


The plugin provides the possibility to customize the markers based on their categories. To customize your markers, do the following:

  1. Edit a map
  2. Open the widget “Progress Map Settings”.
  3. Click on the menu “Markers categories settings”.
  4. Select the option “Yes” in the field “Markers categories option” to enable this feature on your map.
  5. In the field “Taxonomies”, select the taxonomy/category that you want to use to indentify your markers.
  6. Scroll down to the section “Markers categories images” and click on the group field “Marker image 1”.
  7. Choose a category term in the select list “Categories”. Note that it’s not required to find the name “Categories”. In your case, this name will be the name of the taxonomy/category you’ve already selected in the above field “Taxonomies”!
  8. Upload your custom marker image in the field “Marker image”.
  9. To add a new custom image for a new marker, click on the button “Add new marker image” and repeat the steps 7 & 8.

If a post is assigned to multiple categories/terms, the plugin will call the marker image of the first term in the list of your taxonomy terms page (e.g. “Posts => Categories”)! In case the first term in this list doesn’t have a marker image, the plugin will use the default marker image instead! You may need to use the plugin “Custom Taxonomy Order” (or similar) to change your terms order. You also need to regenerate your markers # each time you change the terms order!

 

Customizing the map using your custom style


The plugin provides a list of custom styles to use with your map, however, if you don’t like any of them, you can use your personal style.

To add your personal style, do the following;

  1. Edit a map
  2. Open the widget “Progress Map Settings”.
  3. Click on the menu “Map settings”.
  4. Select the option “Custom style” in the field “Initial style”.
  5. Click on the menu “Map style settings”.
  6. Select the option  in the field “Style option”.
  7. Enter the name of your personal style in the field “Custom style name”. This name will be displayed in the Map type control.
  8. Visit Google Maps style editor and create your custom style. With this tool, you can change the map colors, hide roads, hide specific Points of interest and more. Skip this step if you already have a style!
  9. Paste the JSON of your personal style in the field “Javascript style array”.

You can find a bunch of cool styles here on Snazzy Maps. If you like a style, open it and use its code.

Customizing the map style


To customize the map with one of the available custom styles in the plugin, do the following;

  1. Edit a map
  2. Open the widget “Progress Map Settings”.
  3. Click on the menu “Map settings”.
  4. Select the option “Custom style” in the field “Initial style”.
  5. Click on the menu “Map style settings”.
  6. Select the option “Progress Map styles” in the field “Style option”.
  7. Select one of the available styles in the field “Map style”.

Change the zoom controls icons


To change the zoom controls icons, do the following;

  1. Edit a map
  2. Open the widget “Progress Map Settings”.
  3. Click on the menu “Customize”.
  4. To edit the zoom in icon, upload your custom icon in the field “Zoom-in image”.
  5. To edit the zoom out icon, upload your custom icon in the field “Zoom-out image”.