Popup state

[drwlrsn]

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?

[miguelcobain]

You're suggesting having a link-to inside a popup? Or clicking a popup would trigger a transition to a different route?

[drwlrsn]

Clicking a popup would trigger a transition to a different route. And then the reverse: if the app is loaded with the route, the popup is open.

[miguelcobain]

The reasoning would be to change the model through the router and make the marker react accordingly to the model.

Example:

• enter route: /restaurants/1
• Make a selected property in the restaurants controller to hold the currently selected restaurant. or
• set a highlighted property to true in the restaurant 1 model
• observe this property in your MarkerLayer subclass and act accordingly (open the popup in this case)

[nickiaconis]

What if popups were componentized as compositional components:

{{#ember-leaflet}}
  {{tile-layer tileUrl="//a.tiles.mapbox.com/v3/examples.map-zr0njcqy/{z}/{x}/{y}.png"}}
  {{#container-layer}}
    {{#each enabledLocations as |location|}}
      {{#marker-layer location=location.location}}
        {{#marker-popup}}
          <p>Some HTML content goes here, potentially including {{boundProperties}} or <button {{action "doSomething"}}>actionable elements</button> which get handled by the parent route/component.</p>
        {{/marker-popup}}
      {{/marker-layer}}
    {{/each}}
  {{/container-layer}}
{{/ember-leaflet}}

So to reflect popup content in the URL you would do:

{{#marker-popup}}
  {{outlet}}
{{/marker-popup}}

And let Ember's router take care of the rest by using nested routes.

[miguelcobain]

As you know, related: https://github.com/gabesmed/ember-leaflet/pull/98#issuecomment-78551161 Something like that is planned for future versions.

[nickiaconis]

Yep, I remember that. Basically, it solves this case with very little "heavy lifting" on EmberLeaflet's side. Plus it looks a lot cleaner and is generally more flexible than something like {{popup-marker-layer popupContent=someComputedProp}}.

This is just a thing to keep in mind when implementing those components.