     @path = d3.geo.path()
       .projection @projection
 
+    dragstarted = (d) ->
+      #stopPropagation prevents dragging to "bubble up" which triggers same event for all elements below this object
+      d3.event.sourceEvent.stopPropagation()
+      d3.select @
+        .classed 'dragging', true
+
+    dragged = =>
+      @projection.rotate [d3.event.x, -d3.event.y]
+      @svg.selectAll('path').attr d: @path
+
+    dragended = (d) ->
+      d3.select @
+        .classed 'dragging', false
+
+    @drag = d3.behavior.drag()
+      .origin =>
+        r = @projection.rotate()
+        {x: r[0], y: -r[1]}
+      .on 'drag', dragged
+      .on 'dragstart', dragstarted
+      .on 'dragend', dragended
+
     graticule = d3.geo.graticule()
 
     @svg = d3.select el[0][0]

        .attr "viewBox", "0,0,500,500"
        .attr "width", @width
        .attr "height", @height

    @svg.append "path"
      .datum graticule

      .datum data
      .attr
        class: "nominal #{newClass}"

  draw: =>
    @frame.selectAll 'path'
