Marker map

Uploaded by Flourish team 2 months ago (Updated a month ago)

Marker or locator map with emoji, icons or images for places and an inset map for context

What's it for?

Showing locations on an interactive map. Useful both as a "locator" map to show a few places, or as a "data" map with many markers filterable by category. Places can be marked with emoji, icons from Font Awesome or uploaded images.

How to get started

  1. At a minimum, you just need a spreadsheet of places with columns for latitude and longitude. Point to these columns and your markers will appear on the map!
category latitude longitude
Tube Station -6.081689835 145.3919983
Tube Station -5.207079887 145.7890015
Comment -5.826789856 144.2960052
  1. Next you'll need to style your markers by choosing their image/emoji/icon, colour, etc. This can be done in three ways:
    • If you want all the markers to look the same, just set the default styling in the Markers settings panel
    • If you want to specify individual styles, add columns to your data sheet for marker, size, etc and make sure these are set in the column selection area
    • Or if you want to style markers based categories in the data (see below)

How to specify markers

When entering an marker style in one of the tables or in the settings panel, you have three choices:

  1. Type or copy and paste an emoji
  2. Type in the name of a Font Awesome icon such as "house" or "dog" (you can find a full list of available icons here. You can include or miss out the "fa-" at the start fo the name.
  3. Upload an image, by clicking the image upload button or right-clicking on a spreadsheet cell. Uploaded images can be no larger than 1024×1024 pixels.

Working with categories

If your data has a category column you can style your markers at the category level. First make sure the category column is specified in the main data sheet. Then add a row in the "Categories" data sheet for each category you'd like to style. For example:

Category name Marker
Tube Station 🚇
Comment fa-comment

Customising the inset map

The inset map helps the viewer put the current map view in the context of a larger area: a country in the context of the world, say, or a city in the context of a country. By default, if enabled, the inset map shows a globe. But you can set the map to show any region you like by uploading one or more regions (in GeoJSON format) to the "Inset Map Regions" data sheet. Alternatively, if you just want one or more countries, you can copy the relevant row(s) from Regions datasheet of our Projection Map template.

Not sure how to upload your data to Flourish? See our handy guide

FAQ

I don't have lat or lng locations, only place names You'll need to geocode your data. Various online tools that can help with this. Paying customers can contact the Flourish team for more help and advice.

How do I reset the initial zoom and centre of the map? The map automatically sets its initial zoom and centre to contain all your icons. If you want to override this you have two options. First: restrict the bounds of the map (under Base Map > Viewport). Second, create a story: hit the "Create a story" button and drag the map into whatever zoom/pan state you like, and it will be automatically saved. If you don't want the navigation bar at the top, choose "None" from the "Navigation" menu.

How do I change the colour of the icons? Font Awesome icons can be given custom colours using the Colour data bindings or settings. Note that this won't work for emoji or images.

How can I tell a story with my map? If you'd like to give the audience a tour of the data and highlight different locations or regions one by one, create a Flourish story from your visualisation, then add multiple slides to highlight different places, as in the example below.

Examples

Credits

Created by the Flourish team, using open source tools including twemoji by Twitter under CC-BY 4.0.

Want to see additional features? Let us know at support@flourish.studio.

Read more