Introduction

ember-maplibre-gl provides Ember.js components for MapLibre GL JS, the open-source fork of Mapbox GL JS.

Features

• <MapLibreGL> — Main map container that yields all sub-components
• <map.source> — Add GeoJSON, vector, raster, and other data sources
• <source.layer> — Style data with circle, line, fill, symbol, and other layer types
• <map.marker> — Place markers with custom Ember content
• <map.popup> — Standalone or marker-attached popups
• <map.on> — Declarative event handling for map and layer events
• <map.control> — Add navigation, scale, and custom controls
• <map.image> — Load images and SVGs for use in symbol layers

Architecture

The addon uses a composable, yielded-component pattern, inspired by ember-mapbox-gl. The main <MapLibreGL> component creates the map and yields pre-bound sub-components:

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

<template>
  <MapLibreGL
    @initOptions={{hash
      style="https://demotiles.maplibre.org/style.json"
      center=(array 0 20)
      zoom=1
    }}
  as |map|>
    <map.source @options={{hash type="geojson" data=this.geojson}} as |source|>
      <source.layer @options={{hash type="circle" paint=(hash circle-color="#ff0000")}} />
    </map.source>
  </MapLibreGL>
</template>