The map container. Everything else in HoloMap goes inside one.

<HoloMap.Map cid="explorer" style={@style_url} center={{-70.66, 19.45}} zoom={11}>
  <HoloMap.Source.GeoJSON id="parcels" data={@parcels} />
  <HoloMap.Layer.Fill id="parcels-fill" source="parcels" paint={%{fill_color: "#3b82f6"}} />
</HoloMap.Map>

The cid is the map's identity

cid is Hologram's component id, and HoloMap uses it as the map's name throughout: the DOM container is hm--<cid>, the browser registry is keyed by it, and it is the first argument to every HoloMap.API function. One identifier, no second id prop to keep in sync.

A cid is mandatory. Hologram only runs init/3, and therefore only allows actions, on stateful components, and the map needs an action to boot.

Sizing

A map with no height renders as a zero-pixel box, which is the single most common way to end up staring at a blank page. height defaults to "400px" for that reason. Pass class instead when the size comes from your own CSS, and set height={nil} to opt out of the inline style entirely.

The worker URL

MapLibre parses tiles in a Web Worker that it builds by importing maplibre-gl-worker.mjs, resolved relative to its own module URL. Hologram bundles MapLibre into a page bundle under /hologram/, so that resolution lands on a file which is not there, and the failure happens inside a worker, where nothing reports it. The symptom is a map that renders its background, logs nothing, and never draws a single tile.

HoloMap sets the URL explicitly to avoid that. The default assumes the application serves maplibre-gl-worker.mjs and maplibre-gl-shared.mjs from /assets/; the Installation guide has the copy step, and worker_url overrides the path if they live elsewhere.

Declarative camera versus animated camera

center, zoom, bearing and pitch are state. Changing one jumps the camera there, and panning the map by hand does not write back into them: the props describe where the application thinks the camera should be, not where the user dragged it. Nothing re-renders while the user interacts, so there is no fight between the two.

When a camera move is an event rather than a value, such as flying to a search result, use HoloMap.API.fly_to/2 and leave the props alone.

Props

Event props

on_load, on_click, on_dbl_click, on_context_menu, on_mouse_move, on_move_start, on_move_end, on_zoom_end, on_rotate_end, on_pitch_end, on_idle, on_error.

Events

Handlers receive a payload with center, zoom, bearing, pitch and bounds, plus lng_lat and point for pointer events:

def action(:map_moved, params, component) do
  put_state(component, :bounds, params.bounds)
end

See HoloMap.Event for the handler syntax and the Events guide for the full payload reference.