{
  "styles": {
    "title": {
      "font-style": "bold",
      "font-size": 15,
      "padding-top": 15,
      "padding-left": 10,
      "color": "#666",
      "background-color": "#ddd"
    },
    "subtitle": {
      "lines": 0,
      "font-size": 13,
      "padding-bottom": 4,
      "padding-left": 10,
      "color": "#999",
      "background-color": "#ddd"
    }
  },
  "controller": "MistMapDemoController",
  "layout": {
    "style": {
      "direction": "vertical"
    },
    "children": [
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "基本用法"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "text": "展示一个基本地图"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "map",
            "style": {
              "height": 200,
              "region": {
                "latitude": 30.2795924,
                "longitude": 120.0228532,
                "latitude-delta": 0.005,
                "longitude-delta": 0.005
              }
            }
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "map-type"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "text": "切换地图类型，默认为 default"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "map",
            "style": {
              "height": 200,
              "map-type": "satellite",
              "region": {
                "latitude": 30.2795924,
                "longitude": 120.0228532,
                "latitude-delta": 0.005,
                "longitude-delta": 0.005
              }
            }
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "shows-user-location, follow-user-location"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "text": "shows-user-location 展示用户位置，follow-user-location 跟随用户位置，默认均为 false"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "map",
            "style": {
              "height": 200,
              "shows-user-location": true,
              "follow-user-location": true
            }
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "Annotation"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "text": "简单的 annotation 及其各种事件展示，on-annotation-press，on-annotation-focus，on-annotation-blur，on-annotation-drag-state-change 等"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "map",
            "style": {
              "height": 200,
              "region": {
                "latitude": 30.2795924,
                "longitude": 120.0228532,
                "latitude-delta": 0.005,
                "longitude-delta": 0.005
              },
              "annotations": [
                {
                  "latitude": 30.2795924,
                  "longitude": 120.0228532,
                  "title": "Alibaba",
                  "subtitle": "Xixi Park",
                  "draggable": true
                }
              ]
            },
            "on-annotation-press": {
              "onEventWithName:body:": "on-annotation-press"
            },
            "on-annotation-focus": {
              "onEventWithName:body:": "on-annotation-focus"
            },
            "on-annotation-blur": {
              "onEventWithName:body:": "on-annotation-focus"
            },
            "on-annotation-drag-state-change": {
              "onEventWithName:body:": "on-annotation-drag-state-change"
            }
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "Annotation"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "text": "定制 annotation 图片"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "map",
            "style": {
              "width": "100%",
              "height": 200,
              "shows-annotation-callouts": true,
              "region": {
                "latitude": 30.2726853,
                "longitude": 120.124668,
                "latitude-delta": 0.005,
                "longitude-delta": 0.005
              },
              "annotations": [
                {
                  "latitude": 30.2726863,
                  "longitude": 120.125968,
                  "title": "Alipay",
                  "subtitle": "No.18 Wantang Road",
                  "image": "mist.bundle/icon"
                }
              ]
            }
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "Overlay"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "text": "overlay 的基本用法"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "map",
            "style": {
              "width": "100%",
              "height": 200,
              "region": {
                "latitude": 30.2795924,
                "longitude": 120.0228532,
                "latitude-delta": 0.01,
                "longitude-delta": 0.01
              },
              "overlays": [
                {
                  "stroke-color": "red",
                  "line-width": 6,
                  "coordinates": [
                    {
                      "latitude": 30.279992,
                      "longitude": 120.020510
                    },
                    {
                      "latitude": 30.282609,
                      "longitude": 120.030075
                    },
                    {
                      "latitude": 30.277707,
                      "longitude": 120.031404
                    },
                    {
                      "latitude": 30.276104,
                      "longitude": 120.021877
                    },
                    {
                      "latitude": 30.279992,
                      "longitude": 120.020510
                    }
                  ]
                }
              ]
            }
          }
        ]
      }
    ]
  }
}