> ## Documentation Index
> Fetch the complete documentation index at: https://docs.loci.ng/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Three steps to a working map with the Flutter SDK, then the example app that ships with the package.

This takes you from an empty app to a map a user can draw on. The map itself
needs no key; if you want to fill it with LOCI frames instead of your own
boundaries, [Frames](/sdks/flutter-frames) is the next step.

<Steps>
  <Step title="Add the package">
    Point to the package by path or git.

    ```yaml pubspec.yaml theme={null}
    dependencies:
      milsat_map:
        path: ../milsat_map # or a git dependency
    ```

    Then run the [platform setup](/sdks/flutter-overview#platform-setup) for
    Android and iOS.
  </Step>

  <Step title="Initialise, only if you use frames">
    The map works without a key. If you preload frames, initialise the SDK
    once with your API key, for example in `main`. Create the key in your
    LOCI dashboard under **Developers → New key**; see
    [Authentication](/authentication).

    ```dart lib/main.dart theme={null}
    await MilsatMaps.initialize(apiKey: '<your key>');
    ```
  </Step>

  <Step title="Drop in the widget">
    Give it what the user may draw and the work areas. The map works out of
    the box.

    ```dart lib/survey_map.dart theme={null}
    import 'package:milsat_map/milsat_map.dart';

    MilsatMap(
      options: const MapOptions(
        mapId: 'survey-1',
        geometry: DrawGeometry.point,
      ),
      workAreas: MapWorkArea.listFromEsri(esriQueryResponse),
      onSave: (data) => saveEntry(data),
    )
    ```
  </Step>

  <Step title="Run it">
    ```bash terminal theme={null}
    flutter run
    ```

    Tap **Draw**, tap inside a visible work area, then **Save**. `onSave`
    receives a `DataFromMap` — see
    [what you get back](/sdks/flutter-maps#what-you-get-back).
  </Step>
</Steps>

## The example app

The package ships an example app whose first screen is the preload step. Run
it from `example`. Nothing you type is saved: the frames key stays in memory
and is gone when the app closes. The map screen shows only what was
preloaded.

```bash run on iOS or Android theme={null}
cd example
flutter devices
# iOS simulator
flutter run -d <simulator id> --dart-define=FRAMES_KEY=<your frames key>
xcrun simctl location booted set 9.0579,7.4951
# Android emulator or device
flutter run -d <android device id> --dart-define=FRAMES_KEY=<your frames key>
adb emu geo fix 7.4951 9.0579
```

The `--dart-define` value is optional: leave it out and type the frames key
on the first screen. **Do not commit the key.**

| Part of the screen | What it does |
| - | - |
| Frames access key | Authorises the frames requests. Masked. Filled in from `FRAMES_KEY`, and read again for every request. |
| Frame ids tab | Paste ids separated by commas, spaces or line breaks. Anything that is not digits is flagged. |
| By location tab | Type a latitude and longitude, or tap **Use my location**, then **Find frame**. Adds the frame id under the point. |
| From a work area tab | Use the built-in sample polygon, or paste a GeoJSON polygon, then **Find frame**. Uses `frameFromWorkArea`. |
| Sample frames | Adds four ids for a quick try. |
| Hidden layer ids | Optional. Layers you do not want on the work areas. |
| Source and pack id | Cloud, pack only or pack first, and the pack to use. |
| Load frames | Shows how many frames loaded, which ids were missing, what was billed, what was left out, truncation warnings and requests used. |
| Open map | Shows the preloaded frames as visible work areas. |
| Skip (demo data) | Goes to the original demo with no keys. |

A release build of the Android example:

```bash release APK theme={null}
cd example
flutter build apk --release
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.