Skip to content
Make with

ember-maplibre-gl

Declarative MapLibre GL JS components for Ember.js

Maintained by Johan Røed

Documentation ↗Source ↗

ember-maplibre-gl is the MapLibre successor of ember-mapbox-gl, rewritten for MapLibre GL JS and modern Ember. The MapLibreGL component yields sources, layers, markers, popups, and event handlers, so a map is written in the template. It supports MapLibre GL JS v5 and v6.

Quick start

pnpm add ember-maplibre-gl maplibre-gl
// app/components/maplibre-gl.ts: set up MapLibre v6 once
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';

// app/components/my-map.gts
import MapLibreGL from './maplibre-gl';

<template>
  <MapLibreGL
    @initOptions={{hash
      style="https://tiles.openfreemap.org/styles/liberty"
      center=(array 0 20)
      zoom=2
    }}
  />
</template>
›Setup noteschecked with v0.7.1

With MapLibre GL JS v6 in a bundled app, wrap the component in your own module that calls setWorkerUrl (Vite shown), and import MapLibreGL from that module; v5 needs no worker setup. The README also recommends excluding maplibre-gl from Vite's optimizeDeps.

Other platforms are on SDKs.