StaticMap

The StaticMap widget shows an image of the map from the mapbox. This widget is a good choice when you want to display a location on a map without interactivity or controls such as zoom-in, zoom-out, and map scrolling.

To display a map with interactivity or controls, use the GoogleMap widget.

Here's an example of how you can add the StaticMap widget to your project:

First, drag the StaticMap widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
You'll need the Mapbox API key to render the map image. Get the API key by creating the Mapbox account and then return to FlutterFlow, move to the properties panel, scroll down to the Static Map section and enter the key into the Mapbox API Key input box.
To display your location on the map, enter the Latitude and Longitude values inside the Lat and Lng input boxes.

To get the lat long values for any location, open to Google Map, right-click on any place and click on the first item from the list. It should look like this 19.080045795863743, 72.8794235725136.

Set location from a variable

You can also set the location from a variable such as an app state, API response, Firestore Document, and more. Let's see an example of setting the location using the app state variable and Firestore document.

To set the value from the app state variable, create a variable with the Lat Lng data type. To do so, find the instruction here.

To set the value from the Firestore document, ensure you can access the Firestore document. To access the single Firestore document, find the instruction here.

A record/document must contain a field with the Lat Lng data type. See the example below:

To set the location from the variable:

Select the StaticMap from the widget tree or the canvas area.
Move to the properties panel (on the right side of your screen) and scroll down to the Static Map section.
Find the Location property and click on the Set from Variable. This will open a new panel.
To set the value from the app state variable.
1. Set the Source to App State.
2. Set the Available Options to the name of the variable.
To set the value from the Firestore document.
1. Find the Source dropdown, click on unset and select the [collection] Record (from PageName).
2. Under the Available Options, click on Unset and select the field that holds the location value to set on the StaticMap widget.
Click Confirm.

Customization

You can customize the appearance and behavior of the widget using the various properties available under the properties panel.

Changing the map style

Changing the map style allows you to change the overall theme and type of the map, such as Light, Dark, Street, and Satellite.

To change the map style:

Select StaticMap from the widget tree or the canvas area.
Move to the properties panel and scroll down to the Static Map section.
Find the Map Style property and choose among the Light, Dark, Outdoor, Street, Satellite, and Detailed Satellite.

Set zoom, tilt, and rotation

You can define the zoom level, adjust the map tilting and rotate the map as per your requirement.

To set the zoom, tilt, and rotation value for the map:

Select StaticMap from the widget tree or the canvas area.
Move to the properties panel and scroll down to the Static Map section.
Find the Map Zoom property and set the value that is good enough to highlight the place. The value starts from 0 (which is a full zoom-out). To zoom in, set the higher value.
Find the Map Tilt property and enter the value to display the map in the sloping position.
Find the Map Rotation property and enter the value to rotate the map.

Customizing marker

By default, the marker is invisible on the map. You can make it visible by setting the marker color. You can also change the marker icon/image from the URL link.

To customize the marker:

Select StaticMap from the widget tree or the canvas area.
Move to the properties panel and scroll down to the Static Map section.
To show the marker, find the Map Marker Color property, click on the box next to Unset, select the color, and then click Use Color or click on Unset and enter a Hex Code directly.
To display the custom marker image/icon, enter the URL into the Map Marker URL input box.

This widget does not resize the marker image from the URL link. Make sure you provide the image with the appropriate size.

Caching map image

Enabling the cache will store the map image and display it when the internet is unavailable.

To cache the map image:

Select StaticMap from the widget tree or the canvas area.
Move to the properties panel and scroll down to the Static Map Image section.
Find the Cache toggle and turn it on.

Changing dimension

To change the height and width of the map image:

Select the StaticMap from the widget tree or the canvas area.
Move to the properties panel (on the right side of your screen) and scroll down to the Static Map Image section.
Find the Width and Height.
There are three ways to set the dimensions:
1. To set it to an exact size, select PX and enter the desired values.
2. To set the dimensions as a % of the screen size, select % and enter the desired value.
3. To make the height or width of the image the screen's height or width, click on the infinity icon ().

The StaticMap widget inside of the container is constrained by the dimensions of the container. If you want to increase the image size, you will also need to increase the container size.

Changing the border-radius

Changing the border-radius allows you to create rounded corners for the map image.

Here's an example of how to create rounded corners:

Select the StaticMap from the widget tree or the canvas area.
Move to the properties panel (on the right side of your screen) and scroll down to the Static Map Image section.
Find the Border Radius property and enter the value as 50. By default, the value 50 will be set for all corners, which are TL (Top left), TR (top right), BL (bottom left), and BR (bottom right). Click on the lock icon () to change each corner separately.

Changing the box fit

Changing the box fit value allows you to control how the map should display inside the StaticMap widget. Various options under the Box Fit property help you scale (grow or shrink in size) the map image.

To change the box fit value:

Select the StaticMap from the widget tree or the canvas area.
Move to the properties panel (on the right side of your screen) and scroll down to the Static Map Image section.
Find the Box Fit dropdown, and try changing it to the other values.