Blog post for marionette.js with ESRI mapping API

Inlets.js

RPAT.module('Inlets', function(Inlets, App, Backbone, Marionette, $, _) {

    // Inlet Model
    // -----------

    Inlets.Inlet = Backbone.Model.extend({

        idAttribute: "OBJECTID",

        defaults: {
            selected: false,
            visible: true,
            highlighted: false
        }
    });

    Inlets.InletList = Backbone.Collection.extend({
        model: Inlets.Inlet,

        initialize: function(map, options) {
            this.esriMap = map;
            this.options = options;
            this.fetch();
            //Listen for the map changing extent and filter list accordingly
            App.vent.on('map:extentChange', function(extent){
                this.filter(extent);
            }, this);
        },

        fetch: function() {
            var url = "http://155.82.160.6/arcgis/rest/services/Oceans/CIRP_Inlets_Viewer/MapServer/0";
            var content = "<b>${INLET_NAME}</b><br />" +
                "<a href='#inlets/${OBJECTID}'>Let's get more info...</a>";
            var infoTemplate = new esri.InfoTemplate("Inlets", content);
            this.inletLayer = new esri.layers.FeatureLayer(this.options.mapServiceUrl, {
                mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
                outFields: ["OBJECTID", "INLET_NAME"],
                infoTemplate: infoTemplate
            });
            var that = this;
            dojo.connect(this.inletLayer, "onUpdateEnd", function(error){
                if (error) {
                    // TODO: Provide a cleaner UI affect for layer failure
                    alert('Error loading map. Please try again later');
                }
                //create two parallel arrays that contain attributes and a geometry
                var graphicItems = _.pluck(this.graphics, 'attributes');
                var geoms = _.pluck(this.graphics, 'geometry');
                //merge geometry into attributes
                items = _.map(graphicItems, function(item, i){
                    item.geometry = geoms[i];
                    return item;
                });
                that.reset(items);
            });
            defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color(this.options.defaultSymbol));
            defaultSymbol.setSize(8);
            this.inletLayer.setRenderer(new esri.renderer.SimpleRenderer(defaultSymbol));
            this.esriMap.addLayer(this.inletLayer);
            //Currently not using this var, but it may be useful down the line
            this.currentInletId = null;

            dojo.connect(this.inletLayer, "onClick", function(evt){
                //Send event that includes the current highlighted item along with the new item to highlight
                var args = {
                    id: evt.graphic.attributes.OBJECTID,
                    formerId: this.currentInletId,
                    geom: evt.graphic.attributes.geometry
                };
                App.vent.trigger("inlet:onClick", args);
                //Once event has been triggered, reset the currentInlet variable
                this.currentInletId = evt.graphic.attributes.OBJECTID;
            });
        },

        filter: function(extent) {
            //Set all models visibility attribute to false
            //If geom falls within extent, set visibility = true
            _.each(this.models, function(inlet){
                inlet.set({'visible': false});
                if (extent.contains(inlet.get('geometry'))){
                    inlet.set({'visible': true});
                }
            }, this);
        },

        toggleHighlight: function(id) {
            item = this.get(id);
            toggle = !item.get('highlighted');
            item.set({'highlighted': toggle});
        },

        highlightPoint: function(id) {
            //TODO: Highlight point when hovering over list item
        },

        // Sorts our collection
        comparator: function(cat) {
            return cat.get(this.options.orderBy);
        }    });
});

MapModel.js

RPAT.module('Map', function(Map, App, Backbone, Marionette, $, _) {

    // Map Model
    // -----------

    Map.MapModel = Backbone.Model.extend({

        initialize: function() {
            // App.vent.on('inlet:focus', this.zoomToPoint(this.geometry), this);
            App.vent.on('inlet:focus', function(model){
                this.zoomToPoint(model.get('geometry'));
            }, this);
        },

        getMap: function(mapConfig) {
            this.map = new esri.Map('map-container', {
                center: mapConfig.mapCenter,
                zoom: mapConfig.zoom,
                sliderStyle: 'small'
             });
            this.initBaseLayers(mapConfig.basemaps);
            dojo.connect(this.map, "onExtentChange", function(){
                App.vent.trigger('map:extentChange', this.extent);
            });
            return this.map;
        },

        initBaseLayers: function(basemaps) {
            _.each(basemaps, function(layer){
                switch(layer.type){
                    case 'ArcGISTiledMapServiceLayer':
                        var lyr = new esri.layers.ArcGISTiledMapServiceLayer(layer.url,
                            {
                                id: 'basemap_' + layer.name,
                                visible: layer.visible
                            });
                        this.map.addLayer(lyr);
                        break;
                    default:
                        alert(layer.type + ' layers not currently supported for basemaps');
                        break;
                }
            }, this);
        },

        zoomToPoint: function(geom) {
            this.map.centerAndZoom(geom, 13);
        }
    });
});

Sidebar.js

RPAT.module('Sidebar', function(Sidebar, App, Backbone, Marionette, $, _) {

    // Sidebar Router
    // -----------------
    //
    // Handle routes to show the selected inlet

    Sidebar.Router = Marionette.AppRouter.extend({
        appRoutes: {
            '': 'home',
            'inlets/:_id': 'inletDetails'
        }
    });

    // Sidebar Controller (Mediator)
    // ------------------------------
    //
    // Control the workflow and logic that exists at the application
    // level, above the implementation detail of views and models

    Sidebar.Controller = function(map, options) {
        this.layout = new App.Layout.Sidebar();
        App.sidebar.show(this.layout);
        this.inletList = new App.Inlets.InletList(map, options);
    };

    _.extend(Sidebar.Controller.prototype, {

        home: function() {
            this.inletList.on('reset', this.showInlets, this);
        },

        inletDetails: function(_id) {
            this.layout.inletSearch.close();
            this.layout.inletInfo.show(new App.Inlet.Views.InletInfoView({
                model: this.inletList.get(_id)
            }));
        },

        showInlets: function() {
            this.layout.inletSearch.show(new App.InletList.Views.ListView({
                collection: this.inletList
            }));
        }
    });

    Sidebar.addInitializer(function(options) {
        //Once map has been initialized, launch an InletList controller
        App.vent.on('map:init', function(map){
            var sideBarController = new Sidebar.Controller(map, options.inletConfig);
            new Sidebar.Router({
                controller: sideBarController
            }, this);
            App.vent.on('inlet:onClick', function(args){
                this.inletList.toggleHighlight(args.id);
                if (args.formerId) { this.inletList.toggleHighlight(args.formerId); }
            }, sideBarController);
        });
    });
});