       that.onclick(event.clientX - @offsetLeft + nX, event.clientY - @offsetTop + nY)
 
   loadImage: () ->
-    imageUrl = @tag.attr('data-src')
+    @imageUrl = @tag.attr('data-src')
     @bgImg = new Image()
+    that = @
+    @bgImg.onload = () ->
+      if that.layers.length == 0
+        that.setImage()
+        that.onload()
+      else
+        that.loadLayerImages()
+
+    @frameUrl = @tag.attr('data-frame')
+    if @frameUrl
+      bgName = 'map'+@tag.attr('data-area')+'-'+@tag.attr('data-info')
+      @bgLayers = [bgName, bgName+'_point']
+      $.getJSON @frameUrl, (data) ->
+        data.forEach (d) ->
+          that.frames[d.name] = {pos: {x: d.posX, y: d.posY}, width: d.width, height: d.height}
+        that.bgImg.src = that.imageUrl
+    else
+      @bgLayers = []
+      @bgImg.src = @imageUrl
+
+  loadLayerImages: () ->
     @layerImgs = []
-    that = @
-    @bgImg.onload = () ->
-      that.setImage()
-      layerCount = 0
-      if layerCount == that.layers.length
-        return that.onload()
-
-      that.layers.forEach (s) ->
-        img = new Image()
-        img.onload = ->
-          layerCount++
-          if layerCount == that.layers.length
-            that.onload()
-        img.src = imageUrl + '?suffix=' + s
-        that.layerImgs[s] = img
-    @bgImg.src = imageUrl
+    layerCount = 0
+    that = @
+    @layers.forEach (s) ->
+      img = new Image()
+      img.onload = () ->
+        layerCount++
+        if that.layers.length == layerCount
+          that.setLayers()
+          that.onload()
+
+      that.layerFrames[s] = {}
+      that.layerImgs[s] = img
+      $.getJSON that.frameUrl, {suffix: s}, (data) ->
+        data.forEach (d) ->
+          that.layerFrames[s][d.name] = {pos: {x: d.posX, y: d.posY}, width: d.width, height: d.height}
+        img.src = that.imageUrl + '?suffix=' + s
 
   setImage: () ->
     @ctx.globalAlpha = 1.0
     that = @
-    @bgLayers.forEach (name) ->
-      frame = that.frames[name]
-      that.ctx.drawImage(that.bgImg, frame.pos.x, frame.pos.y, frame.width, frame.height, 0, 0, frame.width, frame.height)
+    if @bgLayers.length != 0
+      @bgLayers.forEach (name) ->
+        frame = that.frames[name]
+        that.ctx.drawImage(that.bgImg, frame.pos.x, frame.pos.y, frame.width, frame.height, 0, 0, frame.width, frame.height)
+    else
+      @ctx.drawImage(@bgImg, 0, 0, @bgImg.width, @bgImg.height, 0, 0, @bgImg.width, @bgImg.height)
 
   setLayers: () ->
     that = @

          infoData[0].forEach (d) ->
            that.cellInfos[d.alphabet] = d.cell
            that.toAlpha[d.cell] = d.alphabet
        d.resolve
      deferr.push d.promise

      @layers.forEach (s) ->
        d = new $.Deferred
        $.when(
          $.getJSON(posUrl + '?suffix=' + s),
          $.getJSON(labelUrl + '?suffix=' + s)
        ).done (posData, labelData) ->
          posData[0].forEach (d) ->
            that.positions[d.cell] = {x: d.posX, y: d.posY}
            frameName = d.routeName ? 'route_'+d.cell+'_1'
            if d.routeX && d.routeY
              that.image.setLayerPoint(s, frameName, {x: d.posX + d.routeX, y: d.posY + d.routeY})
          labelData[0].forEach (d) ->
            that.image.setLayerPoint(s, d.imageName, {x: d.posX, y: d.posY})
          d.resolve
        deferr.push d.promise

      $.when.apply($,deferr).done ->
        that.onload()

  setPoint: (cell, fixed) ->
    if fixed

    p ?= @positions[@cellInfos[cell]]
    p

  runClick: (x, y) =>
    cell = _.findIndex @positions, (pos) ->
      (pos.x - DefaultSize / 2) < x and
        x < (pos.x + DefaultSize / 2) and
