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 with 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, etc. 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 if 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 its 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. Also, 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, showing different options based on application scenario, etc.

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.

Maps shape tooltip.

Shape tooltip

Enable a tooltip for shapes. When tapping or clicking, additional information about a particular shape can be shown through custom widgets as a tooltip.

Maps bubble tooltip.

Bubble tooltip

Enable a tooltip for bubbles. When tapping or clicking, additional information about a particular bubble can be shown through custom widgets as a tooltip.

Maps marker tooltip.

Marker tooltip

Enable a tooltip for markers. When tapping or clicking, additional information about a particular marker can be shown through custom widgets as a tooltip.

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.

Inverted circle

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

Inverted polygon layer.

Inverted polygon

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.


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

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile