# Creating New Tile Providers

One common requirement is a custom `TileProvider`, and potentially a custom `ImageProvider` inside. This will allow your plugin to intercept all tile requests made by a map, and take your own action(s), before finally returning a tile.

Some useful steps are below, but there are more properties of a `TileProvider` that can be overridden.

## Extending The Base `TileProvider`

To create your own usable `TileProvider`, the first step is making a class that `extends` the abstract class. It is not recommended to `implement` the base, as this will require overriding methods unnecessarily for most custom providers.

```dart
class CustomTileProvider extends TileProvider {
    // Add your own custom properties, methods, etc.
    CustomTileProvider({
        // Suitably initialise your own custom properties
        super.headers, // Use the Dart 2.17 `super` syntax to initialise the base's header `Map`
    })
}
```

## Overriding `getImage`

The majority of custom `TileProviders` will want to implement their own method to retrieve tiles. This is done by overriding the `getImage` method, and usually specifying your own `ImageProvider`, for example:

```dart
    @override
    ImageProvider getImage(Coords<num> coords, TileLayerOptions options) =>
        CustomImageProvider(
            options: options,
            coords: coords,
            headers: {
                ...headers,
                'User-Agent': headers['User-Agent'] == null
                    ? '<pluginName> for flutter_map (unknown)'
                    : '<pluginName> for ${headers['User-Agent']}',
            },
        );
```

{% hint style="info" %}
Notice that the 'User-Agent' header has been changed. This is recommended, as it helps further differentiate your plugin's traffic from vanilla 'flutter\_map' traffic.
{% endhint %}

## Overriding `getTileUrl`

Some custom `TileProviders` may want to change the way URLs for tiles are generated. Note that this is quite advanced usage.

```dart
    @override
    String getTileUrl(Coords coords, TileLayerOptions options) {
        // Custom generation
    }
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.fleaflet.dev/v3/plugins/making-a-plugin/creating-new-tile-providers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.