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 CSS, or in the module below:

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

MapLibre v6+: configure the worker

In a bundled app, MapLibre v6 cannot find its worker file. Call setWorkerUrl before the first map is created. With Vite, you can wrap the component in a module:

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

setWorkerUrl(maplibreWorkerUrl);

export { default } from 'ember-maplibre-gl/components/maplibre-gl';

Import MapLibreGL from this module, not from ember-maplibre-gl. Then MapLibre loads only with the code that shows a map.

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.