Ember routing and application design

I've been looking for every tutorials about Ember I've found on internet, searched through the pretty well documented Ember's website, and a lot of StackOverflow questions, but never succeed to achieve exactly what I'm looking for...

Basically I've an application who consist of a Google Map showing some markers coming from the database and a filter section which let the user filter the markers.

When a user clicks on a filter, a request is sent to the server, and it answer back with a json response like so :

markers:
    0: {id: 6, title: "blablablabla", coords: {lat: x.xxxxxxxxxxxxx, lon: xx.xxxxxxxxxxxxx}}
    [...]
    14: {id: 20, title: "blablabla", coords: {lat: x.xxxxxxxxxxxxx, lon: xx.xxxxxxxxxxxxx}}
date_begin_label: "March 1, 2015"
date_end_label: "April 1, 2015"
selected: "last-month"

For the moment, I've created :

DateTimeSearch Template

<a href="#date-selection">{{ date_begin_label }} to {{ date_end_label }}</a>
<ul id="date-selection">
    <li><a href="/filter/today" {{ action 'fastFilterDate' 'today' }}>Today</a></li>
    <li><a href="/filter/yesterday" {{ action 'fastFilterDate' 'yesterday' }}>Yesterday</a></li>
    <li><a href="/filter/last-week" {{ action 'fastFilterDate' 'last-week' }}>Last Week</a></li>
    <li><a href="/filter/last-month" {{ action 'fastFilterDate' 'last-month'}}>Last Month</a></li>
    // also tried this
    {{#link-to 'map.fast-filter' 'today' tagName='li' href=no classNames='date-filter-today'}}
        {{#link-to 'map.fast-filter' 'today'}}Today{{/link-to}}
    {{/link-to}}
</ul>

Map Template

<header>
    {{ view App.DateTimeSearchView }}
</header>
<div id="map">&nbsp;</div>

MapView.js

App.MapView = Ember.View.extend({
    contentDidChange : function () {
        this.mapUpdate();
    }.observes("controller.content"),

    mapUpdate : function () {
        var markers = this.get("controller.model");
        // update the map
    },
});

Router.js

App.Router.map(function () {
    this.resource("map", { path : "/map" }, function () {
        this.route("fast-filter", { path : "/filter/:filter"});
    });
});

MapRoute.js

App.MapRoute = Ember.Route.extend({
    model : function (filter) {
        filter = filter.length ? filter : "today";
        var data = App.MapMarker.filter(filter);
        // don't know how to give data.date_begin_label, data.date_end_label
        // and data.selected to DateTimeSearchController...
        return data.markers;
    },

    actions : {
        fastFilterDate : function (filter) {
            var controller = this.get("controller");
            App.MapMarker.filter(filter).then(function (response) {
                controller.set("model", response);
                // don't know how to give data.date_begin_label, data.date_end_label
                // and data.selected to DateTimeSearchController...
            });
        }
    }
});

MapMarker.js

App.MapMarker = Ember.Object.extend({});
App.MapMarker.reopenClass({
    filter  : function (filter) {
        var path = "/api/filter/" + filter;
        return new Ember.RSVP.Promise(function (resolve, reject) {
            Ember.$.getJSON(path)
                .success(function (response) {
                    response.markers = response.markers.map(function (child) {
                        return App.MapMarker.create(child);
                    });
                    Ember.run(null, resolve, response);
                })
                .error(function (xhr, text_status, error) {
                    Ember.run(null, reject, error);
                })
            ;
        }, "MapMarker::filter::" + path);
    }
});

DateTimeSearchController.js

App.DateTimeSearchController = Em.Controller.extend({
    date_begin_label    : null,
    date_end_label      : null,
    selected            : null
});

DateTimeSearchView.js

App.DateTimeSearchView = Em.View.extend({
    templateName    : "datetime-search",
    tagName         : "section",
    idName          : "filter-section",

    date_begin_label    : Em.computed.alias("controller.date_begin_label"),
    date_end_label      : Em.computed.alias("controller.date_end_label"),
    selected            : Em.computed.alias("controller.selected")
});

I need few things :

• 
  

  When the user click on the "today" filter, the URL must show : /map/filter/today

  
  


• 
  

  Then the MapController's model get updated according to the choosen filter (like I'm actually doing with the "fastFilterDate" action)

  
  


• 
  

  AND DateTimeSearchController's properties "date_begin_label", "date_end_label", "selected" also, knowing that these infos are coming from the same request as the MapController's model (don't know if I'm clear on this one).

  
  

In my mind, I had this scenario :

• 
  

  Each filters would be a route, generated in the view with {{#link-to}} so when you click on it, the URL get updated and would show "/map/filter/xxxx"

  
  


• 
  

  The application shows a little loader on the map template

  
  


• 
  

  It sends a message to the MapController's model so it can be updated according to the choosen filter (never found out how to do this)

  
  


• 
  

  When we get the response back, it updates the MapController's model with the markers, and update also the DateTimeSearchController with the few other properties (date_begin_label, date_end_label and selected).

  
  


• 
  

  The MapView gets automatically updated with the new markers (I know how to do it)

  
  


• 
  

  By default, when the application first load, the "today" filter is automatically set WITHOUT changing the URL (not showing /map/filter/today but only /map)

  
  

Of course, I want it to work also if someone enters directly the URL "http://ift.tt/1Gu3cLh". I know I have to configure my server so it redirects to the location of my app, but the app must show the right filter.

I'm sure there's an easy way to do this, but I can't manage to find it... Maybe I should design it differently ?

I DON'T WANT TO USE EMBER-DATA TO FILTER MY MARKERS, I REALLY WANT TO USE THE SERVER API

Thanks!