EmberLeaflet

View on GitHub gabesmed/ember-leaflet

Class Reference

Ember + Leaflet = Fun with maps!

EmberLeaflet aims to make working with Leaflet layers in your Ember app as easy, declarative and composable as Ember's View classes make working with DOM elements.

Wherever possible, the design is analogous to Ember's View, CollectionView and ContainerView architecture. EmberLeaflet provides Ember integrations for maps, tile layers, markers, polylines and geometry, and popups. It provides hooks wherever possible for easy extensibility into more custom Leaflet behavior.

Usage

A simple map in Ember - only two lines of code!

SimpleMapApp = Ember.Application.create();
SimpleMapApp.IndexView = 
  EmberLeaflet.MapView.extend({});

Specify center, zoom and options:

CenteredMapApp = Ember.Application.create();
CenteredMapApp.IndexView = 
  EmberLeaflet.MapView.extend({
    center: L.latLng(40.713282, -74.006978),
    zoom: 18,
    options: {maxZoom: 19, minZoom: 0}});

Customize the tile source:

CustomTilesApp = Ember.Application.create();
CustomTilesApp.TileLayer =
  EmberLeaflet.TileLayer.extend({
    tileUrl:
      'http://{s}.tile.cloudmade.com' +
      '/{key}/{styleId}/256/' +
      '{z}/{x}/{y}.png',
    options: {key: 'API-key', styleId: 997}});

CustomTilesApp.IndexView =
  EmberLeaflet.MapView.extend({
    childLayers: [CustomTilesApp.TileLayer]});

Add some markers! Bind a MarkerCollectionLayer's content to a controller, and markers are added, removed, and moved based on their content binding.

MarkersApp = Ember.Application.create();
MarkersApp.MarkerCollectionLayer =
  EmberLeaflet.MarkerCollectionLayer.extend({
    contentBinding: 'controller'});

MarkersApp.IndexView =
  EmberLeaflet.MapView.extend({
    childLayers: [
      EmberLeaflet.DefaultTileLayer,
      MarkersApp.MarkerCollectionLayer]});

MarkersApp.IndexController =
  Ember.ArrayController.extend({
    content: [
      {location: L.latLng(40.714, -74.000)},
      {location: L.latLng(40.714, -73.989)},
      {location: L.latLng(40.721, -73.991)}]});

Add functionality to EmberLeaflet classes with mixins.

RadMarkersApp = Ember.Application.create();
RadMarkersApp.MarkerLayer =
  EmberLeaflet.MarkerLayer.extend(
    EmberLeaflet.DraggableMixin,
    EmberLeaflet.PopupMixin, {
  popupContentBinding: 'content.title'
});

RadMarkersApp.MarkerCollectionLayer =
  EmberLeaflet.MarkerCollectionLayer.extend({
    content: [{
      location: L.latLng(40.7127, -74.0060),
      title: 'City Hall'}],
    itemLayerClass: RadMarkersApp.MarkerLayer
  });

RadMarkersApp.IndexView =
  EmberLeaflet.MapView.extend({
    childLayers: [
      EmberLeaflet.DefaultTileLayer,
      RadMarkersApp.MarkerCollectionLayer]});

Easily incorporate 3rd-party leaflet classes into your Ember app.

Extend the Layer or ContainerLayer class and provide a _newLayer function to use custom leaflet classes within the context of EmberLeaflet.

Marker clustering

ClusteredApp = Ember.Application.create();
ClusteredApp.MarkerCollectionLayer =
  EmberLeaflet.MarkerCollectionLayer.extend({
    content: [
      {location: L.latLng(40.714, -74.000)},
      {location: L.latLng(40.714, -73.989)},
      {location: L.latLng(40.721, -73.991)}]});

ClusteredApp.MarkerClusterLayer =
  EmberLeaflet.ContainerLayer.extend({
    childLayers: [
      ClusteredApp.MarkerCollectionLayer],
    _newLayer: function() {
      return new L.MarkerClusterGroup(); }
});

ClusteredApp.IndexView =
  EmberLeaflet.MapView.extend({
    childLayers: [
      EmberLeaflet.DefaultTileLayer,
      ClusteredApp.MarkerClusterLayer]});

Custom controls

Hook into the didCreateLayer callback to modify the default created layer.

LocateMapApp = Ember.Application.create();
LocateMapApp.IndexView = 
  EmberLeaflet.MapView.extend({
    didCreateLayer: function() {
      this._super();
      L.control.locate().addTo(this._layer);
    }
  });

Use it

Add ember-leaflet.js to your app, after ember.js and leaflet-src.js. Make sure to include the leaflet.css stylesheet as well!

Build It

  1. git clone https://github.com/gabesmed/ember-leaflet.git
  2. bundle install
  3. rake dist
  4. open dist/modules/ember-leaflet.js

Running unit tests

Run rackup and open http://localhost:9292 in a browser. Or, rake test.

Thanks