Map#
Display interactive maps in your Flet apps with markers, overlays, and rich attributions provided by the flet-map
extension. The control is built on top of flutter_map
and supports multiple tile providers and layers.
Platform Support#
Platform | Windows | macOS | Linux | iOS | Android | Web |
---|---|---|---|---|---|---|
Supported | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Usage#
Add the flet-map
package to your project dependencies:
Different tile providers have their own usage policies. Make sure you comply with their attribution and rate limits.
Example#
import random
import flet_map as ftm
import flet as ft
def main(page: ft.Page):
marker_layer_ref = ft.Ref[ftm.MarkerLayer]()
circle_layer_ref = ft.Ref[ftm.CircleLayer]()
def handle_tap(e: ftm.MapTapEvent):
if e.name == "tap":
marker_layer_ref.current.markers.append(
ftm.Marker(
content=ft.Icon(
ft.Icons.LOCATION_ON, color=ft.CupertinoColors.DESTRUCTIVE_RED
),
coordinates=e.coordinates,
)
)
elif e.name == "secondary_tap":
circle_layer_ref.current.circles.append(
ftm.CircleMarker(
radius=random.randint(5, 10),
coordinates=e.coordinates,
color=ft.Colors.random(),
border_color=ft.Colors.random(),
border_stroke_width=4,
)
)
page.update()
page.add(
ft.Text("Click anywhere to add a Marker, right-click to add a CircleMarker."),
ftm.Map(
expand=True,
initial_center=ftm.MapLatitudeLongitude(15, 10),
initial_zoom=4.2,
interaction_configuration=ftm.InteractionConfiguration(
flags=ftm.InteractionFlag.ALL
),
on_tap=handle_tap,
on_secondary_tap=handle_tap,
on_long_press=handle_tap,
on_event=print,
layers=[
ftm.TileLayer(
url_template="https://tile.openstreetmap.org/{z}/{x}/{y}.png",
on_image_error=lambda e: print("TileLayer Error"),
),
ftm.RichAttribution(
attributions=[
ftm.TextSourceAttribution(
text="OpenStreetMap Contributors",
on_click=lambda e: e.page.launch_url(
"https://www.openstreetmap.org/copyright"
),
),
ftm.TextSourceAttribution(
text="Flet",
on_click=lambda e: e.page.launch_url("https://flet.dev"),
),
]
),
ftm.SimpleAttribution(
text="Flet",
alignment=ft.Alignment.TOP_RIGHT,
on_click=lambda e: print("Clicked SimpleAttribution"),
),
ftm.MarkerLayer(
ref=marker_layer_ref,
markers=[
ftm.Marker(
content=ft.Icon(ft.Icons.LOCATION_ON),
coordinates=ftm.MapLatitudeLongitude(30, 15),
),
ftm.Marker(
content=ft.Icon(ft.Icons.LOCATION_ON),
coordinates=ftm.MapLatitudeLongitude(10, 10),
),
ftm.Marker(
content=ft.Icon(ft.Icons.LOCATION_ON),
coordinates=ftm.MapLatitudeLongitude(25, 45),
),
],
),
ftm.CircleLayer(
ref=circle_layer_ref,
circles=[
ftm.CircleMarker(
radius=10,
coordinates=ftm.MapLatitudeLongitude(16, 24),
color=ft.Colors.RED,
border_color=ft.Colors.BLUE,
border_stroke_width=4,
),
],
),
ftm.PolygonLayer(
polygons=[
ftm.PolygonMarker(
label="Popular Touristic Area",
label_text_style=ft.TextStyle(
color=ft.Colors.BLACK,
size=15,
weight=ft.FontWeight.BOLD,
),
color=ft.Colors.with_opacity(0.3, ft.Colors.BLUE),
coordinates=[
ftm.MapLatitudeLongitude(10, 10),
ftm.MapLatitudeLongitude(30, 15),
ftm.MapLatitudeLongitude(25, 45),
],
),
],
),
ftm.PolylineLayer(
polylines=[
ftm.PolylineMarker(
border_stroke_width=3,
border_color=ft.Colors.RED,
gradient_colors=[ft.Colors.BLACK, ft.Colors.BLACK],
color=ft.Colors.with_opacity(0.6, ft.Colors.GREEN),
coordinates=[
ftm.MapLatitudeLongitude(10, 10),
ftm.MapLatitudeLongitude(30, 15),
ftm.MapLatitudeLongitude(25, 45),
],
),
],
),
],
),
)
ft.run(main)
Reference#
Map
- Layers:
TileLayer
,MarkerLayer
,CircleLayer
,PolygonLayer
,PolylineLayer
- Markers and overlays:
Marker
,CircleMarker
,PolygonMarker
,PolylineMarker
- Attributions:
SimpleAttribution
,RichAttribution
,SourceAttribution
See the types section for additional configuration helpers.