Section: Customizing

---

To change the default clusters color, do the following:

1. Visit the link https://www.flaticon.com/free-icon/circle_319873
2. Click on the button “SVG” and choose the clusters color.
3. Click on the button “Download” to download your SVG custom icon.
4. Go back to your website dashboard and edit your map.
5. Edit your map, click on the menu “Marker Clustering Settings” and upload your custom icon in the fields “Large cluster image”, “Medium cluster image” and “Small cluster image”.

---

---

To change the default marker color, do the following:

1. Visit the link https://www.flaticon.com/free-icon/location-pin_106162
2. Click on the button “SVG” and choose the marker color.
3. Click on the button “Download” to download your SVG custom icon.
4. Go back to your website dashboard and edit your map.
5. Upload your custom icon in the field “Marker Settings => Marker image”.

---

If you change the main colors of the plugin, you may need to change the (search form) slider color too. To change the slider color, do the following:

1. Open the plugin’s folder in your desktop.
2. Open the image under “codespacing-progress-map/assets/img/rangeSlider/sprite-skin-flat.png” in Photoshop or similar.
3. Change/edit the image colors and save it in your desktop.
4. In your website, upload your image to your media library (Media => Add new).
5. Add the following PHP code in the file “functions.php” of your theme/child theme:

   function cspm_range_slider_img(){
      return 'http://mysite.com/wp-content/uploads/2018/06/sprite-skin-flat.png';
   }
   add_filter('cspm_range_slider_img', 'cspm_range_slider_img');

6. Go back to your media library, open your slider image and copy the image link (the link can be found in the field “URL”).
7. Go back to your “functions.php” file and change “http://mysite.com/wp-content/uploads/2018/06/sprite-skin-flat.png” with your image URL.

---

The plugin provides the possibility to easly change the main colors from the settings. To change the main colors of the plugin, do the followings:

1. Click on the menu “Progress Map”
2. Click on the menu “Customize”
3. Change the colors in the fields “Main color” and “Hover color”
4. Save your settings.

---

To customize the map using your custom CSS code, do the following:

1. Edit a map
2. Open the widget “Progress Map Settings”.
3. Click on the menu “Customize”.
4. Add your custom CSS in the field “Custom CSS code”.

---

To change the display order of the left buttons displayed vertically on the map (Recenter map button, heatmap button, Geotarget button, etc …), do the following:

1. Edit a map
2. Open the widget “Progress Map Settings”.
3. Click on the menu “Customize”.
4. In the field “Map vertical elements display order”, drag an element to the position where you want it to appear.

---

To change the display order of the top buttons displayed horizontally on the map (Map search, Filter, Countries list, Nearby places, etc …), do the following:

1. Edit a map
2. Open the widget “Progress Map Settings”.
3. Click on the menu “Customize”.
4. In the field “Map horizontal elements display order”, drag an element to the position where you want it to appear.

---

To change the countries list button image, do the following:

1. Edit a map
2. Open the widget “Progress Map Settings”.
3. Click on the menu “Customize”.
4. Upload your custom image in the field “Countries button image”.

---

To change the image of the search button, do the following:

1. Edit a map
2. Open the widget “Progress Map Settings”.
3. Click on the menu “Customize”.
4. Upload your custom image in the field “Search form button icon”.

---

To change the faceted search button image, do the following:

1. Edit a map
2. Open the widget “Progress Map Settings”.
3. Click on the menu “Customize”.
4. In the field “Faceted search button icon”, upload your custom image.