Maps · Fusion

Helix

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

OpenFreeMap © OpenMapTiles Data from OpenStreetMap

Customize the map

Brand

Site

Light

Dark

Walking

Paused

Why Helix

Themed maps, written in HTML

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.

Thousands of points

Austin’s cafés, bars, and restaurants

3,252 places, loaded from one GeoJSON file.

<helix-map label="Food and drink in Austin"> <div id="map"></div> <helix-map-points label="Food and drink" src="/maps/austin-food-and-drink.geojson" cluster ></helix-map-points> </helix-map>

Get started

Install with one command

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

Six parts, from elements to tiles

MapLibre or Leaflet draws the map itself.

Elements
Layers
Markers, routes, areas, live positions, and data layers, written as HTML elements inside the map.Active
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.Active
Rendering
The renderer
Draws the map. Use MapLibre, Leaflet, or a driver you write for another renderer.MapLibre or Leaflet

What you can add

All HTML elements

Place markers, routes, and live positions 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

One menu for every layer

Terrain, buildings, imagery, and weather are each an HTML element you place inside the map.

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" max-zoom="10" 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"

Docs

Tools

Docs

Tools

Themed maps, written in HTML

Austin’s cafés, bars, and restaurants

Install with one command

Six parts, from elements to tiles

All HTML elements

Yosemite Valley in 3D

One menu for every layer

Rain across the United States

Landmarks, highway signs, and your typeface