|
1 | | -# Map control for Flet |
| 1 | +# flet-map |
2 | 2 |
|
3 | | -`Map` control for Flet. |
| 3 | +[](https://pypi.python.org/pypi/flet-map) |
| 4 | +[](https://pepy.tech/project/flet-map) |
| 5 | +[](https://github.com/flet-dev/flet-map/blob/main/LICENSE) |
4 | 6 |
|
5 | | -## Usage |
| 7 | +A [Flet](https://flet.dev) extension for displaying interactive maps. |
6 | 8 |
|
7 | | -Add `flet-map` as dependency (`pyproject.toml` or `requirements.txt`) to your Flet project. |
| 9 | +It is based on the [flutter_map](https://pub.dev/packages/flutter_map) Flutter package. |
8 | 10 |
|
9 | | -## Example |
| 11 | +## Documentation |
10 | 12 |
|
11 | | -```py |
| 13 | +Detailed documentation to this package can be found [here](https://flet-dev.github.io/flet-map/). |
12 | 14 |
|
13 | | -import random |
14 | | -import flet as ft |
15 | | -import flet_map as map |
| 15 | +## Platform Support |
16 | 16 |
|
| 17 | +This package supports the following platforms: |
17 | 18 |
|
18 | | -def main(page: ft.Page): |
19 | | - marker_layer_ref = ft.Ref[map.MarkerLayer]() |
20 | | - circle_layer_ref = ft.Ref[map.CircleLayer]() |
| 19 | +| Platform | Supported | |
| 20 | +|----------|:---------:| |
| 21 | +| Windows | ✅ | |
| 22 | +| macOS | ✅ | |
| 23 | +| Linux | ✅ | |
| 24 | +| iOS | ✅ | |
| 25 | +| Android | ✅ | |
| 26 | +| Web | ✅ | |
21 | 27 |
|
22 | | - def handle_tap(e: map.MapTapEvent): |
23 | | - print(e) |
24 | | - if e.name == "tap": |
25 | | - marker_layer_ref.current.markers.append( |
26 | | - map.Marker( |
27 | | - content=ft.Icon( |
28 | | - ft.Icons.LOCATION_ON, color=ft.cupertino_colors.DESTRUCTIVE_RED |
29 | | - ), |
30 | | - coordinates=e.coordinates, |
31 | | - ) |
32 | | - ) |
33 | | - elif e.name == "secondary_tap": |
34 | | - circle_layer_ref.current.circles.append( |
35 | | - map.CircleMarker( |
36 | | - radius=random.randint(5, 10), |
37 | | - coordinates=e.coordinates, |
38 | | - color=ft.Colors.random_color(), |
39 | | - border_color=ft.Colors.random_color(), |
40 | | - border_stroke_width=4, |
41 | | - ) |
42 | | - ) |
43 | | - page.update() |
| 28 | +## Installation |
44 | 29 |
|
45 | | - def handle_event(e: map.MapEvent): |
46 | | - print(e) |
| 30 | +To install the `flet-map` package and add it to your project dependencies: |
47 | 31 |
|
48 | | - page.add( |
49 | | - ft.Text("Click anywhere to add a Marker, right-click to add a CircleMarker."), |
50 | | - map.Map( |
51 | | - expand=True, |
52 | | - initial_center=map.MapLatitudeLongitude(15, 10), |
53 | | - initial_zoom=4.2, |
54 | | - interaction_configuration=map.MapInteractionConfiguration( |
55 | | - flags=map.MapInteractiveFlag.ALL |
56 | | - ), |
57 | | - on_init=lambda e: print(f"Initialized Map"), |
58 | | - on_tap=handle_tap, |
59 | | - on_secondary_tap=handle_tap, |
60 | | - on_long_press=handle_tap, |
61 | | - on_event=lambda e: print(e), |
62 | | - layers=[ |
63 | | - map.TileLayer( |
64 | | - url_template="https://tile.openstreetmap.org/{z}/{x}/{y}.png", |
65 | | - on_image_error=lambda e: print("TileLayer Error"), |
66 | | - ), |
67 | | - map.RichAttribution( |
68 | | - attributions=[ |
69 | | - map.TextSourceAttribution( |
70 | | - text="OpenStreetMap Contributors", |
71 | | - on_click=lambda e: e.page.launch_url( |
72 | | - "https://openstreetmap.org/copyright" |
73 | | - ), |
74 | | - ), |
75 | | - map.TextSourceAttribution( |
76 | | - text="Flet", |
77 | | - on_click=lambda e: e.page.launch_url("https://flet.dev"), |
78 | | - ), |
79 | | - ] |
80 | | - ), |
81 | | - map.SimpleAttribution( |
82 | | - text="Flet", |
83 | | - alignment=ft.alignment.top_right, |
84 | | - on_click=lambda e: print("Clicked SimpleAttribution"), |
85 | | - ), |
86 | | - map.MarkerLayer( |
87 | | - ref=marker_layer_ref, |
88 | | - markers=[ |
89 | | - map.Marker( |
90 | | - content=ft.Icon(ft.Icons.LOCATION_ON), |
91 | | - coordinates=map.MapLatitudeLongitude(30, 15), |
92 | | - ), |
93 | | - map.Marker( |
94 | | - content=ft.Icon(ft.Icons.LOCATION_ON), |
95 | | - coordinates=map.MapLatitudeLongitude(10, 10), |
96 | | - ), |
97 | | - map.Marker( |
98 | | - content=ft.Icon(ft.Icons.LOCATION_ON), |
99 | | - coordinates=map.MapLatitudeLongitude(25, 45), |
100 | | - ), |
101 | | - ], |
102 | | - ), |
103 | | - map.CircleLayer( |
104 | | - ref=circle_layer_ref, |
105 | | - circles=[ |
106 | | - map.CircleMarker( |
107 | | - radius=10, |
108 | | - coordinates=map.MapLatitudeLongitude(16, 24), |
109 | | - color=ft.Colors.RED, |
110 | | - border_color=ft.Colors.BLUE, |
111 | | - border_stroke_width=4, |
112 | | - ), |
113 | | - ], |
114 | | - ), |
115 | | - map.PolygonLayer( |
116 | | - polygons=[ |
117 | | - map.PolygonMarker( |
118 | | - label="Popular Touristic Area", |
119 | | - label_text_style=ft.TextStyle( |
120 | | - color=ft.Colors.BLACK, |
121 | | - size=15, |
122 | | - weight=ft.FontWeight.BOLD, |
123 | | - ), |
124 | | - color=ft.Colors.with_opacity(0.3, ft.Colors.BLUE), |
125 | | - coordinates=[ |
126 | | - map.MapLatitudeLongitude(10, 10), |
127 | | - map.MapLatitudeLongitude(30, 15), |
128 | | - map.MapLatitudeLongitude(25, 45), |
129 | | - ], |
130 | | - ), |
131 | | - ], |
132 | | - ), |
133 | | - map.PolylineLayer( |
134 | | - polylines=[ |
135 | | - map.PolylineMarker( |
136 | | - border_stroke_width=3, |
137 | | - border_color=ft.Colors.RED, |
138 | | - gradient_colors=[ft.Colors.BLACK, ft.Colors.BLACK], |
139 | | - color=ft.Colors.with_opacity(0.6, ft.Colors.GREEN), |
140 | | - coordinates=[ |
141 | | - map.MapLatitudeLongitude(10, 10), |
142 | | - map.MapLatitudeLongitude(30, 15), |
143 | | - map.MapLatitudeLongitude(25, 45), |
144 | | - ], |
145 | | - ), |
146 | | - ], |
147 | | - ), |
148 | | - ], |
149 | | - ), |
150 | | - ) |
| 32 | +- Using `uv`: |
| 33 | + ```bash |
| 34 | + uv add flet-map |
| 35 | + ``` |
151 | 36 |
|
| 37 | +- Using `pip`: |
| 38 | + ```bash |
| 39 | + pip install flet-map |
| 40 | + ``` |
| 41 | + After this, you will have to manually add this package to your `requirements.txt` or `pyproject.toml`. |
152 | 42 |
|
153 | | -ft.app(main) |
154 | | -``` |
| 43 | +- Using `poetry`: |
| 44 | + ```bash |
| 45 | + poetry add flet-map |
| 46 | + ``` |
| 47 | + |
| 48 | +## Examples |
| 49 | + |
| 50 | +For examples, see [this](./examples) |
0 commit comments