willcode2surf / ember-leaflet

Ember + Leaflet = Fun with maps

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 functionality for maps, tile layers, markers, polylines and geometry, and popups. It provides hooks wherever possible for easy extensibility into more custom Leaflet behavior.

Resources:

• Quickstart and examples at gabesmed.github.io/ember-leaflet
• Class reference (YUIDoc)
• Minimal JSFiddle

Usage

Creating a map is just one line of code!

App.AMapView = EmberLeaflet.MapView.extend({});

Create layers and bind content declaratively in idiomatic Ember.

App.AnotherMapView = EmberLeaflet.MapView.extend({
    childLayers: [
        App.TileLayer,
        EmberLeaflet.MarkerCollectionLayer.extend({
            contentBinding: 'controller'
        })]
});

Handle events by adding functions: listeners are added and removed automatically.

App.MarkerLayer = EmberLeaflet.MarkerLayer.extend({
    click: function(e) { alert('hi!'); },
    dblclick: function(e) { alert('hi again!'); }
});

Functionality is added to classes with mixins.

App.DraggableMarker = EmberLeaflet.MarkerLayer.extend(
    EmberLeaflet.DraggableMixin, {});

More examples at gabesmed.github.io/ember-leaflet

Roadmap

• Better documentation
• EmberLeaflet.GeojsonLayer for automatic parsing of geojson.
• popupViewClass for including Ember Views in popups.
• Icon and DivIcon classes for easy bindings to icon properties like className and innerHTML.

PRs welcome! To contribute, get in touch with @gabesmed.

Build It

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

Running unit tests

Run bundle exec rackup and open http://localhost:9292 in a browser.

Thanks

• Thanks to the contributors to emberjs/list-view, from whom I cribbed this project skeleton.
• Thanks to everyone who makes Ember a joy to work with!
• Thanks to the makers of Leaflet, hooray for maps!

Install notes

For linux installs, the most common missing dependencies are libsxlt-dev, libxml2-dev, and ruby1.9.1-dev or ruby1.8-dev. If something goes wrong, first make sure you have these installed.