Skip to content

Instantly share code, notes, and snippets.

@jerel
Last active January 2, 2016 12:18
Show Gist options
  • Save jerel/8302035 to your computer and use it in GitHub Desktop.
Save jerel/8302035 to your computer and use it in GitHub Desktop.
A super lightweight way of adding and removing Leaflet markers for an Ember ArrayController. I'm currently using it and as it matures I may move it to a repo.
var Leaflet = Leaflet || {};
Leaflet.LayerMixin = Ember.Mixin.create({
layerSetup: function(options) {
var controller = options.controller
, add = options.add || 'addLayer'
, update = options.update || 'updateLayer'
, remove = options.remove || 'removeLayer'
, self = this;
controller.get('content').forEach(function(model, i) {
var layer = self[add](model);
controller['content'][i]['_layer'] = layer;
});
var observer = {
arrayWillChange: function(observedObj, start, removeCount, addCount) {
for(var i = start; i < start + removeCount; i++) {
var model = observedObj.objectAt(i);
self[remove](model['_layer']);
}
},
arrayDidChange: function(observedObj, start, removeCount, addCount) {
for(var i = start; i < start + addCount; i++) {
var model = observedObj.objectAt(i);
var layer = Ember.get(model, '_layer');
if (layer) {
layer = self[update](model, layer);
} else {
layer = self[add](model);
}
controller['content'][i]['_layer'] = layer;
}
},
};
controller.addArrayObserver(observer);
},
// must return the layer
addLayer: function(model) {
var layer = L.marker(model['lat_lng']);
this.get('controller.map').addLayer(layer);
return layer;
},
// must return the layer
updateLayer: function(model, layer) {
var layer = L.marker(model['lat_lng']);
this.get('controller.map').removeLayer(layer);
this.get('controller.map').addLayer(layer);
return layer;
},
removeLayer: function(layer) {
this.get('controller.map').removeLayer(layer);
}
});
// Usage:
App.MarkerController = Ember.ArrayController.extend({
content: [
{lat_lng: [35, -90]},
{lat_lng: [35.5, -90]}
]
});
App.MapController = Ember.Controller.extend({
needs: 'marker'
});
App.MapView = Ember.View.extend(Leaflet.LayerMixin, {
didInsertElement: function() {
var map = L.map(...
this.set('map', map);
this.layerSetup({
controller: this.get('controllers.marker'),
// specify custom methods for handling layers. Defaults to "addLayer"
add: 'addMarker',
update: 'updateMarker',
remove: 'removeMarker'
});
},
addMarker(model){
// return the layer so Ember can track for when it's removed
return this.get('map').addLayer(L.marker(model['lat_lng']));
},
updateMarker(model, layer) {
//...
return theUpdatedLayer;
},
removeMarker(layer) {
this.get('map').remove(layer);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment