Use Font Icon as Marker

The maps are generated using the Google Geochart API, which unfortunately don’t allow us to use custom images instead of the default round markers. However, with some CSS hacks we can use the Text Labels display mode and use a font family like ‘Font Awesome’ that provide vector icons as a font.

The plugin includes some options to make this ‘hack’ easier (available from version 1.7.3 released in January 2016).

We are limited to the icons provided by the font toolkit, but there are hundreds to choose from. You can also control the size and colour of the markers. Below are some simple instructions on how to achieve this.

Icons Marker Placeholder
Icons Marker

Instructions

  1. Enable the responsive mode in the plugin settings page, so the ‘custom css generator’ is available when you edit a map;
  2. Create/Edit your map and choose the ‘Text Labels’ display mode. Preferably with the coordinates mode.
  3. Below the map preview, you’ll find the ‘Custom CSS Generator’ options. You should enable the options:
    1) FontIcon Usage > Include FontAwesome
    2) FontIcon Usage > Apply FontAwesome
    3) Tooltip Options > Hide Tooltip Title
  4. You can now visit the fontawesome cheatsheet page to copy the icon you want to use (the icon image itself) and paste it into the ‘Title’ option of your entries. You can choose different colours for each icon entry.
  5. You can control the icon size with the option Visual Settings > Custom > Marker Size
  6. Save your map and apply the shortcode where you want the map to display.

Administration Screenshots

Administration Screenshot

Interactive Regions screenshot. Note that the icons are placed in the ‘Title’ column. You should copy them directly from the Font Awesome page.

 

Options that need to be enabled in the Custom CSS Generator

Options that need to be enabled in the Custom CSS Generator