gabesmed / ember-leaflet Goto Github PK

Leaflet has an unexpected (maybe not) way of hiding and showing layers on a map: it removes them to hide and adds them to show.
This is exactly what a Control.Layers does. When you activate a layer in the control, you add it to the map. When you deactivate a layer, you remove it from the map. If you want to show it again, you need to keep the reference to the layer and add it back again.

The thing is that the layers control must have all layers (so that I can choose among all of them), but the map may not contain all the layers (because some of them may not be visible by default).
I need to have a layers control on my project, but I can't get my head around this issue. What's missing in Ember-Leaflet to support the layers control? I think I need to create layers outside of the EmberLeaflet.MapView scope, so that I can also create a Layers control. At least I think I need to create layers separately because I can't pass layer class definitions to both map and control. The layers must already be created before.
What would be the best approach for this?

Another thing that occured to me is that using the layers control kind of breaks the childLayers CollectionLayer in the EmberLeaflet.MapView. When you activate a layer through the control, the control adds the layer directly on the map and the childLayers no longer reflects the leaflet map.
Don't know what kind of problems this may create, but maybe the eventual solution would be to use the baselayerchange / overlayadd / overlayremove events, or event the layeradd event. (Check map events).

Having a layers control is something very common and a very important feature in a map. So, after we solve this, we should include an example in the demo page.

http://bower.io/

Is there a way to change an already created tilelayer's opacity and z-index?

I'm trying to write some tests for polyline/polygon. Should the _layer get updated when the content changes in-place? For instance:

content = Ember.A([locations.nyc, locations.sf]);
polyline = EmberLeaflet.PolylineLayer.create({
  content: content
});

content.pushObject(locations.paris);
polyline.get('locations');  // [nyc, sf, paris]
polyline._layer.getLatLngs();  // [nyc, sf, paris]

content.set('0', locations.chicago);
polyline.get('locations');  // [chicago, sf, paris]
polyline._layer.getLatLngs();  // [nyc, sf, paris]

I can understand if this is the expected behavior, and all modifications should be made using pushObject and popObject. I simply am not sure if this is intended or not.

when they are passed in without a correct EmberLeaflet.computed.latLngFromLngLatArray conversion.

I was developing icon and z-index bindings for markers.

Right now Draggability and Popups are implemented as Mixins.
Do we want to follow the same path for icons and z-index support?

Hi guys, I have a MapView with a MarkerCollectionLayer as childLayers, and that MarkerCollectionLayer has a MarkerLayer that extends the DraggableMixin, so I'm trying to get the location of the MarkerLayer when it's dragged...

var markerLayer = EmberLeaflet.MarkerLayer.extend(EmberLeaflet.DraggableMixin, EmberLeaflet.PopupMixin, {
  dragend: function() {
     //The value of this.get('location') is always the same
  }
});

var marker = EmberLeaflet.MarkerCollectionLayer.extend({
  itemLayerClass: markerLayer,
  events: ['click'],

  content: function() {
    var lat = this.get('controller.geolocator.latitude');
    var lon = this.get('controller.geolocator.longitude');

    return [{location: L.latLng(lat, lon)}];
  }.property('controller.geolocator.latitude', 'controller.geolocator.longitude')
});

export default EmberLeaflet.MapView.extend({
  zoom: 15,
  options: {maxZoom: 19, minZoom: 0},
  events: ['click'],
  childLayers: [EmberLeaflet.DefaultTileLayer, marker],

  center: function() {
    return L.latLng(
      this.get('controller.geolocator.latitude'),
      this.get('controller.geolocator.longitude')
    );
  }.property('controller.geolocator.latitude', 'controller.geolocator.longitude')
});

The problem is that in the dragend handler I'm getting always the same value :(.
What I'm doing wrong?
Thanks!!!

I am new to leaflet and was wondering what would be the best way to draw a collection of polygons?

I saw in the source code that MarkerCollectionLayer just extends EmberLeaflet.CollectionLayer. Should I create a PolygonLayer and PolygonCollectionLayer that are very similar to the MarkerLayer and MarkerCollectionLayer? Is polygon even the best way to draw the region on the map, should I be using Polyline or MultiPolygon instead?

Sorry for all the questions and thanks in advance!

This is somewhat related with #47.

What do you guys think about adding support for controls just like we do with childLayers?

The idea is to have a controls array in MapView. Adding an instance of EmberLeaflet.Control to this array should add the control to the map.

Would it be worth it? Not quite sure about the benefits of this, but I think it would make easier to integrate some controls logic with ember objects and application in general.

Hey, I've had a lot of fun trying to get ember-leaflet to work in this project I'm working on, but now I'm getting profoundly stumped and actively frustrated.

So it seems to be the case that a MarkerCollectionLayer requires an ArrayController, whereas a MarkerLayer works with an ObjectController. So I can have one map with a marker collection layer, attached to addresses.index that shows each marker associated with each instance of the Address model (via a computed location property that returns a latLng), and another map, with a marker layer, that shows the specific marker associated with a specific instance of Address in addresses.show. So far, so good.

However, I have another model, Individual, which hasMany('address', {async:true}). In individuals.show, I can see a text rendering of the content of the Address objects via an {{each}}, but I can't, for the life of me, figure out how to get those three (say) Address markers to show up in the IndividualMapView for an Individual. Conceptually, I know I need to be giving the layer an array of locations, but if I can't even get a MarkerCollectionLayer with just one item in it—defined in IndividualsShowController—to show a solitary marker, then I think that there's no chance of my showing a bunch.

So is my assumption correct, that collection layers "only" work with array controllers? And if it's wrong, how I do I get around it? I'm not very good at ember, etc., so apologies if the answer is very simple.

Thanks!

Here's what's not working:

App.MarkerCollectionLayer = EmberLeaflet.MarkerCollectionLayer.extend({
  contentBinding: "controller"
});
App.MarkerLayer = EmberLeaflet.MarkerLayer.extend({
  contentBinding: "controller"
});
App.MapView = EmberLeaflet.MapView.extend({ //"parent" view for the app
  classNames: ['ember-leaflet-map'],
  center: L.latLng(40.713282, -74.006978),
  content: Ember.computed.alias('controller'),
  didCreateLayer: function() {
    this._super();
    this._layer.panTo(this.get("content.location"));
  },
  childLayers: [
    App.TileLayer,
    App.MarkerCollectionLayer
  ],
  zoom: 13
});
App.IndividualMapView = App.MapView.extend({
  childLayers: [
    App.TileLayer,
    App.MarkerCollectionLayer
    // App.MarkerLayer
  ]
});
App.IndividualsShowController = Ember.ObjectController.extend({
  location: L.latLng(40.714, -74.050)
});

Yet when I replace App.MarkerCollectionLayer with App.MarkerLayer in App.InvididualMapView, the marker does appear.

Hi,

I can't find documentation or examples on how to bind icons (reading through the issues shows that it should be possible now).

I have an Ember Leaflet map with markers of places (EmberLeaflet.MapView.extend), and next to it a list of places (Ember.Component.extend). What I want to accomplish is that when I click on a a place in the list, the corresponding marker changes icon/size/color.

There is also a controller, that contains the list of places, which is used by the map and the list.

How can I achieve this?

PS: I am fairly new to Ember

This is what I currently have:

I currently have several layers of indirection in order to display the markers, which means I've don't know how to access the markers from the controller

// The controller

export default Ember.ArrayController.extend({
  itemController: 'klub',
  hoveredKlub: null,
  hoveredMarker: null,
  layers: function(){
    return this.map(function(klub){
      return {
        location: klub.get('latlng'),
        id: klub.get('id'),
      };
    }.bind(this));
  }.property('@each.latlng'),
  actions: {
    highlightKlub: function(klubId) {
      var item = this.findBy('id', klubId);
      var marker = this.get('layers').findBy('id', klubId);

      // TODO
      // layer.setIcon(new HighlightedIcon())

      this.set('hoveredKlub', item);
      // this.set('hoveredMarker', marker)
    },
    unHighlightKlub: function() {
      this.set('hoveredKlub', null);
      // this.get('hoveredMarker').setIcon(new L.Icon.Default());  // TODO
      // this.set('hoveredMarker', null);
    }
  }
});


// MapView
export default EmberLeaflet.MapView.extend({
    center: L.latLng(46.2214969, 14.6),
    zoom: 9,
    options: {
      minZoom: 8,
      maxBounds: L.latLngBounds(southWest, northEast)
    },
    childLayers: [
      GoogleMapLayer,
      MarkerClusterLayer
    ],
    subscribeToKlubHovered: function() {
      window.pubsub.subscribe('klub.hovered', function(id){
        this.get('controller').send('highlightKlub', id);
      }.bind(this));

      window.pubsub.subscribe('klub.unhovered', function(){
        this.get('controller').send('unHighlightKlub');
      }.bind(this));
    }.on('didInsertElement'),
    unsubscribeFromKlubHovered: function () {
      window.pubsub.unsubscribe('klub.hovered');
      window.pubsub.unsubscribe('klub.unhovered');
    }.on('willDestroyElement')
  }
);

// MarkerClusterCollection

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

// MarkerCollectionLayer

export default EmberLeaflet.MarkerCollectionLayer.extend({
  contentBinding: 'controller.layers',
  itemLayerClass: KlubMarker
});

// KlubMarker

export default EmberLeaflet.MarkerLayer.extend({
    mouseover: function(e) {
      window.pubsub.publish('klub.hovered', e.target.content.id);
    },
    mouseout: function(e) {
      window.pubsub.publish('klub.unhovered');
    }
  }
);

I would use ember-leaflet with many markers, but I think there are performance issues. Rendering a map with 1000, 5000 or 10000 markers takes very long time.
Especially the clustered markers should be faster (see 10000 realworld demo from the authors).

For my tests I extend the https://github.com/eviltrout/ember-performance sources with tests like this:

Perf.markerController = Ember.ArrayController.create({});
var MarkerCollectionLayer = EmberLeaflet.MarkerCollectionLayer.extend({
  contentBinding: 'Perf.markerController'
});

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

var MapView = EmberLeaflet.MapView.extend({
  zoom: 0,
  childLayers: [
    EmberLeaflet.DefaultTileLayer,
    MarkerClusterLayer
  ]
});

Perf.Profiler.profile("Map Cluster Markers", 10, function(result) {
  var promise = Ember.Deferred.create();

  Perf.markerController.set('content', markers);

  var mapView = MapView.create();

  Em.run.next(function() {
    result.stop();

    // clean up stuff
    Perf.markerController.set('content', null);
    mapView.destroy();
    promise.resolve();
  });

  mapView.appendTo('#scratch');

  return promise;
};

Which results in this:

I saved also cpu profiles (see https://gist.github.com/lord-spam/6311609) with chrome's developer tool. You can load these into your devtools and I hope it can help to find the problems.

Does everybody can help me to reduce the rendering? Should I use the library otherwise?

Good day.

Sorry for my bad English.

Thank you for your great library.

Let me show the code:

App.FieldsLayer = EmberLeaflet.CollectionLayer.extend({
    itemLayerClass: EmberLeaflet.PolygonLayer.extend(EmberLeaflet.PopupMixin, {
        locationsProperty: 'locations',
        popupViewClass: FieldPopupView
    }),
    contentBinding: 'controller.content'
});

The problem is that I can not access current item to use it in popupViewClass.

popupView is created via:

this._popupView = this.get('popupViewClass').create({
  container: this.get('container'),
  controller: this.get('controller'),
  context: this.get('controller')
});

and controller is an ArrayController, not item controller.

I've solved this issue by updating popupView creation:

this._popupView = this.get('popupViewClass').create({
  container: this.get('container'),
  controller: this.get('controller'),
  context: this.get('context')
});

and changing my CollectionLayer to:

App.FieldsLayer = EmberLeaflet.CollectionLayer.extend({
    itemLayerClass: EmberLeaflet.PolygonLayer.extend(EmberLeaflet.PopupMixin, {
        locationsProperty: 'locations',
        popupViewClass: FieldPopupView,
        contextBinding: 'content'
    }),
    contentBinding: 'controller.content'
});

When using leaflet components such as the Leaflet.Draw, it would be useful to have better documentation about things like the events property and didCreateLayer. This would help hooking up to the events of these plugins.

I explained this in a blog post.

I could contribute by writing this somewhere in ember-leaflet documentation if you point me to right file.

I was wondering if anyone had any ideas on how to reflect the popup state in the URL.
For example, if I had a map with a bunch of POIs and a user clicked the marker for a particular market, it would be great if the URL would change something like /supermarkets/3424 or /supermarket/<some controller property>.

I have been digging around descending SomeCollectionLayer._childLayers[n]._childLayers[n]. This seems like the really wrong way to do this. How should I approach this problem?

It looks like the tests are running against Ember 1.0-rc1. How can we get them running against Ember 1.0? I think some parts of EmberLeaflet may now be broken, but I don't know for sure because they aren't testing against the latest Ember.

Hey @codefox421 -- just wondering what you thought about this. Seems like it more accurately sums up the functionality Rectangle currently offers. Have any preference as to which? I kinda think BoundingBox sums it up, but would be open to BoundingRectangle as well.

My goal is to have all of the markers that appear frame the bounds of the map. I did this pretty easily on the Rails side via the leaflet-rails gem while calculating the bounds on the fly, but doing something similar, with a computed property bounds, like this:

App.IndividualMarkerCollectionLayer = App.MarkerCollectionLayer.extend({
  itemLayerClass: App.PopupLayer,
  didCreateLayer: function() {
    this._super();
    this._layer._map.fitBounds(this.get("content.bounds"));
  }
});

tells me that fitBounds is undefined. (or, at least, that's what's underlined in the Inspector)

I see that there's a CollectionBoundsMixin in ember-leaflet, which I think provides geometry.get('bounds'), so I can save having to calculate it myself.

But I still don't know how to set up the auto-zooming/panning that fitBounds provides, and/or don't know why fitBounds gives an error. When I comment that line out, the markers appear as expected, and I've even tried sending fitBounds an artificial L.latLngBounds, to see if that's the problem.

Thanks!

via @miguelcobain:

Actually, there is a problem with icon binding (which is pretty useful):

When you change icon in leaflet, you lose the draggability. So you need to restore it.

I use this code:

  iconBinding: 'content.icon',
  _updateLayerOnIconChange: Ember.observer(function(){
    var newIcon = get(this, 'icon');
    var oldIcon = this._layer && this._layer.options.icon;
    if(oldIcon && newIcon && oldIcon !== newIcon) {
      var draggable = this._layer.dragging.enabled();
      this._layer.setIcon(newIcon);
      if(draggable) this._layer.dragging.enable();
      else this._layer.dragging.disable();
    }
  }, 'content.icon'),

I don't have much time right now, but it would be nice to have failing tests for this.

Hi @gabesmed - thanks for your work on this!

Any plans on making this es6 modules for easier use within ember-cli? Any way I can help with that?

It could be useful to define all layer types as mixins as well as full layer objects, the same way as the base Layer class does it. Here's an example of my thinking:

An interface displays a list of locations (let's call them destinations) adjacent to a map. Users perform a search to populate the list, and have various options to filter, sort, etc those destinations. When users do this, the underlying data, the result of their search, doesn't change.

This is a great use-case for Ember's ArrayController. It can be used to apply transformations (filter/sort/etc) to the content/model (the list of destinations). Let's say it's extended as App.DestinationsController.

Now let's say the destinations need to be represented on the map using markers. Doing this requires a MarkerCollectionLayer class (App.DestinationCollectionLayer) and a MarkerLayer class (App.DestinationLayer), plus some sort of glue between App.DestinationsController and App.DestinationCollectionLayer. Generally, this "glue" will manifest as an array on the application scope (App.destinationGlueArray) (or occasionally as a custom layer-needs-controller helper-mixin).

If instead there existed an EmberLeaflet.MarkerCollectionMixin, App.DestinationsController could mix it in and become the collection layer, eliminating the need for any "glue".

This presents some issues (overlapping property names for one) and may require some restructuring of EmberLeaflet's inner workings. Therefore, I'm looking to fully discuss and think it through before diving into any implementation.

Thoughts?

Maps click event fires two times, first time with EmberLeaflet event object, the second time with a default jQuery event object. The dblclick event only fires one time with the EmberLeaflet event object. So I thought that might be a bug.

See this jsFiddle:
http://jsfiddle.net/9mr5N/5/

Hi,

I need to get the color of a specified pixel on the map. I think that if I get canvas element, I can use html canvas methods to get the pixels' color. Here is a code snipped from my ember apps:

Simulation.MapLayer = EmberLeaflet.Layer.extend({
_newLayer: function() {
return new L.Google('ROADMAP');
});

I am trying to get canvas as follows,
var canvasTiles = Simulation.MapLayer.canvas();
canvasTiles.drawTile = function(canvas, tilePoint, zoom) {
var ctx = canvas.getContext('2d');
ctx.fillRect(20,20,250,200);
};

The above code is not working, I would be really appreciated if you can help me to get the canvas of the map, or other better solution to get the color of a pixel on the specified position on the map.

Thanks,

I'm trying to add this component to rails-assets: https://rails-assets.org/components/new

But for that to happen, Bower needs to be able to find at least one version tag. However, your app doesn't seem to have any:

https://github.com/gabesmed/ember-leaflet/releases

So I get this:

ember-leaflet has no versions defined. Please create an issue in component's repository.

Can you please tag it?

Like stated on #38, something similar is needed for option properties.

How hard could this be?

I've been toying around with EmberLeaflet.computed.optionProperty a bit. Of course, my first choice of option to test was color, which turned out to be a tricky one since Leaflet doesn't provide a setter method (it provides setStyle instead).

It got me thinking: when EmberLeaflet.computed.optionProperty can't find a setter, what if it tried to call a function by the same name on the layer before throwing an error? This way, users could fill in setters when Leaflet doesn't match up just right.

App.MyPolygon = EmberLeaflet.PolygonLayer.extend({
  color: EmberLeaflet.computed.optionProperty(),
  setColor: function(color) {
    this._layer.setStyle({ color: color });
  }
});

I've have hit a strange problem while trying to set the center of a map. Extracted the code to a jsbin.

To reproduce

• click "Route 1", click "Route 2". you can see the center of the map moves as expected.
• now move the map (or drag wtv the movement is called) and switch again between routes. this time the center remains the one you moved the map to.

Seriously, ran out of ideas, but it looks like, after moving, centerDidChange method in MapView doesn't get called anymore.

I require ember, then leaflet and ember-leaflet in my application.js, and my ember-leaflet.js file lives in the root of my javascripts directory, along with my ember app.

I keep getting error messages that EmberLeaflet.MapView is undefined, using the demo one-line map code provided.

I think it would be great if we could make ContainerLayerMixin to continously "manage" a Leaflet LayerGroup.

This way we could just iterate through the _childLayer instances and fetch all the layer groups to add to a Layers Control, for example.

Leaflet has the notion of a "collection" (LayerGroups), and so has Ember (MutableArrays). Right now, the Leaflet's collection part is missing from ContainerLayerMixin.

What do you think?

Hey guys! Great work on this project. I'm newish to Ember but familiar with leaflet. I was looking at @miguelcobain's ember-leaflet repo but he suggested I bring my question here.

I have a model that basic info (name, description, etc) and then a nested geometry attribute with the coordinates of the point and the shape of the model itself.

What's the best way to send the data to a template (like the name and description) and the map coordinates to Ember-Leaflet? I'd love to figure this out. l think this library could prove very helpful for a lot of folks. Please let me know if you can help. Thanks!

I tried:

git clone https://github.com/gabesmed/ember-leaflet.git
bundle update
bundle exec rake dist

and I got:

uilding EmberLeaflet...
rake aborted!
cannot load such file -- handlebars/source
/home/p/src/ember-leaflet/Assetfile:1:in `instance_eval'
(eval):3:in `require'
(eval):3:in `block in rebuild_from_assetfile'
/home/p/src/ember-leaflet/Assetfile:1:in `instance_eval'
/home/p/src/ember-leaflet/Assetfile:1:in `block in rebuild_from_assetfile'
Tasks: TOP => dist => ember:dist
(See full trace by running task with --trace)

1. How do I update the view's base map url on route?
2. How would I added another layer from an action on the application controller?

Thank you.

The link to the class reference (http://gabesmed.github.io/docs/index.html) is broken. Are these docs somewhere else?

Shouldn't EmberLeaflet.CollectionLayer extend Ember.ArrayProxy ?

This way, the API would become a little bit friendlier.

var c = EmberLeaflet.MarkerCollectionLayer.create({
    content: [
        {location: L.latLng(40.713282, -74.006978)},
        {location: L.latLng(40.713465, -74.006753)},
        {location: L.latLng(40.713873, -74.006404)}]
});

c.get('firstObject')
// vs
c.get('content.firstObject')

We probably should wrap Leaflet's LatLng class in our own bindable "ember" LatLng class, especially if we want to follow the two-way binding approach.

This way we could abstract Leaflet LatLng/array version.

We would use it like:

App.MarkerCollectionLayer = EmberLeaflet.MarkerCollectionLayer.extend({
    content: [
        {location: EmberLeaflet.LatLng.create({lat:42, lng:14})},
        {location: EmberLeaflet.LatLng.create({lat:43, lng:13})},
        {location: EmberLeaflet.LatLng.create({lat:44, lng:12})}
    ]
});

What do you think?

Is it possible to bind MapView child layers to a controller?

I'm trying to change TileLayers based on a controller's array.

This is probably related with #35, but I'm trying to have the MapView bound to an array on the controller instead of having to call pushObject on the MapView.

I am not entirely sure how to ask this, but here goes:
I have a Map view with a bunch layers and markers and this works great. On top of the map and in the Handlebars template for the view, I have some select views and checkboxes, etc. to manage what markers and layers are shown on the map. The selects work fine in the browser, but don't work in iOS which I think is related to Leaflet/Leaflet#2699.

I also {{render}} a view and template with dynamic content at the bottom of the Handlebars template for the map view. This renders find but all the mouse events also affect the Leaflet map underneath.

I was wondering if there is way to prevent events from getting to the Map view?

Hi.

I use popupContentBinding in popupMixin, but in the case of if popupContent is empty
popup will be opened without text. I think it is necessary to add check in popuMixin's click event.

https://github.com/gabesmed/ember-leaflet/blob/master/packages/ember-leaflet/lib/mixin/popup.js#L15

How can a control be added to the map such as in this example http://domoritz.de/leaflet-locatecontrol/demo/.

L.control.locate().addTo(map);

Ember 1.8-beta removes _insertElementLater.

It looks like all of the _insertElementLater block could be replaced with this._popupView.constructor.renderer.appendTo(this._popupView, this._popup._contentNode);

I tried to make a pull request but I couldn't figure out how to update to Ember 1.8-beta to run the tests.

see comment: 86c1396#commitcomment-3421867

Hi,

First, thanks for creating this Ember & Leaflet integration. It is been really useful.

I was wondering if you have plan to componentize this integration. Something similar as http://googlewebcomponents.github.io/google-map/components/google-map/. If doable.

Thanks

Hello everyone,

first thank you for this great implementation of leaflet into ember. I'm impressed and learned alot from the plugin.

But now I have come to an issue, I don't know how to fix. I also posted the question on stackoverflow, so please have a look here:

http://stackoverflow.com/questions/19119021/rendering-view-or-handlebars-template-in-leaflet-popup

Its about the use of a template for the popupContent property. Do you have any best practice for using a view or Ember extended Handlebar template here?

Thank you in advanced.
I hope this the right channel.

Would it be possible to provide a few examples in the docs of using some of the popular leaflet plugins.

I would do it myself, except then I would need to read them first ;)

This may be a daft question, but I haven't been able to get anywhere so I will ask...

Basically, everything is working fine in development, but in production, my app isn't able to locate "marker-icon.png" and "marker-shadow.png" images.

I've added the following to production.rb:

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

But to no avail. Leaflet is trying to access the images are the usual "/assets/marker-icon.png" paths, instead of the hashified asset pipeline paths.

What is the best way to specify iconUrl myself in ember-leaflet, so I can override this behaviour?

Thanks!

Well, the question about icon and z-index in issue #12 is just a particular case of this one.

For example, I will need to bind the colors of polylines and circles. These are just options, just like the icon, z-index, opacity, etc.

Currently, we are not providing any bindings for this kind of properties. Not even with popupContent in the PopupMixin. Right now, how can I bind the popup content to an Ember property?

I think we should decide here how and if we are going to address this issue.

Great work! Glad to see that someone had a look at what I did.

I like how this project is organized. Much more than my own. Much more "ember".

While I was trying to adapt my example page to this project, I've noticed that it still lacks some features.

For example, do you intend on adding bidirecional support for any features? i.e, changing zoomLevel variable changes leaflet map's zoom, and changing leaflet map's zoom causes the zoomLevel variable to change.

Please tell me what direction you want for this. Maybe we could join forces if the philosophies and requirements of both projects are the same.

Miguel.

I've noticed that you did things a bit different than me.

For example, consider the case of markers (MarkerLayer). It makes sense that a marker represents a certain object from our domain, so they must be related.

In my project, I create a mixin that the user must add to their objects in order to have Marker support, for instance. This mixin adds capabilities such as the Laeflet marker layer creation, observers, property syncing, etc.
You do it differently. You maintain the collections of both the marker layers and the objects, separately.

I'm reaching a point were I need to observe properties on the object and then make some changes in the layer, and vice-versa. Where in the MarkerLayer can I access the created layer instance?

I think it is essencial.

In my project, when we set the icon property of an object the marker changes the icon in leaflet layer. Do we want this behavior here as well?

The problem is that if you want to customize the icon via itemLayerClass: App.MyFancyIconMarkerLayer, you are forcing the icons on that collection to be all the same (i.e the MarkerLayers are all of the same instance), which might not be desirable. Any thoughts?

Hi,

I'm working on an EmberJS map app with a MapView and a sidebar, where different views are added during working with the app. The views in the sidebar need some information from the map, like zoom level. So with embers needs controller injection I could get value from MapViews controller, but the zoom level of the map is stored in MapView directly. So how could I observe zoom level from another view/controller?

Thanks,
Hendrik