{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 1080,
      "width": 1920
    },
    "loading": {
      "mode": "blocking"
    }
  },
  "root": {
    "children": [
      {
        "events": {
          "dom": {
            "onDoubleClick": {
              "config": {
                "script": "\t\n\tself.session.custom.transition \u003d 1\n\tself.session.custom.zoom \u003d 0.65\n\tself.session.custom.scale_x \u003d 0\n\tself.session.custom.scale_y \u003d 0\n\tself.session.custom.zoomto \u003d 1\n\t"
              },
              "scope": "G",
              "type": "script"
            },
            "onWheel": {
              "config": {
                "script": "\t\n\t\n\tif self.session.custom.zoom !\u003d 0.65 or event.deltaY \u003c 0:\n\t\tself.session.custom.transition \u003d 0\n\n\t\tif event.deltaY \u003e 0:\n\t\t\tdelta \u003d 1\n\t\telse:\n\t\t\tself.session.custom.clientX \u003d event.clientX\n\t\t\tself.session.custom.clientY \u003d event.clientY\n\t\t\tdelta \u003d -1\n\n\n\n\t\tnextScale \u003d self.session.custom.zoom - (delta * 0.5)\n\t\t\n\t\tratio \u003d 1 - nextScale / self.session.custom.zoom\n\t\tself.session.custom.scale_x +\u003d (self.session.custom.clientX - self.session.custom.scale_x) * ratio\n\t\tself.session.custom.scale_y +\u003d (self.session.custom.clientY - self.session.custom.scale_y) * ratio\n\t\tself.session.custom.zoom \u003d nextScale"
              },
              "scope": "G",
              "type": "script"
            }
          },
          "system": {
            "onStartup": {
              "config": {
                "script": "\t\n\tself.session.custom.scale_x \u003d 0\n\tself.session.custom.scale_y \u003d 0\n\tself.session.custom.zoom \u003d 0.65\n\tzoomPanOptions \u003d { \u0027animate\u0027: True, \u0027duration\u0027: 1, \u0027easeLinearity\u0027: 0.25, \u0027noMoveStart\u0027: False }\n\tself.panTo({\"lng\":self.session.custom.zoomer.lng,\"lat\":self.session.custom.zoomer.lat}, options \u003d zoomPanOptions)"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "domId": "Overview_MAP",
          "name": "Map"
        },
        "position": {
          "height": 1735,
          "rotate": {
            "anchor": "0% 0%",
            "angle": 0
          },
          "width": 2756.67
        },
        "propConfig": {
          "position.x": {
            "binding": {
              "config": {
                "expression": "0"
              },
              "type": "expr"
            }
          },
          "position.y": {
            "binding": {
              "config": {
                "expression": "0"
              },
              "type": "expr"
            }
          },
          "props.layers.ui.view[0].lat": {
            "binding": {
              "config": {
                "path": "session.custom.RotateText"
              },
              "transforms": [
                {
                  "fallback": 10.04,
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": 90,
                      "output": 10
                    },
                    {
                      "input": 270,
                      "output": 10
                    },
                    {
                      "input": 180,
                      "output": 10.17
                    }
                  ],
                  "outputType": "scalar",
                  "type": "map"
                }
              ],
              "type": "property"
            }
          },
          "props.layers.ui.view[0].lng": {
            "binding": {
              "config": {
                "path": "session.custom.RotateText"
              },
              "transforms": [
                {
                  "fallback": 10.09,
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": 90,
                      "output": 10.2
                    },
                    {
                      "input": 270,
                      "output": 10.27
                    },
                    {
                      "input": 180,
                      "output": 10.2
                    }
                  ],
                  "outputType": "scalar",
                  "type": "map"
                }
              ],
              "type": "property"
            }
          },
          "props.style.transform": {
            "binding": {
              "config": {
                "expression": "\"translate(\" + {session.custom.scale_x} + \"px,\" + {session.custom.scale_y} + \"px) \" + \"scale(\" + {session.custom.zoom} + \") \" "
              },
              "type": "expr"
            }
          },
          "props.style.transition": {
            "binding": {
              "config": {
                "expression": "\"all \" + {session.custom.transition} + \"s ease-in-out\""
              },
              "type": "expr"
            }
          },
          "props.zoom_changed": {
            "binding": {
              "config": {
                "expression": "if({session.custom.zoom} \u003c\u003d 0.65, 0.65,0)"
              },
              "type": "expr"
            },
            "onChange": {
              "enabled": null,
              "script": "\t\n\tif self.session.custom.zoom \u003c\u003d 0.6:\n\t\tself.session.custom.transition \u003d 1\n\t\tself.session.custom.zoom \u003d 0.6\n\t\tself.session.custom.scale_x \u003d 0\n\t\tself.session.custom.scale_y \u003d 0\n\t\tself.session.custom.zoomto \u003d 1\n\t\t"
            }
          },
          "props.zoomto": {
            "binding": {
              "config": {
                "path": "session.custom.zoomto"
              },
              "type": "property"
            },
            "onChange": {
              "enabled": null,
              "script": "\t\n\timport time\n\t\n    \tif self.session.custom.zoomto \u003d\u003d 1:\n\t   \t\tzoomPanOptions \u003d { \u0027animate\u0027: True, \u0027duration\u0027: 1, \u0027easeLinearity\u0027: 0.25, \u0027noMoveStart\u0027: False }\n\t   \t\tself.panTo({\"lng\":self.session.custom.zoomer.lng,\"lat\":self.session.custom.zoomer.lat}, options \u003d zoomPanOptions)\n\t   \t\tself.session.custom.zoomto \u003d 0\n"
            }
          }
        },
        "props": {
          "init": {
            "center": {
              "lat": 9.5,
              "lng": 11.25
            },
            "zoom": 10
          },
          "keyboardNav": false,
          "layers": {
            "raster": {
              "tile": [
                {
                  "WMS": {
                    "format": "image/jpeg",
                    "layers": "",
                    "styles": "",
                    "transparent": false,
                    "uppercase": false,
                    "version": "1.1.1"
                  },
                  "options": {
                    "attribution": "",
                    "crossOrigin": false,
                    "detectRetina": false,
                    "errorTileUrl": "",
                    "opacity": 1,
                    "subdomains": [
                      "a",
                      "b",
                      "c"
                    ],
                    "tileSize": {
                      "height": 256,
                      "width": 256
                    },
                    "tms": false,
                    "update": {
                      "interval": 200,
                      "whenIdle": false,
                      "whenZooming": true
                    },
                    "zIndex": 1,
                    "zoom": {
                      "max": 18,
                      "min": 0,
                      "native": {
                        "max": null,
                        "min": null
                      },
                      "offset": 0,
                      "reverse": false
                    }
                  },
                  "url": "",
                  "urlTemplateParams": {}
                }
              ]
            },
            "ui": {
              "view": [
                {
                  "params": {},
                  "path": "Windows/Graphics/A0_Overview",
                  "shadow": false,
                  "transparentBackground": false
                }
              ]
            }
          },
          "style": {
            "fontFamily": "Arial",
            "position": "absolute",
            "transform-origin": "0 0"
          },
          "zoom": {
            "animation": {
              "enabled": false
            },
            "controls": false,
            "max": 999,
            "min": 0,
            "onBoxZoom": false,
            "onDoubleClick": false,
            "onScrollWheel": false,
            "snap": 0
          }
        },
        "type": "ia.display.map"
      },
      {
        "children": [
          {
            "meta": {
              "name": "Label"
            },
            "position": {
              "height": 0.2667,
              "width": 0.6219,
              "x": 0.2638,
              "y": -0.0012
            },
            "props": {
              "style": {
                "color": "#FFFFFF",
                "fontFamily": "Arial",
                "fontSize": 16
              },
              "text": "Overview"
            },
            "type": "ia.display.label"
          },
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\tif self.session.custom.RotateText \u003d\u003d 270:\n\t\tself.session.custom.RotateText \u003d 0\n\telse:\t\n\t\tself.session.custom.RotateText \u003d self.session.custom.RotateText + 90\n\t\t\n\tif self.session.custom.RotateText \u003d\u003d 270 or self.session.custom.RotateText \u003d\u003d 90:\n\t\tself.session.custom.zoom \u003d 0.9\n\t\tself.session.custom.scale_x \u003d -430\n\t\tself.session.custom.scale_y \u003d -250\n\t\tself.session.custom.zoomto \u003d 1\n\telse:\t\n\t\tself.session.custom.zoom \u003d 0.65\n\t\tself.session.custom.scale_x \u003d 0\n\t\tself.session.custom.scale_y \u003d 0\n\t\tself.session.custom.zoomto \u003d 1\t\n\n\t"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "Rotation",
              "tooltip": {
                "style": {
                  "backgroundColor": "#2B2B2BBF",
                  "color": "#FFFFFF",
                  "fontSize": 14,
                  "textAlign": "left",
                  "white-space": "pre"
                },
                "text": "To Rotate overview, you \nneed click on this button."
              }
            },
            "position": {
              "height": 0.2584,
              "width": 0.1721,
              "x": 0.7887,
              "y": 0.6502
            },
            "props": {
              "source": "/system/images/MyIcon/Refresh32.png",
              "style": {
                "classes": "table/highlight",
                "cursor": "pointer"
              }
            },
            "type": "ia.display.image"
          },
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\t\n\tself.session.custom.transition \u003d 0\n\tnextScale \u003d self.session.custom.zoom + 0.5\n\tratio \u003d 1 - nextScale / self.session.custom.zoom\n\tself.session.custom.scale_x +\u003d (960 - self.session.custom.scale_x) * ratio\n\tself.session.custom.scale_y +\u003d (540 - self.session.custom.scale_y) * ratio\n\tself.session.custom.zoom \u003d nextScale"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "ZoomPlus",
              "tooltip": {
                "enabled": true,
                "style": {
                  "backgroundColor": "#2B2B2BBF",
                  "color": "#FFFFFF",
                  "fontSize": 14,
                  "textAlign": "left",
                  "white-space": "pre"
                },
                "text": "To Zoom In overview, \nyou need click on this \nbutton (plus)"
              }
            },
            "position": {
              "height": 0.2501,
              "width": 0.1721,
              "x": 0.6194,
              "y": 0.27
            },
            "propConfig": {
              "meta.visible": {
                "binding": {
                  "config": {
                    "expression": "!({../Slider.props.value}\u003e\u003d{../Slider.props.max})"
                  },
                  "type": "expr"
                }
              }
            },
            "props": {
              "source": "/system/images/MyIcon/plus32.png",
              "style": {
                "classes": "table/highlight",
                "cursor": "pointer"
              }
            },
            "type": "ia.display.image"
          },
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\t\n\tself.session.custom.transition \u003d 0\n\tnextScale \u003d self.session.custom.zoom - 0.5\n\tratio \u003d 1 - nextScale / self.session.custom.zoom\n\tself.session.custom.scale_x +\u003d (960 - self.session.custom.scale_x) * ratio\n\tself.session.custom.scale_y +\u003d (540 - self.session.custom.scale_y) * ratio\n\tself.session.custom.zoom \u003d nextScale"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "ZoomMinus",
              "tooltip": {
                "enabled": true,
                "style": {
                  "backgroundColor": "#2B2B2BBF",
                  "color": "#FFFFFF",
                  "fontSize": 14,
                  "textAlign": "left",
                  "white-space": "pre"
                },
                "text": "To Zoom Out overview, \nyou need click on this \nbutton (minus)"
              }
            },
            "position": {
              "height": 0.2584,
              "width": 0.1721,
              "x": 0.0139,
              "y": 0.2656
            },
            "propConfig": {
              "meta.visible": {
                "binding": {
                  "config": {
                    "expression": "!({../Slider.props.value}\u003c\u003d{../Slider.props.min})"
                  },
                  "type": "expr"
                }
              }
            },
            "props": {
              "source": "/system/images/MyIcon/minus32.png",
              "style": {
                "classes": "table/highlight",
                "cursor": "pointer"
              }
            },
            "type": "ia.display.image"
          },
          {
            "events": {
              "component": {
                "onActionPerformed": {
                  "config": {
                    "script": "\t\n\tself.session.custom.transition \u003d 0\n\tnextScale \u003d self.props.value\n\tratio \u003d 1 - nextScale / self.session.custom.zoom\n\tself.session.custom.scale_x +\u003d (960 - self.session.custom.scale_x) * ratio\n\tself.session.custom.scale_y +\u003d (540 - self.session.custom.scale_y) * ratio\n\tself.session.custom.zoom \u003d nextScale "
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "Slider",
              "tooltip": {
                "enabled": true,
                "style": {
                  "backgroundColor": "#2B2B2BBF",
                  "color": "#FFFFFF",
                  "fontSize": 14,
                  "textAlign": "left",
                  "white-space": "pre"
                },
                "text": "To Zoom In or Out overview, \nyou need move slider."
              }
            },
            "position": {
              "height": 0.2667,
              "width": 0.6663,
              "x": 0.0555,
              "y": 0.6502
            },
            "propConfig": {
              "props.labels.interval": {
                "binding": {
                  "config": {
                    "path": "this.props.step"
                  },
                  "type": "property"
                }
              },
              "props.style.display": {
                "binding": {
                  "config": {
                    "expression": "{parent.meta.visible}"
                  },
                  "transforms": [
                    {
                      "fallback": null,
                      "inputType": "scalar",
                      "mappings": [
                        {
                          "input": true,
                          "output": "flex"
                        },
                        {
                          "input": false,
                          "output": "none"
                        }
                      ],
                      "outputType": "scalar",
                      "type": "map"
                    }
                  ],
                  "type": "expr"
                }
              },
              "props.value": {
                "binding": {
                  "config": {
                    "path": "session.custom.zoom"
                  },
                  "type": "property"
                }
              }
            },
            "props": {
              "labels": {},
              "max": 5,
              "min": 1,
              "step": 0.1,
              "style": {
                "classes": "table/highlight"
              }
            },
            "type": "ia.input.slider"
          },
          {
            "meta": {
              "name": "Label_0"
            },
            "position": {
              "height": 0.2501,
              "width": 0.3276,
              "x": 0.2361,
              "y": 0.27
            },
            "propConfig": {
              "props.text": {
                "binding": {
                  "config": {
                    "expression": "round({session.custom.zoom} * 100+35) + \"%\""
                  },
                  "type": "expr"
                }
              }
            },
            "props": {
              "style": {
                "color": "#FFFFFF",
                "fontFamily": "Arial",
                "fontSize": 16
              }
            },
            "type": "ia.display.label"
          },
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\tif self.session.custom.RotateText \u003d\u003d 270 or self.session.custom.RotateText \u003d\u003d 90:\t\n\t\tself.session.custom.zoom \u003d 0.9\n\t\tself.session.custom.scale_x \u003d -430\n\t\tself.session.custom.scale_y \u003d -250\n\t\tself.session.custom.zoomto \u003d 1\n\telse:\t\n\t\tself.session.custom.zoom \u003d 0.65\n\t\tself.session.custom.scale_x \u003d 0\n\t\tself.session.custom.scale_y \u003d 0\n\t\tself.session.custom.zoomto \u003d 1\t"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "ReSize_Overview",
              "tooltip": {
                "enabled": true,
                "style": {
                  "backgroundColor": "#2B2B2BBF",
                  "color": "#FFFFFF",
                  "fontSize": 14,
                  "textAlign": "left",
                  "white-space": "pre"
                },
                "text": "To Zoom Out to full \nscreen mode overview, \nyou need double click \non the white area."
              }
            },
            "position": {
              "height": 0.2501,
              "width": 0.1721,
              "x": 0.8108,
              "y": 0.2784
            },
            "props": {
              "source": "/system/images/MyIcon/layer-resize-actual32.png",
              "style": {
                "classes": "table/highlight",
                "cursor": "pointer"
              }
            },
            "type": "ia.display.image"
          }
        ],
        "meta": {
          "name": "ZoomAndRotate",
          "tooltip": {
            "enabled": true
          }
        },
        "position": {
          "height": 119.97,
          "width": 180.1,
          "x": 1
        },
        "props": {
          "mode": "percent",
          "style": {
            "backgroundColor": "#2B2B2BBF",
            "transform": "translate3d(0,0,0)"
          }
        },
        "type": "ia.container.coord"
      },
      {
        "events": {
          "dom": {
            "onClick": {
              "config": {
                "script": "\tvisible \u003d self.getSibling(\"ZoomAndRotate\").meta.visible\n\tself.getSibling(\"ZoomAndRotate\").meta.visible \u003d not visible\n\t"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "setting",
          "tooltip": {
            "enabled": true,
            "style": {
              "backgroundColor": "#2B2B2BBF",
              "color": "#FFFFFF",
              "fontSize": 14,
              "textAlign": "left",
              "white-space": "pre"
            },
            "text": "To open Zoom setting, \nyou need click to this button."
          }
        },
        "position": {
          "height": 31.99,
          "rotate": {
            "anchor": "3132% 2519%"
          },
          "width": 34.94,
          "x": 3.99,
          "y": 5.88
        },
        "props": {
          "fit": {
            "mode": "percent"
          },
          "source": "/system/images/Builtin/icons/32/videocamera.png",
          "style": {
            "classes": "table/highlight",
            "cursor": "pointer"
          }
        },
        "type": "ia.display.image"
      }
    ],
    "meta": {
      "domId": "test",
      "name": "root"
    },
    "position": {
      "x": 0,
      "y": 0
    },
    "props": {
      "style": {
        "overflow": "hidden"
      }
    },
    "type": "ia.container.coord"
  }
}