# Creating New Layers

Creating a new map layer is a great way to achieve a more custom, performant, map design. For example, it might be used to display a scale bar, or overlay a grid.

{% hint style="info" %}
Check the [Plugins List](/v7/plugins/list.md) for layers that already implement the behaviour you wish to replicate.
{% endhint %}

## 1. Creating A Layer Widget

It starts with a normal `StatelessWidget` or `StatefulWidget`, which then starts its widget tree with a widget dependent on whether the layer is designed to be either 'mobile' or 'static', depending on the purpose of the layer. For more information, see [Layers](/v7/usage/layers.md#mobile-vs-static-layers).

{% tabs %}
{% tab title="Mobile Layers" %}

```dart
class CustomMobileLayer extends StatelessWidget {
  const CustomMobileLayer({super.key});

  @override
  Widget build(BuildContext context) {    
    return MobileLayerTransformer(
      child: // your child here
    );
  }
}
```

{% endtab %}

{% tab title="Static Layers" %}

```dart
class CustomStaticLayer extends StatelessWidget {
  const CustomStaticLayer({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox.expand();
    // and/or
    return Align();
  }
}
```

{% endtab %}
{% endtabs %}

## 2. Hooking Into Inherited State

Then, there are three possible methods that could be used to retrieve separate 'aspects' of the state of the map.

Calling these inside a `build` method will also cause the layer to rebuild automatically when the depended-on aspects change.

```dart
final camera = MapCamera.of(context);
final controller = MapController.of(context);
final options = MapOptions.of(context);
```

{% hint style="warning" %}
Using these methods will restrict this widget to only being usable inside the context of a `FlutterMap`.
{% endhint %}


---

# 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/v7/plugins/making-a-plugin/creating-new-layers.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.