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

@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?