map.js.coffee

@Arc.module "Entities", (Entities, App, Backbone, Marionette, $, _) ->
  class Entities.Map extends Entities.Model
    initialize: ()->
      $.getJSON "locations/2/geometries.json", (data) ->
        this.zones = data
        App.MapApp.Show.Controller.showMap(this)

map_app.js.coffee

@Arc.module "MapApp", (MapApp, App, Backbone, Marionette, $, _) ->
  @startWithParent = false
  # were creating a private variable called API
  API =
    createMap: ->
      new App.Entities.Map
  	showMap: ->
  	  MapApp.Show.Controller.showMap()

    
  MapApp.on "start", ->
    API.createMap()

view.js.coffee

@Arc.module "MapApp.Show", (Show, App, Backbone, Marionette, $, _) ->
  class Show.Map extends Marionette.ItemView
    id: "map"
    template: "map/templates/map"
    
    render: ()->
      this.$el.width($(App.mainRegion.el).width()*.9)
      this.$el.height($(App.mainRegion.el).width()*.618)
      
      zoneDefaultStyle = new OpenLayers.Style({
      'fillColor': '#EAEDC2',
      'strokeColor': '#8A9676',
      'fillOpacity': .9
      })
      
      zoneSelectStyle = new OpenLayers.Style({
      'fillColor': '#37FDFC',
      'strokeColor': '#00CDCD',
      'fillOpacity': .5
      })
      
      zoneStyleMap = new OpenLayers.StyleMap(
        'default': zoneDefaultStyle
        'select': zoneSelectStyle
      )
      options = { div: this.el, units: "dd", numZoomLevels: 25, fractionalZoom: true, allOverlays: true }
      map = new OpenLayers.Map(options)
      
      zones = this.model.zones
      wktLayer = new OpenLayers.Layer.Vector("zones", styleMap: zoneStyleMap)
      map.addLayer(wktLayer)
      
      for zone in zones
        if zone.geometries.length == 0
          continue
        for geometry in zone.geometries
          polygonFeature = new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT(geometry.geom),
          {state: null, id: zone.id, polyid: '#440700', rules_url: zone.rules_url, name: zone.name})
          wktLayer.addFeatures(polygonFeature)
            
      #zoom to extent of all zones      
      b = wktLayer.getDataExtent()
      b.top = b.top + 2
      b.bottom = b.bottom - 2
      b.right = b.right + 2
      b.left = b.left - 2
      map.zoomToExtent(b)
      this

I had to pass this.el as the div to the options hash creating the map. this.$el did not work. I'm a little confused on that relationship.

The basic idea behind the code is when out main app starts, we start the MapApp which instantiates a map model. On instantiation, this model gets the relevant information from the server. Once the ajax call is complete, it needs to tell the controller that it is ready for drawing. We should probably be using some kind of event, but I just wanted to get this working.

In your last example on SO, http://stackoverflow.com/questions/14925913/how-can-i-set-up-openlayers-to-use-backbone-js/21120451?noredirect=1#comment32883234_21120451, you mention the views would be layers on the map. Would the map still be a Backbone object that is capable of listening to and firing events?

Thanks for the help. I really like the idea of using views to update OpenLayers, I just want to make sure I don't shoot myself in the foot too badly.

this.el is the raw DOM node. this.$el is the same node but wrapped in a jQuery object. i.e. it's probably created behind the scenes using this.$el = $(this.el);

OpenLayers 2.x is independent of jQuery so it wouldn't know what to do with a jQuery object.

What kind of information does your map model contain?

@collin - Right now, my map doesn't have anything in it. I'm currently working on what belongs where.

I envision my map as having 2 layers. The first layer would be zones. The second layer will be tracked points. Rereading your answer and reading over some other stuff online, it's looking like maybe I should have one view per layer. The zone layer would have a collection of zones. The tracked point layer would have a collection of tracked points. This way, if a zone or tracked point was added, the collection would notify the view to update itself.

The thing I can't wrap my brain around is when to initialize the map. The map has to exist in order for these layers to be added to it, but to initialize a map, you have to provide a dom element. So does the map just always "exist" and gets passed around? Or is there a view for the map that takes care of its actual rendering and display?

PS - Your profile says you are in Boulder. That the case?