Quickstart

This takes you from an empty activity 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 is the next step.

Add the library

Add the dependency to your app module.

app/build.gradle.kts

dependencies {
    implementation("africa.milsat.loci:loci-map-android:0.3.0")
}

Add the location permission as described in platform setup. To use LOCI frames, see Frames.

Put the map on screen

Create a LociMapView, add it to your layout, and set the options and the work areas on it.

SurveyActivity.kt

class SurveyActivity : Activity() {
    private lateinit var map: LociMapView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        map = LociMapView(this)
        setContentView(map)

        map.options = MapOptions(mapId = "survey-1", geometry = DrawGeometry.POINT)
        map.workAreas = MapWorkArea.listFromEsri(esriQueryResponse, initiallyVisible = true)
        map.onSave = { data -> save(data) } // shows the Save button
    }

    override fun onDestroy() {
        map.release()
        super.onDestroy()
    }
}

Run it

Tap Draw, tap inside a visible work area, then Save. onSave receives a DataFromMap — see what you get back.Geofencing applies: the user must be inside a work area. On an emulator, set the location inside it. To switch the check off while testing, see Geofencing.

The example screen

A complete screen: the map, a work area, three layers, callbacks and the saved result. Set the location inside the work area and run it. The Layers option switches the layer Draw creates shapes in.

DemoActivity.kt

// A work area as an Esri feature service returns it. Coordinates are [longitude, latitude].
val esri = """
{
  "spatialReference": { "wkid": 4326 },
  "features": [
    { "attributes": { "FRAME_ID": "A1", "NAME": "Island North" },
      "geometry": { "rings": [[[3.360, 6.520], [3.360, 6.540], [3.400, 6.540], [3.400, 6.520], [3.360, 6.520]]] } }
  ]
}
"""

class DemoActivity : Activity() {
    private lateinit var map: LociMapView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        ActivityCompat.requestPermissions(this, arrayOf(Manifest.permission.ACCESS_FINE_LOCATION), 1)

        map = LociMapView(this)
        setContentView(map)

        map.options = MapOptions(mapId = "demo")
        map.workAreas = MapWorkArea.listFromEsri(esri, initiallyVisible = true)
        map.layers = listOf(
            MapLayer("homes", "Homes", DrawGeometry.POINT, listOf(MapFeature(1, """{"type":"Point","coordinates":[3.380,6.530]}"""))),
            MapLayer("roads", "Roads", DrawGeometry.LINE),
            MapLayer("parcels", "Parcels", DrawGeometry.POLYGON),
        )
        map.activeLayerId = "homes"

        map.onMapReady = { Log.i("Demo", "the map is ready") }
        map.onFeatureTap = { entry -> Log.i("Demo", "tapped entry ${entry.id}") }
        map.onDrawCompleted = { data -> Log.i("Demo", "drawn in ${data.layerId}") }
        map.onError = { error, _ -> Log.w("Demo", error.message ?: "") }
        map.onSave = { data -> showSaved(data) }
    }

    override fun onDestroy() {
        map.release()
        super.onDestroy()
    }
}

Tap Draw, tap inside the work area, then Save.

Flutter

Android

iOS

The example screen

​The example screen

The example screen