create_mapView.coffee

MyApp =
  method: require '/js/method'
$ = MyApp
 
uiStyle =
  # 店舗情報レイヤー
  mapSubView:
    top: 0
    height: '88dp'
    backgroundGradient:
      type: 'linear'
      colors: [
        { position: 0.00, color: '#666' }
        { position: 1.00, color: '#000' }
      ]
    opacity: .8
  # 店舗サムネイル
  shopThumb:
    top: '12dp'
    left: '12dp'
    width: '64dp'
    height: '64dp'
    backgroundColor: '#fff'
    borderRadius: 10
  # 店舗名
  shopName:
    top: '12dp'
    left: '88dp'
    height: '16dp'
    color: '#fff'
    font:
      fontSize: 16
      fontWeight: 'bold'
  # 店舗住所
  shopAddress:
    top: '40dp'
    left: '88dp'
    height: '44dp'
    color: '#fff'
    font:
      fontSize: 14
  # 現在地検索ボタン
  mapAim:
    image: '/images/map_aim.png'
    right: '64dp'
    bottom: '10dp'
    width: '44dp'
    height: '44dp'
    borderRadius: 10
    backgroundColor: '#fff'
  # 店舗検索ボタン
  mapShop:
    image: '/images/map_shop.png'
    right: '10dp'
    bottom: '10dp'
    width: '44dp'
    height: '44dp'
    borderRadius: 10
    backgroundColor: '#fff'
 
 
 
# params.latitude
# params.longitude
# params.name
# params.shopThumb
# params.address
# params.subAddress
 
createMapView = (params)->
  # 定数の所得
  DOMAIN_PATH = Ti.App.Properties.getString 'DOMAIN_PATH'
 
  baseTitle = '周辺地図'
  baseWin = do Ti.UI.createWindow
  baseWin.backButtonTitle = '戻る'
  if Ti.App.isiOS
    $.method.navBarStyle baseWin, baseTitle
 
  baseView = do Ti.UI.createView
 
  # 利用目的
  Ti.Geolocation.purpose = '店舗検索'
 
  # 現在地のピン
  mapAnnoAim = Ti.Map.createAnnotation
    title: '現在地'
    animate: true
    pincolor: Ti.Map.ANNOTATION_PURPLE
 
  # 現在地のピンの位置情報所得
  if Ti.Geolocation.locationServicesEnabled
    Ti.Geolocation.addEventListener 'location', (e)->
      if !e.success || e.error
        alert '位置情報が取得できませんでした'
        return
      lat = e.coords.latitude
      lon = e.coords.longitude
      mapAnnoAim.latitude = lat
      mapAnnoAim.longitude = lon
      return
 
  # 対象のピンの位置情報
  mapAnno = Ti.Map.createAnnotation
    latitude: params.latitude
    longitude: params.longitude
    title: params.name
    subtitle: params.subAddress
    animate: true
    pincolor: Ti.Map.ANNOTATION_RED
 
  # 地図作成
  mapView = Ti.Map.createView
    top: '88dp'
    mapType: Ti.Map.STANDARD_TYPE
    region:
      latitude: params.latitude
      longitude: params.longitude
      latitudeDelta: 0.02
      longitudeDelta: 0.02
    animate: true
    regionFit: true
    annotations: [mapAnnoAim, mapAnno]
 
  # 店舗情報レイヤー
  mapSubView = Ti.UI.createView uiStyle.mapSubView
 
  # 店舗サムネイル
  shopThumb = Ti.UI.createImageView uiStyle.shopThumb
  shopThumb.image = "#{DOMAIN_PATH}shops/img_thumb/shop#{params.id}.jpg"
 
  # 店舗名
  shopName = Ti.UI.createLabel uiStyle.shopName
  shopName.text = params.name
 
  # 店舗住所
  shopAddress = Ti.UI.createLabel uiStyle.shopAddress
  shopAddress.text = params.address
 
  # 現在地検索ボタン
  mapAim = Ti.UI.createButton uiStyle.mapAim
  # 店舗検索ボタン
  mapShop = Ti.UI.createButton uiStyle.mapShop
 
  # ピンの選択（default）
  mapView.selectAnnotation mapAnno
 
  # ピンの選択
  selectPin = (pinName)->
    mapView.selectAnnotation null
    mapView.selectAnnotation pinName
    return
 
  mapAim.addEventListener 'click', (e)->
    selectPin mapAnnoAim
    return
 
  shopThumb.addEventListener 'click', (e)->
    selectPin mapAnno
    return
 
  mapShop.addEventListener 'click', (e)->
    selectPin mapAnno
    return
 
 
  baseView.add mapView
  baseView.add mapSubView
  baseView.add shopThumb
  baseView.add shopName
  baseView.add shopAddress
  baseView.add mapAim
  baseView.add mapShop
 
  baseWin.add baseView
 
  Ti.App.tabGroup.tabs[0].open baseWin
 
  return
 
 
exports.create = createMapView