Horizon -- Sky's the Limit

horizon.tech

Building a dynamic, multi-layer interactive map

In this tutorial we'll show you how to build maps that alter their information, format, color and data based on where a user zooms and pans.

Step 1: Create a space map with data in tables of varying granularity

You might be graphing distinct jurisdictions for an area, for example national (federal), state, and county districts. You might want to only show the data regarding a certain state when that state is within the bounding box, and more.

Or you're looking to provide a guided description of events requiring distinct data at distinct stages of your narrative.

Either way the first step is to get all of the relevant information onto your space and organized within tables.

Step 2: For each distinct step, create a new variation

Remember that variations are distinct copies of styles, ranging from whether table data is visible or invisible, whether distinct table fields are used to color objects by distinct value, what the zoom and pan of the camera is at any given moment, and more. You will want to include all variations that are relevant for your project in this step.

Step 3: Create UI informational elements you want to associate with a specific location and variation

In your spaces' contents you will want to add multiple sites to represent distinct pieces of information that you want to render based on location. These will be set along with user actions, whenever triggered by user actions.

Step 4: Set and Register User Actions (zoom, bounding box)

State changes are primarily what will prompt the shift in the data view.

Step 5: Create event handlers with a plugin to link user action to variation and UI display

Whether you're showing or hiding table data, switching between visualizations, displaying wiki-like information on zoom or on click, or otherwise altering your users' space experience, ultimately you are linking the user-driven 'hook' event to a corresponding change in your application's state.

You can even let authorized users create additional points or notes on the map, saving their state at the time of a button click and ensuring that the point will be associated with the appropriate representation.