urlTemplate property

String urlTemplate
final

URL template to request the tiles from the providers.

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 provider. You can check the exact URL format needed for the providers in their official websites.

@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
      ),
    ],
  );
}

For Bing Maps, an additional step is required. The format of the required URL varies from the other tile services. Hence, we have added a top-level getBingUrlTemplate function which returns the URL in the required format. You can use the URL returned from this function to set it to the urlTemplate property.

late MapZoomPanBehavior _zoomPanBehavior;

@override
void initState() {
  _zoomPanBehavior = MapZoomPanBehavior();
  super.initState();
}

@override
Widget build(BuildContext context) {
  return FutureBuilder(
      future: getBingUrlTemplate(
          'http://dev.virtualearth.net/REST/V1/Imagery/Metadata/Road
          OnDemand?output=json&include=ImageryProviders&key=YOUR_KEY'),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return SfMaps(
            layers: [
              MapTileLayer(
                initialFocalLatLng: MapLatLng(20.5937, 78.9629),
                zoomPanBehavior: _zoomPanBehavior,
                initialZoomLevel: 3,
                urlTemplate: snapshot.data,
              ),
            ],
          );
        }
        return CircularProgressIndicator();
      });
}

Some of the providers provide different map types. For example, Bing Maps provide map types like Road, Aerial, AerialWithLabels etc. These types too can be passed in the urlTemplate itself as shown in the above example. You can check the official websites of the tile providers to know about the available types and the code for it.

See also:

Implementation

final String urlTemplate;