from flask import Flask
from keplergl import KeplerGl

app = Flask(__name__)

@app.route('/')
def index():
  
  map_1 = KeplerGl()
  
  return map_1._repr_html_()

if __name__ == '__main__':
  app.run(debug=True)

import dash
from keplergl import KeplerGl
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import requests

app = dash.Dash(__name__)

app.layout = html.Div(
  [
    html.H1("Dash结合Kepler.gl："),
    dcc.Dropdown(
      id='demo-dropdown',
      options=[
        {'label': '重庆', 'value': '重庆'}
      ],
      style={'width': '300px'}
    ),
    html.Iframe(id='iframe',
          style={'height': '800px', 'width': '1900px'})
  ]
)

@app.callback(
  Output('iframe', 'srcDoc'),
  [Input('demo-dropdown', 'value')]
)
def switch_area(selected_area):

  if selected_area == '重庆':
    map_1 = KeplerGl(data={
               selected_area: requests.get('https://geo.datav.aliyun.com/areas_v2/bound/500000_full.json').json()
             },
             config={
               "mapState": {
                 "bearing": 0,
                 "dragRotate": False,
                 "latitude": 29.751819,
                 "longitude": 107.441431,
                 "pitch": 0,
                 "zoom": 6,
                 "isSplit": False
               }
             })

    return map_1._repr_html_().decode()

  else:
    map_1 = KeplerGl(data={
               selected_area: requests.get('https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json').json()
             },
             config={
               "mapState": {
                 "bearing": 0,
                 "dragRotate": False,
                 "latitude": 29.751819,
                 "longitude": 107.441431,
                 "pitch": 0,
                 "zoom": 3,
                 "isSplit": False
               }
             })

    return map_1._repr_html_().decode()

if __name__ == '__main__':
  app.run_server()