ember-maplibre-gl

Declarative MapLibre GL JS components for Ember.js.

Demo and docs

Installation

pnpm add ember-maplibre-gl

Import the MapLibre CSS in your app:

@import 'maplibre-gl/dist/maplibre-gl.css';

MapLibre v6+: configure the worker

MapLibre v6 ships as ESM with a separate worker file that bundlers can't resolve automatically, so each app must point MapLibre at the worker once at startup. The right incantation depends on your bundler — this addon deliberately leaves it to the app. With Vite (Embroider + Vite), add to your app.ts:

import { setWorkerUrl } from 'maplibre-gl';
import maplibreWorkerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';

setWorkerUrl(maplibreWorkerUrl);

See the MapLibre installation docs for webpack and other bundlers, and the v5 → v6 migration guide for the other v6 changes. MapLibre v5 needs no worker setup.

Also add to your vite.config:

optimizeDeps: {
  // maplibre-gl is a single pre-bundled ESM file; prebundling it only breaks
  // its sourcemap paths (a wall of "source file outside its package" warnings
  // at dev startup). Served directly, the maps resolve to the package's src/.
  exclude: ['maplibre-gl'],
},

Usage

import MapLibreGL from 'ember-maplibre-gl/components/maplibre-gl';

<template>
  <MapLibreGL 
    @initOptions={{hash style="https://demotiles.maplibre.org/style.json" center=(array -74.5 40) zoom=9 }} 
  as |map|>
    <map.source @options={{hash type="geojson" data=this.geojson}} as |source|>
      <source.layer @options={{hash type="circle" paint=(hash circle-color="#007cbf" circle-radius=8)}} />
    </map.source>
    <map.marker @lngLat={{array -74.5 40}} as |marker|>
      <marker.popup>Hello!</marker.popup>
    </map.marker>
    <map.on @event="click" @action={{this.handleClick}} />
  </MapLibreGL>
</template>

Components

| Component | Description | |-----------|-------------| | <MapLibreGL> | Main map container, yields all sub-components | | <map.source> | Add data sources (GeoJSON, vector, raster) | | <source.layer> | Style and render source data | | <map.marker> | Place markers with custom Ember content | | <map.popup> | Standalone or marker-attached popups | | <map.on> | Declarative event handling | | <map.control> | Add map controls | | <map.image> | Load images for symbol layers | | <map.call> | Call map methods imperatively |

Compatibility

• Ember.js v3.28 or above
• Embroider v2 addon
• MapLibre GL JS v5 and above (for v6+, configure the worker — see Installation and the v5 → v6 migration guide)

Acknowledgements

This project is derived from ember-mapbox-gl by Kyle Turney and contributors, rewritten for MapLibre GL JS and modern Ember (Glimmer components, template-tag .gts, Embroider v2).

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.