> For the complete documentation index, see [llms.txt](https://docs.fleaflet.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fleaflet.dev/usage/options.md). # Options To dictate & restrict what the map can and should do, regardless of its contents, it needs some guidance! It provides options that can be categorized into three main parts: * [#initial-positioning](#initial-positioning "mention")\ Defines the location of the map when it is first loaded * [#permanent-rules](#permanent-rules "mention")\ Defines restrictions that last throughout the map's lifetime * [Event handling](/usage/programmatic-interaction.md#reacting-to-map-events)\ Defines methods that are called on specific map events {% embed url="" %} ## Initial Positioning {% hint style="info" %} Changing these properties after the map has already been built for the first time will have no effect: they only apply on initialisation. To control the map programatically, use a `MapController`: [Programmatic Interaction](/usage/programmatic-interaction.md#controller). {% endhint %} By default, the map's north is up. Set the `initialRotation` in degrees to change this if necessary. To set the geographical location the map should show, choose exactly one of the following options: {% tabs %} {% tab title="Center + Zoom" %} The map places the given coordinates at the centre (`initialCenter`), and shows the specified zoom level (`initialZoom`). {% hint style="info" %} Not sure what a zoom level is? In short, zoom level 0 usually displays the whole world in world tile, and a higher zoom level means more zoomed in. For more information, see [How Does It Work?](/why-and-how/how-does-it-work.md) and [wiki.openstreetmap.org/wiki/Zoom\_levels](https://wiki.openstreetmap.org/wiki/Zoom_levels). {% endhint %} ```dart MapOptions( initialCenter: LatLng(0, 0), initialZoom: 13, // ... ), ``` {% endtab %} {% tab title="Fit" %} The four corners of the map are defined with 1 of 3 possible fitting methods, through `initialCameraFit`. When the map is not initially rotated, all 3 work the same. When rotated, [#circumscribed-coordinates](#circumscribed-coordinates "mention") is usually the best choice. {% tabs %} {% tab title="Circumscribed bbox" %} A bounding box is specified, and the map shows the entire area plus any surrounding area necessary (if the map is rotated): `CameraFit.bounds`. `LatLngBounds` can be constructed with two corners, or automatically constructed from a list of coordinates using the `.fromPoints` constructor.

Camera shown in purple
Bounding box shown in black
North up, camera at an angle

```dart MapOptions( initialCameraFit: CameraFit.bounds( bounds: LatLngBounds(LatLng(10, -10), LatLng(-10, 10)), ), // ... ), ``` {% endtab %} {% tab title="Inscribed bbox" %} A bounding box is specified, and the map shows only areas which fit inside it: `CameraFit.insideBounds`. `LatLngBounds` can be constructed with two corners, or automatically constructed from a list of coordinates using the `.fromPoints` constructor.

Camera shown in black
Bounding box shown in purple
North at an angle, camera up

```dart MapOptions( initialCameraFit: CameraFit.insideBounds( bounds: LatLngBounds(LatLng(10, -10), LatLng(-10, 10)), ), // ... ), ``` {% endtab %} {% tab title="Circumscribed coordinates" %} A list of coordinates is specified, and the map shows the entire area plus any surrounding area necessary (if the map is rotated): `CameraFit.coordinates`. Because it is not a bounding box (north-aligned rectangle) being specified unlike the other 2 methods, a rotated map can achieve a tighter fit around the specified coordinates. ```dart MapOptions( initialCameraFit: CameraFit.coordinates( coordinates: [ // ... ], ), // ... ), ``` {% endtab %} {% endtabs %} `CameraFit` also takes a number of other useful parameters, such as `padding` defined in screen-space logical pixels, and more to ensure the map tiles are at their best visual resolution initially. For example: ```dart CameraFit.bounds( // ... padding: const EdgeInsets.all(32), maxZoom: 16, minZoom: 6, forceIntegerZoomLevel: true, ), ``` {% endtab %} {% endtabs %} But how to actually choose the initial position for the map? We've built a guide to help with that: {% content-ref url="/pages/Zn4FGy9FfjsbcKfoHm0o" %} [Generating An Initial Position](/usage/options/generating-an-initial-position.md) {% endcontent-ref %} ## Permanent Rules One part of `MapOptions` responsibilities is to define the restrictions and limitations of the map and what users can/cannot do with it. Some of the options are described elsewhere in this documentation, in context. In addition, the API docs show all the available options, and below is a partial list of options: * `cameraConstraint` * camera bounds inside bounds: `CameraConstraint.bounds` * camera center inside bounds: `CameraConstraint.center` * camera bounds not exceeding specified parallels: `CameraConstraint.containLatitude` (defaults to 90th parallel north and south) * *unconstrained (default): `CameraConstraint.unconstrained`* * `maxZoom` and `minZoom`\ Sets a hard limit on the maximum and minimum amounts that the map can be zoomed * [`interactionOptions`](/usage/options/interaction-options.md)\ Configures the gestures that the user can use to interact with the map - for example, disable rotation or configure cursor/keyboard rotation {% hint style="success" %} Instead of `maxZoom` (or in addition to), consider setting `maxNativeZoom` per `TileLayer` instead, to allow tiles to scale (and lose quality) on the final zoom level, instead of setting a hard limit. {% endhint %} ## Custom CRS FM does have some support for using alternative CRSs. {% content-ref url="/pages/nTZ2CIbH2eECsJUZS0im" %} [Custom CRSs](/usage/options/custom-crss.md) {% endcontent-ref %} ## Keep Alive If the map is built lazily, for example in a `PageView`, loading and unloading the map will cause it to reset. To prevent this, set `MapOptions.keepAlive` to `true`, which will activate an internal `AutomaticKeepAliveClientMixin`. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.fleaflet.dev/usage/options.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.