How to plot lines on a map and bring them to life with animation
Visualize everything from railway lines to disputed borders with the new line layer in our 3D Map template
Looking to visualize your favorite jogging route, transportation network or disputed border? Look no further! Our high-performance 3D Map template just got updated with a new line layer feature that lets you visualize any GeoJSON-based line data and bring it to life with beautiful animations. See it in action in the example below:
Similar to regions, your lines can be supplied in GeoJSON format and will be drawn on top of your map.
You might want to use the line layer to indicate disputed borders in a map where you’re also displaying regions and points. With the line layer, you can upload borders and customize how they are styled – for example to match your house style guide. In the example below, we visualized disputed borders (as defined by the World Bank) with a short dash-line type.
But lines can also be the most important part of your map, visualizing anything from railway lines to rivers. Adding your map to a Flourish story allows you to combine different views and animate between them, creating an impressive pan-and-zoom showpiece to easily embed on any website – you can even set it to autoplay!
In addition to lines, our 3D Map template also supports animated points, heatmaps and regions, so you can combine different layers to draw attention to different aspects of your data. In the example below, we combined lines with shaded regions to visually correlate train coverage.
To get started
- Select our Lines starting point.
- To upload a line layer to your map, go to the Data tab and navigate to the Lines sheet.
- Use the Upload data button to upload your GeoJSON lines file and match up your data with the Geometry and Series column bindings.
- Under Lines in the settings panel, you’ll find options to customize the color, width, opacity, and line-dash style of your lines.
- You can use the Default settings to set a single style for all of your lines, or use the overrides boxes beside these settings to style lines differently based on the Series column in your data.
- Optionally add your visualization to a Flourish story to animate between different views.
- Publish and embed to generate a script or iframe embed code.
Unlike regions and points, lines are passive features, meaning that you can’t interact with them or supply information in popups. If you’d like to add information on hover or click, we recommend adding points via the Points sheet to the beginning and ending of your line.
Learn more about the different settings in our help doc.
Looking for line data?
We’ve updated all of our starting points to include disputed borders line data as defined by the World Bank. If you’d like to add additional lines but don’t know how to find lines data, we recommend doing a quick Google search for the geographical features you are looking for. Searching for something like “US train lines GeoJSON”, for example, should get you off to a good start. You can also bring your own lines data that you collected using apps like Strava or AllTrails into Flourish by transforming the exported KML or GPX file into GeoJSON using free tools like Mapshaper. Learn more about this in our help doc.
Happy line mapping!
Whether it’s lines, 3D-extruded regions, animated points or density heatmaps, our 3D Map template is a true Swiss army knife for all your geographic visualization needs. To learn more about this template, watch our webinar – and make sure to share your creations on social media using the hashtag #madewithflourish!