Awesome
MapLibre for Flutter
This package provides unofficial Flutter bindings for MapLibre SDKs.
- maplibre-gl-js is used for web
- maplibre-native (previously named maplibre-gl) is used for android and in the future for iOS, windows, macOS and Linux
MapLibre is a permissive and open source solution for the MVT (Mapbox Vector Tile) standard. By binding to native SDKs the package accomplishes performant rendering while supporting a lot of complex functionality.
<table> <tbody> <tr> <td style="text-align: center;"> <strong>Use custom vector styles</strong> <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/d8e2c7daf15221f716a2ebbd63e57a317cb089ab/docs/static/img/showcase-map.jpg" alt="Custom styled map" /> </td> <td style="text-align: center;"> <strong>Pitch or rotate the map</strong> <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/d8e2c7daf15221f716a2ebbd63e57a317cb089ab/docs/static/img/showcase-tilt.jpg" alt="Tilted and rotated map" /> </td> <td style="text-align: center;"> <strong>Use raster tiles</strong> <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/raster_layer.jpg" alt="Fill Layer" /> </td> </tr> <tr> <td style="text-align: center;"> <strong>Add circles</strong> <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/fe660b8d1c055d32e74cbc2ee0809281331a130b/docs/static/img/layers/circle_layer.jpg" alt="Circle Layer" /> </td> <td style="text-align: center;"> <strong>Add 3D building outlines</strong> <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/fill_extrusion_layer.jpg" alt="Fill Extrusion Layer" /> </td> <td style="text-align: center;"> <strong>Add polygons</strong> <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/fill_layer.jpg" alt="Fill Layer" /> </td> </tr> <tr> <td style="text-align: center;"> <strong>Add heatmaps</strong> <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/heatmap_layer.jpg" alt="Fill Layer" /> </td> <td style="text-align: center;"> <strong>Render elevation</strong> <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/hillshade_layer.jpg" alt="Fill Extrusion Layer" /> </td> <td style="text-align: center;"> <strong>Add lines</strong> <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/line_layer.jpg" alt="Fill Layer" /> </td> </tr> <tr> <td style="text-align: center;"> <strong>Add markers</strong> <img src="https://raw.githubusercontent.com/josxha/flutter-maplibre/427311f8f4577c215bf73caf46e3769629e74e3b/docs/static/img/layers/symbol_layer.jpg" alt="Symbol Layer" /> </td> <td style="text-align: center;"> </td> <td style="text-align: center;"> </td> </tr> </tbody> </table>Resources
Demo Application
Get Started & Documentation
Visit the docs to learn how to get started with maplibre in your project: Get Started
If you want to know more about the classes and properties of the package, have a look at the API docs.
Development & Contributing
All kinds of contributions are welcome. Thanks a lot if you consider to contribute in any way! There are different ways how you can help the development:
- Use the package in your project and share feedback.
- Open bug reports in case you find any.
- If you need a specific feature, open a feature request. or post your idea as discussion.
- Enhance the package documentation.
- Sponsor this project.