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.
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]});
Extend the Layer or ContainerLayer class and provide a _newLayer function to use custom leaflet classes within the context of EmberLeaflet.
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]});
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);
}
});
Add ember-leaflet.js to your app, after ember.js and leaflet-src.js. Make sure to include the leaflet.css stylesheet as well!
git clone https://github.com/gabesmed/ember-leaflet.gitbundle installrake distopen dist/modules/ember-leaflet.jsRun rackup and open http://localhost:9292 in a browser. Or, rake test.