openlayers with some backbone

after_layer.js

Layer = Backbone.Model.extend();
Layer.prototype.initialize = function() {
    var lyr = new olCls(this.get('name'), this.get('url'), opts);
    this.set({ olLayer: lyr });
};
LayerView.prototype.render = function() {
    var view = this;
    var trucks = new Layer({name: 'Vehicles');
    view.map.addLayer(trucks);
    // refresh the vehicles and turn them into markers
    window.setInterval(function() {
        vehicles.fetch();
        var layer = trucks.get('olLayer');
        view.map.clearMarkers(layer);
        vehicles.each(function(v) {
            var xy = new OpenLayers.LonLat(v.get('X'), v.get('Y'));
            var m = new OpenLayers.Marker(xy, vehicles.icon.clone());
            layer.addMarker(m);
        });
    }, 60000);
};

after_vehicle.js

Vehicle = Backbone.Model.extend();
Vehicles = Backbone.Collection.extend({
    url: 'Vehicle'
});
Vehicles.prototype.initialize = function() {
    this.on('reset', this.project, this);  // reproject on fetch/reset
};
Vehicles.prototype.project = function(sr, outsr) {
    var coordinates = _.zip(this.pluck("X"), this.pluck("Y"));  // pluck rules
    var data = {
        geometries: coordinates.toString(),
        inSR: this.insr,
        outSR: this.displaysr,
        f: "json"
    };
    $.getJSON(this.projecturl, data, function(d){  // maintains order
        if (d["geometries"]) {
            var geoms = d["geometries"];
            for (var i = geoms.length - 1; i >= 0; i--) {
                vehicles.at(i).set({X: geoms[i].x, Y: geoms[i].y}, {silent:true});
            }
        }
    });
};

before.js

var getLayers = function(cfg) {
    var proxy = cfg.proxy;
return {
    vehicleLayer: function() {
            var refresh = function() {
                $.getJSON('Vehicle', function(d) {  // pull vehicle data from the server
                    var trucks = [];
                    var truckdata = {};
                    for (var i = 0; i < d.length; i++) {
                        trucks.push(d[i].X);
                        trucks.push(d[i].Y);
                        truckdata[i] = d[i].FleetNumber;
                    }
                    $.getJSON(proxy + "Project",  // it's not in the correct projection, so reproject it
                    { f: "json",
                        geometries: trucks.toString(),
                        inSR: 4326,
                        outSR: 102100
                    }, function(data) {  // now turn that vehicle data into points on the map
                        if (data["geometries"]) {
                            var icon = new OpenLayers.Icon(png, msize, offset);
                            var layer = MAP.getLayersByName("Vehicles")[0];
                            MAP.clearMarkers(layer);
                            var mlib = AgsMarkers({});
                            var geom = data["geometries"];
                            for (var i = geom.length - 1; i >= 0; i--) {
                                var xy = new OpenLayers.LonLat(geom[i].x, geom[i].y);
                                var m = new OpenLayers.Marker(xy, icon.clone());
                                layer.addMarker(m);
                            }
                        }
                    });
                });
                window.setTimeout(refresh, 60000);  // and keep doing it
            };
            refresh();
            return new OpenLayers.Layer.Markers('Vehicles');
        } ()
        // ... lots of other layers ...
    }
};