Rover - Phoenix LiveView maps powered by OpenLayers

News Announcing
, , ,
1

Rover — Interactive maps for Phoenix LiveView

Rover is a Phoenix LiveView component for interactive maps. It wraps OpenLayers — a serious GIS engine with projections, WMS/WMTS, vector layers, cadastral data, etc. — and removes the ceremony most Phoenix applications don’t need.

What it does

<.map
  id="parcels"
  center={{45.75, 4.85}}
  zoom={12}
  markers={@clients}
  shapes={@parcels}
  tiles={:ign_ortho}
/>

Assign a list of maps, get a map.

Change the list, and Rover diffs by ID and updates only what changed — no flicker, no interrupted pan, no popups unexpectedly closing and reopening.

Markers: any struct with :id, :lat, and :lon. Optional emoji, custom colors, draggable pins, and popups (HEEx slots, escaped by default).

Shapes: GeoJSON from ST_AsGeoJSON or your own data. Shapes are diffed by revision rather than hashing, so updating thousands of points stays efficient.

Clustering for hundreds of markers.
Heatmaps for density analysis.
Popups on shapes that point to the geometry rather than its centroid.
View control without losing declarative framing with Rover.fly_to/4 and Rover.fit_to/4.

Rover also has built-in support for IGN Géoportail, including French cadastral maps and aerial orthophotography.

Why not just write a hook?

You can — and the first version is short.

Then you fix reconciliation, coordinate order, viewport framing, attribution, element ID changes, flickering, and all the little edge cases that appear once the map becomes part of a real application.

That’s the layer Rover is trying to provide.

OpenLayers itself is the bet underneath it.

Three pins on a tile layer is an afternoon’s work. The next morning you need WMS layers, a cadastral overlay, vector data, clustering, or another projection — and suddenly the ceiling has moved somewhere else.

OpenLayers can handle that. Rover tries to make it feel natural from Phoenix LiveView.

Try it

Livebook demo

Run Rover in Livebook

Documentation

Rover v0.3.0 — HexDocs

Source

GitHub — nseaSeb/rover

Rover is open source and still evolving. Feedback, ideas, and criticism are welcome.

10 Likes
2

I’m following your excellent Livebook, but seeing an error when we get to step 5:

error: function assign/2 imported from both Kino.JS.Live.Context and Phoenix.Component, call is ambiguous

1 Like
3

My Bad, Thanks for the issue, I’ll fix it as soon as possible.

1 Like
4

@hyperoceanic It’s done 0.3.1 online with a fix. Thanks a lot it helps.

5

Hi, A little update on Rover since my original post.

When I posted Rover here, it was v0.3.1
It is now v0.8.0, and it has evolved quite a bit more than I expected. :sweat_smile:

Initially, my goal was fairly simple: make OpenLayers easier to use from Phoenix LiveView.

But the more I used it, the more I realised that the interesting part wasn’t really wrapping OpenLayers. It was making a fairly complex client-side state play nicely with LiveView’s declarative model.

Since then, quite a few things have landed:

  • editable shapes and drawing new geometries

  • snapping

  • keyboard and screen-reader accessibility

  • heatmaps and improved clustering

  • vector basemaps, including CARTO

  • configurable map interactions

  • marker rotation, anchors and opacity

  • CSS custom properties and dark mode

  • tile layers and overlays

  • WMTS support based on capabilities documents

  • label decluttering

  • and, perhaps less visible but probably more important, a lot of work on reconciliation and edge cases

For example, drawing a polygon from LiveView is now basically:

Rover.start_drawing(socket, "parcels", type: :polygon)

and the resulting geometry comes back as GeoJSON through the corresponding event.

The underlying idea hasn’t changed though.

OpenLayers is doing the hard GIS work. Rover is mostly trying to make those capabilities feel natural when your application state lives in Phoenix LiveView.

I’m also trying quite hard not to turn Rover into a second, simplified GIS API. If OpenLayers can already do something properly, I’d rather expose it than reinvent it.

The project has also grown quite a bit on the testing side, with Elixir, Node and browser tests, Dialyzer and coverage checks in CI.

There is still plenty I’m not sure about, and I’m sure there are use cases I’ve completely missed.

So, as with the original post, feedback is very welcome — especially from people actually using maps with Phoenix LiveView. If there is something you’d expect from a LiveView map component that Rover doesn’t handle yet, I’d be genuinely interested to hear about it.

GitHub: GitHub - nseaSeb/rover: Interactive maps for Phoenix LiveView, powered by OpenLayers. Assign a list of markers, get a live map. · GitHub
Docs: Rover v0.8.0 — Documentation

1 Like