Maps · Fusion

Helix. The DNA

DocsInstall Helix, build a theme, and learn how it works.ComponentsEvery component, with its API and a live example.SandboxEdit an example and see the result beside the code.Theme builderBuild a palette from your brand color and check its contrast.MapsBuildingInteractive maps in your brand’s colors.

Cortex. The mind

DocsWhat a system knows, and how far to trust it.

EngramBuildingMemory: what a system keeps, and for how long.

TraceBuildingProvenance: where each fact came from.

RecallDeclaredContext: what to give a model, and why.

Services Insights

Helix

Components

Cortex

Sandbox

Theme builder

Aura

Services

Contact

Insights

Thesis

↑

↓Move↵GoSandboxEscClose

Fusion

Preferences

System

Light

Dark

Headless

Styled

HelixOverview

Docs

Components

Sandbox

Theme builder

MapsBuilding

CortexDocs

EngramBuilding

TraceBuilding

RecallDeclared

Services

Insights

Get in touch

Source on GitHub

Helix

Building

Interactive maps in your brand’s colors

Add places, routes, and live positions to a map drawn by MapLibre or Leaflet, styled with your theme.

Get started Build your theme

Customize the map

Brand

Site

Light

Dark

Walking

Paused

Why Helix

What Helix adds to a map

Your brand

Styled with your theme.

Light and dark maps from the same theme.
Your brand color on the main roads.
Labels, landmarks, and highway signs in your theme’s typeface.
Labels that meet your contrast target.
Map movement that uses your theme’s motion settings.

HTML elements

Places and routes written as HTML.

Add markers, routes, areas, and live positions as elements inside the map.
Set their colors with the same tones as other Helix components.
Add terrain, 3D buildings, satellite imagery, and weather radar the same way.
Change an attribute and the map updates.

Your renderer

Works with MapLibre or Leaflet.

Use the renderer and version you already have.
Connect another renderer by writing a small driver.
Map tiles from OpenStreetMap, with no API key.

Get started

Add a map to your site

Install Helix, the map connector, and MapLibre. The Maps guide shows how to add a map, connect it, and style it with your theme.

bun add @fusion.dev/helix @fusion.dev/helix-map maplibre-gl

Read the Maps guide

Under the hood

How it is built

The parts of Helix Maps, from the elements you write to the map data. MapLibre or Leaflet draws the map itself.

Elements
Layers
Markers, routes, areas, live positions, and data layers, written as HTML elements inside the map.Building
Interface
The frame
The box around the map, with a column of controls, keyboard controls, and a footer for the map credit. The controls are zoom buttons, a compass, a 3D button, and a layers menu.Active
Integration
The connector
Connects the frame to the renderer. It turns the frame’s buttons and keys into map movement, draws the layers you add, and moves the renderer’s credit into the frame.

What you can add

Markers, routes, and live positions

Each is an HTML element you place inside the map. Each takes a tone, such as primary or danger, for its color.

Markers

Named places on the map. A marker can hold a letter or an icon, take a shape such as a ring or a pin, and be marked as passed once someone has visited it.

<helix-map-marker>

Clusters

Markers that would overlap combine into one count, which splits apart as you zoom in. Places at the same address spread out when you press their count.

<helix-map cluster>

Routes and areas

Lines and shapes drawn under the map’s place names. A route can show how much of it has been traveled, and dotted sections for the walk to a place off the road.

<helix-map-route><helix-map-area>

A live position

A moving point or arrow, with a ring that shows how accurate its location is. Update its description, such as “Two stops away”, and screen readers announce it.

<helix-map-position>

Terrain

Yosemite Valley in 3D

Terrain raises Yosemite Valley to its real height, contour lines trace its heights in feet, and land cover colors its forests and bare rock. Open the layers menu to switch to satellite imagery.

<helix-map controls="zoom compass tilt layers fullscreen" > <div id="map"></div> <helix-map-landcover></helix-map-landcover> <helix-map-terrain src="https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png" raised ></helix-map-terrain> <helix-map-contours src="https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png" unit="feet" ></helix-map-contours> </helix-map>

Press 3D to lay the valley flat. Open the layers menu for satellite imagery.

Layers

Terrain, buildings, imagery, and weather

Each is an HTML element you place inside the map. Open the layers menu to turn each one on or off.

3D buildings

Buildings raised to their real heights, from the map’s own tiles. Press the 3D button to tilt the map and see them, and press it again to lay them flat.

<helix-map-buildings>

Terrain

Hills and valleys shaded by their slopes. Add the raised attribute and the ground rises to its real height when you tilt the map.

<helix-map-terrain>

Contour lines

Lines of equal height, closer together as you zoom in. Every fifth line is heavier and labeled with its height, in meters or feet.

<helix-map-contours>

Land cover

The ground colored by what covers it, such as forest, farmland, sand, and ice. Each color is mixed into your theme’s land color.

<helix-map-landcover>

Satellite imagery

Aerial photographs of the ground. The layers menu shows Standard, Hybrid, and Satellite as cards, each with a picture of the map.

<helix-map-raster ground>

Weather radar

Tiles laid over the map, such as weather radar, under your routes and place names. Give the layer several frames, such as the last hour of radar, and it plays them in order.

<helix-map-raster frames>

Weather radar

Rain across the United States

Rain and storms across the United States over the last 50 minutes, in 10-minute steps, laid over a map in your theme. Press Play radar to watch the rain move.

<helix-map label="Weather radar over the United States" > <div id="map"></div> <helix-map-raster label="Weather radar" attribution="NWS radar from the Iowa Environmental Mesonet" frames=" /maps/radar/50/{z}/{x}/{y}.png /maps/radar/40/{z}/{x}/{y}.png /maps/radar/30/{z}/{x}/{y}.png /maps/radar/20/{z}/{x}/{y}.png /maps/radar/10/{z}/{x}/{y}.png /maps/radar/0/{z}/{x}/{y}.png " ></helix-map-raster> </helix-map>

The radar is the National Weather Service’s, from the Iowa Environmental Mesonet. We clean and recolor its tiles for this site. On your page, set the frames attribute to your own tile server or to the Mesonet’s tiles.

Play radar

On every map

Landmarks, highway signs, and your typeface

The style Helix makes from your theme draws landmarks, highway signs, and a globe on every map. An option on the style or the frame adds each of the rest.

Landmarks

Parks, museums, schools, hotels, hospitals, and stations, each marked with an icon in a color for its kind. Cafés and shops appear as you zoom in to a street.

mapLibreStyle(colors)

Highway signs

Interstate, US route, and state route numbers on signs drawn from the official shapes, placed along the road.

mapLibreStyle(colors)

Your typeface

Place names, road names, and sign numbers in the typeface your theme uses. MapLibre draws the letters from the font your page has already loaded.

mapLibreStyle(colors, { font })

A globe

Zoom out and the world is drawn as a globe. It turns into the flat map as you zoom in. Pass globe: false for a flat map at every zoom.

mapLibreStyle(colors)

A compass and a 3D button

The compass needle points north as the map turns, and pressing it turns the map back to north. The 3D button tilts the map and raises its buildings and terrain.

controls="compass tilt"

A layers menu

One button opens a menu with a tile for each layer you add. Press a tile to turn its layer on or off. A route and its dotted legs share one tile.

controls="layers"

Helix. The DNA

Cortex. The mind

Helix. The DNA

Cortex. The mind

What Helix adds to a map

Add a map to your site

How it is built

Thousands of places on one map

Markers, routes, and live positions

Yosemite Valley in 3D

Terrain, buildings, imagery, and weather

Rain across the United States

Landmarks, highway signs, and your typeface