feat(flet-map): add image overlay support
#6421
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import flet as ft | ||
| import flet_map as ftm | ||
|
|
||
| base64_image = "iVBORw0KGgoAAAANSUhEUgAAABkAAAAgCAYAAADnnNMGAAAACXBIWXMAAAORAAADkQFnq8zdAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA6dJREFUSImllltoHFUYx3/fzOzm0lt23ZrQ1AQbtBehNpvQohgkBYVo410RwQctNE3Sh0IfiiBoIAjqi6TYrKnFy4O3oiiRavDJFi3mXomIBmOxNZe63ay52GR3Zj4f2sTEzmx3m//TYf7/c35zvgPnO6KqrESXqpq3muocAikv6m+/zytj3ejik1VN21G31YA9CgJ6xC+bMyQZPVCuarciPAMYC99V6Vw5pLbFSibHmlVoRVj9P3cmPBM8tSJI/M6mzabpfoAQ9fIF7WK4bd5vvuFnLGgy2vi0abg94A0AcJGvMq3hDxGRyar9r4F+iLAm0yIiRk8m37tctS1WsrIhhrI30+Srmg+J87OXUf3lWGS1q89dC6ltsSanxk4Aj2QBABii96300g87P/rtlrWr8l+vyDMfdlXSyyEikqxsiOUAQJCBhfHdXRfCq1LSsSlcWG+KBAGStvvrMkgiuv8lUc2mREukPwLUfHG+uTQv8Eown7VL3XlbBxYhf1c17hbVF3MDwA9bts280TnaU1YYqPby07aeFlUlHt27wSQ4CLo+F8AvoTCvHmyKF+ZbEb/M77P2LgvAwmrTHAHflN3KZxVbMC2jMFNOpgPnrMSOhvvFkMezXdwV4ePbtvHtxnJAMQ0j4JtVnO+eLb5oiSlt5HDbv7t1O90lpYCCCKbhfzW5kAIwUAazR0BlfII8Ow0I6uoVmI9MyAMwbMs8CExmDbk4zgu931MyO4OI4KrYflkRjOoTI+uM9d1vjotwKPu9QMk/sxzuO8POiVFcdZ1M2YBVsMEAKOqLvaPIe7mACuw0z/80SMH58SMplxlfiDhVi7dw2pltRhjKBQTQdrSja2KKTfE551NHuaZ0QVPvWYQUn31/Vm2nDvgjF4grVJx6suSvrvrSJ/6cSW2Oz9mf264uNrB806xZ1k/CZ49dUKgDEtlCROX2hfHpx8pGuuo3PpqYulw8fjndOp1yhgtNKRevJ1FyR2Ola+jXAjdnwTkZ6o896GdWdxDw7IxFg+0DpmXchTKSBWQnIuJn9u4j7dt+13UfHXEkXQOcuQ4kMhVtqsgUyPiQiPQfHw1NB2sRjmXKuTg1NwwBYLhtPtQX26eqTwGXPDOqvmcC4Hnwfrrad94GrVsOYTqUTkQY+iTlNe/6O1miSP/x0VB/+wMIDwHn/vtV1iQC4Xv95uUEWVCoL9Y5Z+gdovoyMHUFJHv88jmVy0vTuw7cZNv2YaA61Bfb7ZX5F8SaUv2xwZevAAAAAElFTkSuQmCC" # noqa: E501 | ||
|
|
||
|
|
||
| def main(page: ft.Page): | ||
| page.add( | ||
| ft.SafeArea( | ||
| expand=True, | ||
| content=ftm.Map( | ||
| expand=True, | ||
| initial_center=ftm.MapLatitudeLongitude(51.5, -0.09), | ||
| initial_zoom=6, | ||
| layers=[ | ||
| ftm.TileLayer( | ||
| url_template="https://tile.memomaps.de/tilegen/{z}/{x}/{y}.png" | ||
| ), | ||
| ftm.OverlayImageLayer( | ||
| overlay_images=[ | ||
| ftm.OverlayImage( | ||
| src=base64_image, | ||
| bounds=ftm.MapLatitudeLongitudeBounds( | ||
| corner_1=ftm.MapLatitudeLongitude(51.5, -0.09), | ||
| corner_2=ftm.MapLatitudeLongitude(48.8566, 2.3522), | ||
| ), | ||
| opacity=0.8, | ||
| ), | ||
| ftm.RotatedOverlayImage( | ||
| src=base64_image, | ||
| top_left_corner=ftm.MapLatitudeLongitude( | ||
| 53.377, -2.999 | ||
| ), | ||
| bottom_left_corner=ftm.MapLatitudeLongitude( | ||
| 52.503, -1.868 | ||
| ), | ||
| bottom_right_corner=ftm.MapLatitudeLongitude( | ||
| 53.475, 0.275 | ||
| ), | ||
| opacity=0.8, | ||
| ), | ||
| ] | ||
| ), | ||
| ], | ||
| ), | ||
| ) | ||
| ) | ||
|
|
||
|
|
||
| if __name__ == "__main__": | ||
| ft.run(main) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| [project] | ||
| name = "map-overlay-images" | ||
| version = "1.0.0" | ||
| description = "Places rectangular and rotated image overlays on top of an interactive map." | ||
| requires-python = ">=3.10" | ||
| keywords = ["map", "overlay", "image", "rotated overlay"] | ||
| authors = [{ name = "Flet team", email = "hello@flet.dev" }] | ||
| dependencies = ["flet", "flet-map"] | ||
|
|
||
| [dependency-groups] | ||
| dev = ["flet-cli", "flet-desktop", "flet-web"] | ||
|
|
||
| [tool.flet.gallery] | ||
| categories = ["Extensions/Map"] | ||
|
|
||
| [tool.flet.metadata] | ||
| title = "Overlay Images" | ||
| controls = ["SafeArea", "Map", "TileLayer", "OverlayImageLayer", "OverlayImage", "RotatedOverlayImage"] | ||
| layout_pattern = "single-panel" | ||
| complexity = "basic" | ||
| features = ["rectangular image overlay", "rotated image overlay"] | ||
|
|
||
| [tool.flet] | ||
| org = "dev.flet" | ||
| company = "Flet" | ||
| copyright = "Copyright (C) 2023-2026 by Flet" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| from typing import Annotated, Union | ||
|
|
||
| import flet as ft | ||
| from flet.utils.validation import V | ||
| from flet_map.map_layer import MapLayer | ||
| from flet_map.types import MapLatitudeLongitude, MapLatitudeLongitudeBounds | ||
|
|
||
| __all__ = [ | ||
| "BaseOverlayImage", | ||
| "OverlayImage", | ||
| "OverlayImageLayer", | ||
| "RotatedOverlayImage", | ||
| ] | ||
|
|
||
|
|
||
| @ft.control("BaseOverlayImage", kw_only=True) | ||
| class BaseOverlayImage(ft.BaseControl): | ||
| """ | ||
| Abstract class for image overlays displayed through | ||
| :class:`~flet_map.OverlayImageLayer`. | ||
|
|
||
| The following overlay image types are available: | ||
|
|
||
| - :class:`~flet_map.OverlayImage` | ||
| - :class:`~flet_map.RotatedOverlayImage` | ||
| """ | ||
|
|
||
| src: Union[str, bytes] | ||
| """ | ||
| The image source. | ||
|
|
||
| It can be one of the following: | ||
| - A URL or local [asset file](https://flet.dev/docs/cookbook/assets) path; | ||
| - A base64 string; | ||
| - Raw bytes. | ||
| """ | ||
|
|
||
| opacity: Annotated[ | ||
| ft.Number, | ||
| V.between(0.0, 1.0), | ||
| ] = 1.0 | ||
| """ | ||
| The opacity in which the image should get rendered on the map. | ||
|
|
||
| Raises: | ||
| ValueError: If it is not between `0.0` and `1.0`, inclusive. | ||
| """ | ||
|
|
||
| gapless_playback: bool = False | ||
| """ | ||
| Whether to continue showing the old image (`True`), or briefly show nothing | ||
| (`False`), when the image provider changes. | ||
| """ | ||
|
|
||
| filter_quality: ft.FilterQuality = ft.FilterQuality.MEDIUM | ||
| """ | ||
| The rendering quality of the image. | ||
| """ | ||
|
|
||
|
|
||
| @ft.control("OverlayImage", kw_only=True) | ||
| class OverlayImage(BaseOverlayImage): | ||
| """ | ||
| An unrotated image overlay that spans between a given bounding box. | ||
| """ | ||
|
|
||
| bounds: MapLatitudeLongitudeBounds | ||
| """ | ||
| The latitude and longitude bounds where this image will be displayed. | ||
| """ | ||
|
|
||
|
|
||
| @ft.control("RotatedOverlayImage", kw_only=True) | ||
| class RotatedOverlayImage(BaseOverlayImage): | ||
| """ | ||
| An image overlay transformed across three corner points. | ||
|
|
||
| The top-right corner is derived from :attr:`top_left_corner`, | ||
| :attr:`bottom_left_corner`, and :attr:`bottom_right_corner`. | ||
| """ | ||
|
|
||
| top_left_corner: MapLatitudeLongitude | ||
| """ | ||
| The coordinates of the top-left corner of the image. | ||
| """ | ||
|
|
||
| bottom_left_corner: MapLatitudeLongitude | ||
| """ | ||
| The coordinates of the bottom-left corner of the image. | ||
| """ | ||
|
|
||
| bottom_right_corner: MapLatitudeLongitude | ||
| """ | ||
| The coordinates of the bottom-right corner of the image. | ||
| """ | ||
|
|
||
|
|
||
| @ft.control("OverlayImageLayer", kw_only=True) | ||
| class OverlayImageLayer(MapLayer): | ||
| """ | ||
| A layer to display image overlays. | ||
|
|
||
| Tip: | ||
| Place this layer after every non-translucent layer that should appear | ||
| below it. Layers rendered after this one may cover its overlay images. | ||
| """ | ||
|
|
||
| overlay_images: list[BaseOverlayImage] | ||
| """ | ||
| A list of image overlays to display. | ||
| """ | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
New controls in this module are declared with
kw_only=True, but the otherflet_mapcontrols use@ft.control(...)withoutkw_only. This creates an inconsistent public API (some map controls accept positional args, these do not). Either dropkw_only=Truehere for consistency, or migrate the rest of the package to keyword-only in a dedicated change so the behavior is uniform.