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.
Thousands of points
Thousands of places on one map
Every café, bar, and restaurant in Austin, 3,252 places, loaded from one GeoJSON file.
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
<helix-map-marker>Clusters
<helix-map cluster>Routes and areas
<helix-map-route><helix-map-area>A live position
<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.
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
<helix-map-buildings>Terrain
<helix-map-terrain>Contour lines
<helix-map-contours>Land cover
<helix-map-landcover>Satellite imagery
<helix-map-raster ground>Weather radar
<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.
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
mapLibreStyle(colors)Highway signs
mapLibreStyle(colors)Your typeface
mapLibreStyle(colors, { font })A globe
mapLibreStyle(colors)A compass and a 3D button
controls="compass tilt"A layers menu
controls="layers"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.
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. Building Rendering
The renderer
Draws the map. Use MapLibre, Leaflet, or a driver you write for another renderer. MapLibre or Leaflet Theme
The style
A MapLibre style made from your theme, with your brand color on the main roads and light and dark versions from the same settings. It draws landmarks, highway signs, and labels in your theme’s typeface. Building Data
Tiles
Map tiles we will build from OpenStreetMap and serve with no API key or per-view cost. Until then, maps use OpenFreeMap tiles, which use the same format. Declared