Flutter Maps - An Interactive Maps Widget
- Utilize imagery support from OpenStreetMap, Azure Maps, Bing Maps, Google Maps, and other tile providers.
- Turn GeoJSON data into rich, graphical representations of geographical areas.
- Use markers to denote locations on a map precisely.
Trusted by the worldโs leading companies
Overview
Flutter Maps is a powerful data visualization widget that displays statistical information for a geographical area. Its rich feature set includes tile rendering from OpenStreetMap, Azure Maps, Bing Maps, Google Maps, and other tile providers. It has marker support and shape layers with features like selection, legends, labels, markers, tooltips, bubbles, color mapping, and much more.
Shape layer
Render GeoJSON data as custom maps or any shape on a shape layer for powerful data visualization. Customize the maps to the desired look using built-in options. For example, you can render a map of the world or any particular country.
Tile layer
An interactive tile layer allows you to load and customize map tiles from web map-tile services such as OpenStreetMaps, Azure Maps API, Bing Maps API, Google Maps Tile API, TomTom, Mapbox, Esriโs ArcGIS. Use markers to denote the specific latitude and longitude in the tile layer as required. Zoom and pan the tile layer to navigate across the regions and take a closer look.
Data labels
Data labels in the shape layer provide basic information about shapes by displaying their names. If required, trim or hide the labels when they exceed the shape bounds.
Selection
Highlight a shape to focus on the selected area. Use functionalities like page transitions and showing detailed information about a selected area during this interaction.
Legend
Legends in the shape layer provide clear information on data plotted in the Flutter Maps widget through shape and bubble colors.
Shape legend
Show a legend for data represented by shapes. You can also use the legend-toggling feature to let the end user see only the required shapes and data much easier.
Bubble legend
Show data represented by bubbles in a legend. You can use the legend-toggling feature here, too.
Position
Move the legend to any of the four sides or to a custom position.
Appearance
The default shape, size, and appearance of the legend icons can be customized.
Solid bar legend
Render the legend bar-style for data rendered in map shapes or bubbles and customize the positions of the labels as needed.
Gradient style
Use gradient colors as the bar background to show changes in regional data.
Legend pointer
Place a pointer at the top of the legend while hovering over shapes or bubbles.
Color mapping
Categorize the shapes on a map by customizing their color based on their underlying data. Flutter Maps supports two types of color mapping: equal color mapping and range color mapping.
Equal color mapping
Apply a specific color to a shape solely based on its data. For example, apply colors to countries based on their organization membership.
Range color mapping
Apply colors to shapes as their data falls within a specific range. For example, apply colors to countries based on their population density.
Map bubbles
Add information to shapes, such as population density and number of users. Bubbles can be rendered in different colors and sizes based on the settings of their assigned shape.
Color customization
Customize the color of a bubble and its transparency based on data.
Size customization
Customize the size of a bubble based on data to enhance a mapโs readability.
Interactive map markers
Denote important locations using multiple markers in Flutter Maps. Use built-in marker icons such as circles, diamonds, rectangles, and triangles. Use any type of widget as a custom marker, from text widgets for showing simple labels to any type of complex widget. Marker animations can be used to highlight a single location or a group of locations. Update the marker position dynamically to the desired location in scenarios like real-time location updates. Use a markerโs tap or click interaction for custom functionalities like navigation, showing a custom info window, and showing different options based on application scenario.
Shape layer
Show markers for a shape layer with specific latitudes and longitudes.
Tile layer
Show markers for a tile layer with specific latitudes and longitudes.
Fit bounds
Defines the visual limits for viewing a specific region in Maps.
Tooltip
Add tooltips to show additional information about shapes, bubbles, and markers when tapping or clicking on them.
Shape tooltip
Enable a tooltip for shapes.
Bubble tooltip
Enable a tooltip for bubbles.
Marker tooltip
Enable a tooltip for markers.
Show routes and highlight regions
Add vector shapes such as lines, polylines, arcs, circles, and polygons on both the shape layer and tile layer to show routes and highlight specific regions.
On shape layer
Add vector shapes on top of the shape layer.
On tile layer
Add vector shapes on top of the tile layer.
Circles
Add circles and inverted circles on the shape layer and tile layer.
Polygons
Add polygons and inverted polygons on the shape layer and tile layer.
Shape sublayer
Add a shape sublayer with GeoJSON data in another shape layer or tile layer to show more details about a particular region.
On shape layer
Add a shape layer as a sublayer of another shape layer.
On tile layer
Add a shape layer as a sublayer of the tile layer.
Zooming and panning
Zoom in any layer for a closer look at a specific region by pinching, scrolling the mouse wheel, or track pad, or using the built-in Flutter Maps toolbar. Pan the map to navigate across the regions. Zooming and panning can be enabled for both the shape layer and the tile layer.
Flutter Maps Code Example
Easily get started with the Flutter Maps using a few simple lines of DART code example as demonstrated below. Also explore our Flutter Maps Example that shows you how to configure a Maps in Flutter.
//Shapelayer late List<Model> _australiaData; late MapShapeSource _mapShapeSource; @override void initState() { _australiaData = const <Model>[ Model('New South Wales', Color.fromRGBO(255, 215, 0, 1.0), ' New\nSouth Wales'), Model('Queensland', Color.fromRGBO(72, 209, 204, 1.0), 'Queensland'), Model('Northern Territory', Color.fromRGBO(255, 78, 66, 1.0), 'Northern\nTerritory'), Model('Victoria', Color.fromRGBO(171, 56, 224, 0.75), 'Victoria'), Model('South Australia', Color.fromRGBO(126, 247, 74, 0.75), 'South Australia'), Model('Western Australia', Color.fromRGBO(79, 60, 201, 0.7), 'Western Australia'), Model('Tasmania', Color.fromRGBO(99, 164, 230, 1), 'Tasmania'), Model('Australian Capital Territory', Colors.teal, 'ACT') ]; _mapShapeSource = MapShapeSource.asset( 'assets/australia.json', shapeDataField: 'STATE_NAME', dataCount: _australiaData.length, primaryValueMapper: (int index) => _australiaData[index].state, dataLabelMapper: (int index) => _australiaData[index].stateCode, shapeColorValueMapper: (int index) => _australiaData[index].color, ); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( body: SfMaps( layers: <MapShapeLayer>[ MapShapeLayer( source: _mapShapeSource, showDataLabels: true, legend: const MapLegend(MapElement.shape), shapeTooltipBuilder: (BuildContext context, int index) { return Padding( padding: const EdgeInsets.all(10.0), child: Text( _australiaData[index].stateCode, style: const TextStyle(color: Colors.white), ), ); }, ), ], ), ); } //Tilelayer late MapZoomPanBehavior _zoomPanBehavior; @override void initState() { _zoomPanBehavior = MapZoomPanBehavior(minZoomLevel: 4.0); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( body: SfMaps( layers: <MapTileLayer>[ MapTileLayer( urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', initialZoomLevel: 4, initialFocalLatLng: const MapLatLng(40.7128, -74.0060), zoomPanBehavior: _zoomPanBehavior, initialMarkersCount: 1, markerBuilder: (BuildContext context, int index) { return const MapMarker( latitude: 40.7128, longitude: -74.0060, child: Icon(Icons.location_on, color: Colors.red), ); }, ), ], ), ); }
Not sure how to create your first Flutter Maps? Our tutorial videos and documentation can help.
Iโd love to watch it now Iโd love to read it nowFrequently Asked Questions
โ Why should you choose Syncfusion Flutter Maps?
Syncfusion Flutter Maps provides the following:
- Render custom GeoJSON data as geographical shapes.
- Render maps from online tile providers like OSM, Bing Maps, and TomTom.
- Denote a location with built-in symbols or a custom widget at a specific latitude and longitude on a map.
- Smoother zooming and panning to take a closer look at a specific region.
- Smoother animation transitions for all kinds of interactive features like selection and legend toggling.
- Supports Android, iOS, web, Windows, macOS, and Linux.
- One of the best Flutter Maps in the market that offers feature-rich UI to interact with the software.
- Superior support and documentation.
- User-friendly APIs.
- Rich customization features.
โ Where can I find the Syncfusion Flutter Maps demo?
You can find our Flutter Maps demo here.
โ Can I download and utilize the Syncfusion Flutter Maps for free?
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
โ How do I get started with Syncfusion Flutter Maps?
A good place to start would be our comprehensive getting started documentation.
All our Flutter UI & DataViz Widgets
Our Customers Love Us
Here are some of their experiences.
See Real Success Stories
Developers around the world trust Syncfusionโs Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.
Read Our Customer StoriesIndustry
Software development
75% Cost reduction
50% Faster development
โIf somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.โ
- Somnath Maji (Founder of Igniatek Consultancy)
Read StoryIndustry
Utilities (oil and gas)
Advanced, flexible features
Empowered users through robust and versatile functionality.
โSyncfusionโs tools have taken care of many things so I can focus on developing the application, instead of developing tools for the application.โ
- James Athyal (Software developer, McDaniel & Associates Consultants Ltd)
Read StoryIndustry
Software and technology
Efficient file management
Streamlined workflows with document libraries without building them from scratch.
โWe really love when the magic happens.โ
- Irvin Dominin (BUILDER WEB Development Manager at Sistemi)
Read StoryIndustry
Software and technology
โWe are Syncfusion fans because of the way Syncfusion treats the support.โ
- Dr. Howard Rybko (CEO of Synchrony Digital)
Read StoryIndustry
IT services and IT consulting
Improved performance
Large datasets handled with easy customization and quick debugging.
Highly customizable
Plug-and-play controls with quick template integration.
โI will surely recommend Syncfusion to others as a third-party control because I think itโs very easily customizable.โ
- Jayesh (Technical Team Lead, Capita)
Read StoryIndustry
Professional services
โWe definitely wanted Syncfusion to help us with our document processing functionality, and we were happy with and satisfied with Syncfusion.โ
- Arvind Naik (Engineering Lead, Vialto Partners)
Read StoryRated by users across the globe
Awards
Greatnessโitโs one thing to say you have it, but it means more when others recognize it. Syncfusionยฎ is proud to hold the following industry awards.
