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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted 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 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 in Flutter Maps for powerful data visualization. Customize it 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.


Selection

Highlight a shape to focus on the selected area. Use functionalities like page transitions, showing detailed information about the selected area, and more during this interaction.

Maps selection support.


Legend

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

Maps shape legend.

Shape legend

Show the legend for the data represented by the shapes. You can also use the legend-toggling feature to let the end user visualize only the required shapes and data much easier.

Maps bubble legend.

Bubble legend

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

Maps default legend.

Position

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

Maps custom legend.

Appearance

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 the the 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 the changes in the regional data.


Color mapping

Categorize the shapes on a map by customizing their color based on their underlying data. 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 of the world based on their organization membership.

Maps range color mapping.

Range color mapping

Apply colors to the shapes if their data falls within a specific range. For example, apply colors to countries of the world 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 the data.

Maps custom bubble.

Size customization

Customize the size of a bubble based on the data to enhance its readability.


Interactive map marker

Denote important locations using multiple markers on the 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 group of locations. Update the marker position dynamically to the desired location in scenarios like real-time location updates. Use marker’s tap or click interaction for custom functionalities like navigation, show custom info window, show different options based on the application scenario, etc.

Maps custom marker.

Shape layer

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

Maps custom marker.

Tile layer

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


Tooltip

Add tooltips to show additional information about the shapes, bubbles, and markers.

Maps shape tooltip.

Shape tooltip

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

Maps bubble tooltip.

Bubble tooltip

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

Maps marker tooltip.

Marker tooltip

Enable the tooltip for the markers. On tapping or clicking, additional information about a particular marker can be shown through custom widgets as the 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.


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 on the web. 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.


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.

Scroll up 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