main.js

(function ($) {

var Server = Backbone.Model.extend({
  getLayers: function() {
    if(!this.layers) {
      this.layers = new Layers({server: this});
    }
    this.layers.fetch();
    return this.layers;
  }
});

var Servers = Backbone.Collection.extend({
  model: Server,
  url: 'http://mapa.ign.gob.ar/idera.jquery/servicios_wms.json'
});

var Layer = Backbone.Model.extend();

var Layers = Backbone.Collection.extend({
  model: Layer,
  url: function() {
    return this.server.get('url') + 'service=wms&request=GetCapabilities';
  }
});

var ServersView = Backbone.View.extend({
  events: {
    'change': 'serverSelected'
  },

  initialize: function() {
     _.bindAll(this, 'addServer', 'serverSelected');
    this.collection.bind("add", this.addServer);
  },

  addServer: function (server) {
    var option = new ServerView({model: server});
    this.$el.append(option.render().el);
  },

  serverSelected: function() {
    this.collection.get(this.$el.val()).getLayers();
  }
});

var ServerView = Backbone.View.extend({
  tagName: 'option',

  initialize: function() {
    _.bindAll(this, 'render');
  },

  render: function() {
    this.$el.val(this.model.get('id'));
    this.$el.text(this.model.get('title'));
    return this;
  }
});

App = _.extend({}, Backbone.Events);

var MapView = Backbone.View.extend({
  el: "#map",

  initialize: function () {

    // Create a map in the "map" div
    var map = L.map('map', {attributionControl: false}).setView([-35, -64], 4);

    // Create layers
    var sacc = L.tileLayer.wms("http://wms.ign.gob.ar/geoserver/gwc/service/wms?", {
      layers: 'argentina500k:argentina500k_satelital',
      format: 'image/png',
      transparent: true,
      attribution: "Instituto Gegráfico Nacional"
    });

    var argenmap = L.tileLayer.wms("http://wms.ign.gob.ar/geoserver/gwc/service/wms?", {
      layers: 'capabaseargenmap',
      format: 'image/png',
      transparent: true,
      attribution: "Instituto Gegráfico Nacional"
    });

    var minimap = L.tileLayer.wms("http://wms.ign.gob.ar/geoserver/gwc/service/wms?", {
      layers: 'capabaseargenmap',
      format: 'image/png',
      transparent: true,
      attribution: "Instituto Gegráfico Nacional"
    });

    baseLayers = {
      "Capa Base SIG 250": argenmap,
      "Satelital SAC-C": sacc
    };

    overlays = {
    };

    // Add default layer
    argenmap.addTo(map);

    // Add controls
    L.control.mousePosition({emptyString: ''}).addTo(map);
    L.control.scale({imperial: false}).addTo(map);
    L.control.minimap(minimap).addTo(map);
    L.control.locate().addTo(map);

    return this;
  }
});

var mapview = new MapView();

var servers = new Servers();
new ServersView({
  el: "#servers",
  collection: servers
});
servers.fetch();

})(jQuery);