DEMO 5-1: Interactive Map Generation Using Gradio and Leafmap

import gradio as gr
import leafmap.foliumap as leafmap

# Define a function to generate a map based on provided parameters
def generate_map(zoom_level, maptype="Esri.WorldStreetMap",coordsy='', coordsx=''):
    if coordsy == '' and coordsx == '':
        coordsy = 40
        coordsx = 116.3
    print(maptype)

    # Create a map object centered at the given coordinates with the specified zoom level
    map = leafmap.Map(location=(coordsy, coordsx), zoom=zoom_level)
    map.add_basemap(maptype)
    return map.to_gradio()    # Return the map in html format

  
with gr.Blocks() as demo:
    gr.HTML("""
            <center> 
            <h1> General a map 🗺️ </h1>
            <b> jason.yu.mail@qq.com  📧<b>
            </center>
            """)      
    with gr.Row():
      with gr.Row():
        coordinates_input_y = gr.Textbox(value='',placeholder=40,label="Center coordinate latitude",lines=1)
        coordinates_input_x = gr.Textbox(value='',placeholder=116.3,label="Center coordinate longtitude",lines=1)
        zoom_level_input = gr.Slider(value=9,minimum=4,maximum=15,step=1,label="choose zoom level",interactive=True)

    with gr.Row():
      maptype=gr.Dropdown(
              choices=[
                  "Esri.NatGeoWorldMap",
                  "Esri.WorldGrayCanvas",
                  "Esri.WorldImagery",
                  "Esri.WorldShadedRelief",
                  "Esri.WorldStreetMap",
                  "Esri.WorldTerrain",
                  "Esri.WorldTopoMap",
              ],value="Esri.WorldStreetMap",interactive=True,label="Basemap")
      map_button = gr.Button("Generate",scale=1)
    with gr.Row():
      map_output = gr.HTML() # Define the output as an HTML object

    map_button.click(generate_map, inputs=[zoom_level_input,maptype,coordinates_input_y,coordinates_input_x], outputs=[map_output])

demo.queue().launch() # Start multi-thread processing mode