Ember + Leaflet = Fun with maps
Switch branches/tags
Nothing to show
Clone or download
Latest commit 8c22085 Nov 18, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
blueprints/ember-leaflet
config
tests
vendor
.bowerrc
.editorconfig
.ember-cli
.gitignore
.jshintrc
.npmignore
.travis.yml
LICENSE.md
README.md
bower.json
ember-cli-build.js
index.js
package.json
testem.json
yuidoc.json

README.md

See version 2.0 at https://github.com/miguelcobain/ember-leaflet!

Ember + Leaflet = Fun with maps! Build Status

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

Resources:

Installation

EmberLeaflet is an Ember-cli addon, so you can install it by running:

$ ember install gabesmed/ember-leaflet

Usage

You should now have access to a new component in your app. Render the EmberLeaflet component wherever you want to render a leaflet map:

{{leaflet-map}}

Create layers and bind content declaratively in idiomatic Ember.

// app/components/leaflet-map.js

import EmberLeafletComponent from 'ember-leaflet/components/leaflet-map';
import MarkerCollectionLayer from 'ember-leaflet/layers/marker-collection';
import TileLayer from 'ember-leaflet/layers/tile';

export default EmberLeafletComponent.extend({
  childLayers: [
    TileLayer.extend({
      tileUrl:
        'http://{s}.tile.cloudmade.com' +
        '/{key}/{styleId}/256/' +
        '{z}/{x}/{y}.png',
      options: {
        key: 'API-key', styleId: 997
      }
    }),
    MarkerCollectionLayer.extend({
      contentBinding: 'controller'
    })
  ]
});

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

// app/layers/my-marker-layer.js

import MarkerLayer from 'ember-leaflet/layers/marker';

export default MarkerLayer.extend({
  click: function(e) { alert('hi!'); },
  dblclick: function(e) { alert('hi again!'); }
});

Functionality is added to classes with mixins.

// app/layers/my-marker-layer.js

import MarkerLayer from 'ember-leaflet/layers/marker';
import DraggableMixin from 'ember-leaflet/mixins/draggable';

export default MarkerLayer.extend(DraggableMixin, {});

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

Roadmap

  • Better documentation
  • EmberLeaflet.GeojsonLayer for automatic parsing of geojson.
  • 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. ember install
  3. ember build

Running unit tests

Run ember test.

Building class reference docs

Run ember ember-cli-yuidoc.

Thanks

  • Thanks to everyone who makes Ember a joy to work with!
  • Thanks to the makers of Leaflet, hooray for maps!