MapTileLayer class

Tile layer which renders the tiles returned from the Web Map Tile Services (WMTS) like OpenStreetMap, Bing Maps, Google Maps, TomTom etc.

The urlTemplate accepts the URL in WMTS format i.e. {z} — zoom level, {x} and {y} — tile coordinates.

This URL might vary slightly depends on the providers. The formats can be, https://exampleprovider/{z}/{x}/{y}.png, https://exampleprovider/z={z}/x={x}/y={y}.png, https://exampleprovider/z={z}/x={x}/y={y}.png?key=subscription_key, etc.

We will replace the {z}, {x}, {y} internally based on the current center point and the zoom level.

The subscription key may be needed for some of the providers. Please include them in the urlTemplate itself as mentioned in above example. Please note that the format may vary between the each map providers. You can check the exact URL format needed for the providers in their official websites.

Regarding the tile rendering, at the lowest zoom level (Level 0), the map is 256 x 256 pixels and the whole world map renders as a single tile. At each increase in level, the map width and height grow by a factor of 2 i.e. Level 1 is 512 x 512 pixels with 4 tiles ((0, 0), (0, 1), (1, 0), (1, 1) where 0 and 1 are {x} and {y} in urlTemplate), Level 2 is 2048 x 2048 pixels with 8 tiles (from (0, 0) to (3, 3)), and so on. (These details are just for your information and all these calculation are done internally.)

However, based on the size of the SfMaps widget, initialFocalLatLng and initialZoomLevel number of initial tiles needed in the view port alone will be rendered. While zooming and panning, new tiles will be requested and rendered on demand based on the current zoom level and focal point. The current zoom level and focal point can be obtained from the MapZoomPanBehavior.zoomLevel and MapZoomPanBehavior.focalLatLng respectively. Once the particular tile is rendered, it will be stored in the cache and it will be used from it next time for better performance.

Regarding the cache and clearing it, please check the APIs in imageCache.

@override
Widget build(BuildContext context) {
  return SfMaps(
    layers: [
      MapTileLayer(
        urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
        initialFocalLatLng: MapLatLng(-23.698042, 133.880753),
        initialZoomLevel: 3
      ),
    ],
  );
}

See also:

Inheritance

Constructors

MapTileLayer({Key? key, required String urlTemplate, MapLatLng initialFocalLatLng = const MapLatLng(0.0, 0.0), int initialZoomLevel = 1, MapLatLngBounds? initialLatLngBounds, MapTileLayerController? controller, List<MapSublayer>? sublayers, int initialMarkersCount = 0, MapMarkerBuilder? markerBuilder, IndexedWidgetBuilder? markerTooltipBuilder, MapTooltipSettings tooltipSettings = const MapTooltipSettings(), MapZoomPanBehavior? zoomPanBehavior, WillZoomCallback? onWillZoom, WillPanCallback? onWillPan})
Creates a MapTileLayer.
const

Properties

controller → MapTileLayerController?
Provides options for adding, removing, deleting, updating markers collection and converting pixel points to latitude and longitude.
final
hashCode → int
The hash code for this object.
no setterinherited
initialFocalLatLng → MapLatLng
Represents the initial focal latitude and longitude position.
final
initialLatLngBounds → MapLatLngBounds?
Option to set the LatLng bounds initially for the tile or shape layer.
finalinherited
initialMarkersCount → int
Option to set markers count initially. It cannot be be updated dynamically.
finalinherited
initialZoomLevel → int
Represents the initial zooming level.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
markerBuilder → MapMarkerBuilder?
Returns the MapMarker for the given index.
finalinherited
markerTooltipBuilder → IndexedWidgetBuilder?
Returns the widget for the tooltip of the MapMarker.
finalinherited
onWillPan → WillPanCallback?
Called whenever panning is happening.
finalinherited
onWillZoom → WillZoomCallback?
Called whenever zooming is happening.
finalinherited
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
sublayers → List<MapSublayer>?
Collection of MapShapeSublayer, MapLineLayer, MapPolylineLayer, MapPolygonLayer, MapCircleLayer, and MapArcLayer.
finalinherited
tooltipSettings → MapTooltipSettings
Customizes the bubble, marker, and shape tooltip's appearance.
finalinherited
urlTemplate → String
URL template to request the tiles from the providers.
final
zoomPanBehavior → MapZoomPanBehavior?
Enables zooming and panning in MapShapeLayer and MapTileLayer.
finalinherited

Methods

build(BuildContext context) → Widget
Describes the part of the user interface represented by this widget.
override
createElement() → StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited