Icon map

Interactive icon map, suitable for small datasets. Use icons, images or emoji for your markers

Updated 4 months ago by Flourish team

How to use this template

How to use this template

Icon map templates

Allows you to quickly map a symbol map featuring icons from FontAwesome. The template creates a key which doubles as a filter so end users can click different categories of icons on or off.

Data requirements

All you need is a spreadsheet with a row for each item that you want to put on the map and columns for lat and long. To specify particular icons, first specify a category column in your main spreadsheet and then you can add styles for each category in the second sheet, as shown with the sample data.

You can optionally also specify additional columns in order to size the icons, show a title, description, image and other any other information in the popup.

Icon codes

When configuring an icon in the Icons data sheet, the easiest option is just to type in an emoji. However, you can also use any icon in FontAwesome 4. For a full list and search, see the FontAwesome site. You can use the full name (e.g. “fa-user”) or miss off the “fa” (e.g. “user”). The template also supports d3 symbols using this format: “d3-star”, “d3-cross”, etc.

Tips

  • The icons are drawn in the order of the spreadsheet, so sort your sheet to control the stacking order
  • When configuring an icon you can change the colour, opacity, outline colour
  • You can choose a different background map by pointing to a different map tile set (e.g. one of these)
  • The “Link” column setting lets you hyperlink from the markers to any webpage, but note that this will only work when published or previewing, not in the editor

Credits

This template uses Leaflet with – by default – basemap tiles created by Stamen Design.