We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies


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.

Maps shape layer support.

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.

Maps tile layer support.

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.

Maps data label support.


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.

Maps selection support.


Legends in the shape layer provide clear information on data plotted in the Flutter Maps widget through shape and bubble colors.

Maps shape legend.

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.

Maps bubble legend.

Bubble legend

Show data represented by bubbles in a legend. You can use the legend-toggling feature here, too.

Maps default legend.


Move the legend to any of the four sides or to a custom position.

Maps custom legend.


The default shape, size, and appearance of the legend icons can be customized.

Maps solid bar legend.

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.

Maps gradient bar legend.

Gradient style

Use gradient colors as the bar background to show changes in regional data.

Maps legend pointer.

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.

Maps equal 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.

Maps range color mapping.

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.

Maps default bubble.

Color customization

Customize the color of a bubble and its transparency based on data.

Maps custom bubble.

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.

Maps custom marker.

Shape layer

Show markers for a shape layer with specific latitudes and longitudes.

Maps custom marker.

Tile layer

Show markers for a tile layer with specific latitudes and longitudes.

Fit marker to bounds.

Fit bounds

Defines the visual limits for viewing a specific region in Maps.


Add tooltips to show additional information about shapes, bubbles, and markers when tapping or clicking on them.

Maps shape tooltip.

Shape tooltip

Enable a tooltip for shapes.

Maps bubble tooltip.

Bubble tooltip

Enable a tooltip for bubbles.

Maps marker tooltip.

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.

Shape layer vector layer.

On shape layer

Add vector shapes on top of the shape layer.

Tile layer vector layer.

On tile layer

Add vector shapes on top of the tile layer.

Inverted circle layer.


Add circles and inverted circles on the shape layer and tile layer.

Inverted polygon layer.


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.

Shape layer sublayer.

On shape layer

Add a shape layer as a sublayer of another shape layer.

Tile layer sublayer.

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.

Maps zoom and pan support.

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.


late List<Model> _australiaData;
late MapShapeSource _mapShapeSource;

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),
    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(
    shapeDataField: 'STATE_NAME',
    dataCount: _australiaData.length,
    primaryValueMapper: (int index) => _australiaData[index].state,
    dataLabelMapper: (int index) => _australiaData[index].stateCode,
    shapeColorValueMapper: (int index) => _australiaData[index].color,


Widget build(BuildContext context) {
  return Scaffold(
    body: SfMaps(
      layers: <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(
                style: const TextStyle(color: Colors.white),


late MapZoomPanBehavior _zoomPanBehavior;

void initState() {
  _zoomPanBehavior = MapZoomPanBehavior(minZoomLevel: 4.0);

Widget build(BuildContext context) {
  return Scaffold(
    body: SfMaps(
      layers: <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),

Frequently Asked Questions

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.

You can find our Flutter Maps demo here.

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.

A good place to start would be our comprehensive getting started documentation.

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

Rated by users across the globe


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.

Up arrow icon
Live Chat Icon For mobile