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';

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

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.