maps not Show in Custom Control

[bobwatcherx]

Question

why maps not show in Custom controls . only show when i put code in page.add only

Code sample

from flet import *
import requests
import flet.map as map

api_key = "jdbjqwbdjqwbk"

class LocationFinder(Column):
    def __init__(self, page):
        super(LocationFinder, self).__init__()
        self.page = page
        self.locator = Geolocator()
        self.mylocation = Row()

        self.page.overlay.append(self.locator)



        self.map = map.Map(
            expand=True,
             configuration=map.MapConfiguration(
                initial_center=map.MapLatitudeLongitude(15, 10),
                initial_zoom=4.2,
                on_init=lambda e: print(f"Initialized Map"),
            ),
            layers=[
                map.TileLayer(
                    url_template="https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
                    on_image_error=lambda e: print("TileLayer Error"),
                ),
                map.MarkerLayer(
                    markers=[
                        map.Marker(
                            content=Icon(name="location_on"),
                            coordinates=map.MapLatitudeLongitude(30, 15),
                        ),
                        ]
                    )
            ]
        )

        self.controls=[
            ElevatedButton("get Location",
                on_click=self.get_mylocation
                ),
            self.mylocation,
             self.map

            
        ]

    def get_mylocation(self,e):
        loc = self.locator.get_current_position()
        self.mylocation.controls.append(
            Container(
                content=Row([
                    Text(loc.latitude),
                    Text(loc.longitude),
                    ])
                )
            )
        self.update()
        if len(self.mylocation.controls) > 0:
            self.find_place(api_key,loc.latitude,loc.longitude)
        self.update()

    def find_place(self,api_key, lat, lng, radius=20000, limit=20):
        base_url = "https://api.geoapify.com/v2/places"
        params = {
            "categories": "education.school",
            "filter": f"circle:{lng},{lat},{radius}",
            "bias": f"proximity:{lng},{lat}",
            "limit": limit,
            "apiKey": api_key
        }

        response = requests.get(base_url, params=params)
        if response.status_code == 200:
            schools = response.json().get('features', [])
            if not schools:
                print("Result not found")
                return

            for school in schools:
                properties = school.get('properties', {})
                name = properties.get('name', 'Nama tidak tersedia')
                address = properties.get('address_line1', 'Alamat tidak tersedia')
                lon = properties.get('lon', 'lon tidak tersedia')
                lat = properties.get('lat', 'lat tidak tersedia')
        else:
            print(f"Error: {response.status_code}")


def main(page:Page):
    page.theme_mode = ThemeMode.LIGHT
    page.window_width = 500
    page.add(
            LocationFinder(page),
        )

app(main,view=AppView.WEB_BROWSER,port=5050)

Error message

not show

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[ndonkoHenri]

Two possible solutions I see:

• because you expand the Map control, expand the custom control too: super(LocationFinder, self).__init__(expand=True)
• second option is to constrain the Map by giving it a height and width:

self.map = map.Map(
            width=500,
            height=500,
            configuration=map.MapConfiguration(