MaplibreX - MapLibre GL JS as Phoenix LiveView components

yendrisrogelio

Hi all,

I’ve just released the first version of MaplibreX, which exposes MapLibre GL JS as declarative LiveView components. The map follows your assigns, and map interactions come back as ordinary handle_event/3 callbacks.

A few things that might be of interest:

32 components — layers, sources, controls, markers, popups, 3D terrain,
deck.gl, and custom WebGL layers with your own GLSL shaders.
Map commands are Phoenix.LiveView.JS structs. fly_to, fit_bounds
and friends run entirely on the client, no server round-trip.
maplibre-gl is a peer dependency, not bundled. The published bundle is
65 KB (12 KB gzipped), and an app that already uses MapLibre never ends up
with two copies of it on the page.
deck.gl is imported dynamically on first use, so pages without it pay
nothing for the ~600 KB.
map:moved is debounced client-side, so panning doesn’t flood the socket.

Requires Elixir 1.15+ and LiveView 1.0+ (tested through 1.2).

Known limitation in 0.1.0: <.deckgl_layer> needs maplibre-gl v5.
@deck.gl/mapbox still reads the internal map.transform that v6 removed, and no published version has stopped — including the 9.4 alphas. Every other component works on both majors, and the library raises a message naming the constraint instead of failing somewhere inside deck.gl.

Hex: maplibrex | Hex
Docs: MaplibreX v0.1.0 — Documentation
Demo app, nine pages each a single LiveView:
GitHub - CountlinkX-Solutions/maplibrex_demo · GitHub
Source:

It’s a 0.1.0 and the component API will likely move as people actually use
it, so feedback is very welcome — particularly on the shape of the API.

6 comments

#liveview #project #maplibre

9 841 6

2026-09-13 04:33:46 UTC

Showing Posts 1 to 6

Show Best Posts
Show All (oldest first)
Show All (newest first)

alvinkatojr

Once again, the members of this community have blown me away. You guys are on a rampage!

Great project, @yendrisrogelio! Mapping is something that has been neglected or under the radar, so this is very much needed. I can’t wait to dive into the source and put this to good use!

Thanks for the good work!

Post #1

yendrisrogelio

Thanks, @alvinkatojr! Really appreciate the kind words.

Definitely let me know how it goes once you test it out or if you run into any rough edges. Feedback and PRs/issues are more than welcome!

Post #2

alvinkatojr

Will definitely do so. Thanks again!

Post #3

tmbb

I love the idea of using MapLibre from inside of Elixir with minimal JS, but I have some questions:

Is there support for running a flyTo animation when the map loads to get a “Google Earth” like initial rotation effect?
Because loading the initial tiling takes a while, is it possible to cover the map with a div that works like a “curtain” and lift it (i.e. fade it out) on the “idle” event?
Does this support completely custom tylesets, or just the whitelist of styles defined in the docs?
Is it easto to overlay, say layers of type :text and of type :fill to create a box with text?

Thanks for what seems to be a very interesting library!

Post #4

tmbb

To answer my own questions

Is there support for running a flyTo animation when the map loads to get a “Google Earth” like initial rotation effect?

No, and I’ve done a PR to implement it, but I’ve bundled that with some somwhat questionable choices to minimize UI glitches, and I understand some people may prefer the old glitches to my own approach.

Because loading the initial tiling takes a while, is it possible to cover the map with a div that works like a “curtain” and lift it (i.e. fade it out) on the “idle” event?

It is possible and I have done so on my PR… But I’m not sure everyone will agree it is an improvement.

Does this support completely custom tylesets, or just the whitelist of styles defined in the docs?

Apparently yes?

@yendrisrogelio I’d love your feedback on this.

Post #5

yendrisrogelio

Hi @tmbb,

Thanks for trying it out and especially for taking the time to open a PR!

I will review your PR in detail to see how you approached both, and we can discuss the trade-offs there to find the most idiomatic API shape!

3. Custom tilesets & styles: Yes, absolutely! There is no hardcoded whitelist. Any valid MapLibre style JSON URL, inline style object, or custom Vector Tile source is supported. In fact, one of our main internal benchmarks and use cases is integrating MaplibreX directly with TileserveX, our own high-performance vector tile and OGC API server (built with Elixir and Rust NIFs). You can point sources directly to any standard TileJSON, XYZ, or OGC API endpoints.

Post #6

— All posts loaded —