Source: https://developers.woosmap.com/products/mobile/android/drawing-on-mapview/

> For clean Markdown of any page, append `.md` to the page URL.

> For a complete documentation index, see https://developers.woosmap.com/llms.txt

# Drawing with Android SDK



This guide will show you how you can add markers or draw GeoJSON on a MapView.

This guide assume you already know how to add the SDK as a dependency and configure an API Key.  
If you never used Woosmap Android SDK before, we strongly recommend to start with the [Step by Step Guide](/products/mobile/android/step-by-step-first-application/) first.

## Adding a Marker

Each `MapView` comes with a default `MarkersRenderer` and convenience methods to use it.
A `Marker` is a defined with a mandatory `LatLng`, `Icon` and an optional label, you can create one just by instantiating a new one:

```kotlin
val marker = Marker(
    position = LatLng(0.0, 0.0),
    icon = Icon(
        "https://images.woosmap.com/dot-marker.png",
        Size(width = 46, height = 64)
    ),
    label = "0°N 0°E Null Island"
)
```

Once the marker created, you can then add it to your `MapView`:

```kotlin
mapView.addMarker(marker)
```

All marker's properties are observed and any change on them will trigger a redraw of the `MarkersRenderer` and update it immediately:

```kotlin
marker.position = LatLng(20.683056, -88.568611)
marker.label = "Chichen Itza"
```

Click event are directly supported by markers and will not trigger your `MapView`'s onClick:

```kotlin
marker.addOnClick { thisMarker ->
    thisMarker.label?.let { println(it) } // Will print out your marker's label if there's one
}
```

You can also control your marker's visibility at any time by either hiding it or completely removing it:

```kotlin
marker.isVisible = false // Marker is still computed but becomes invisible
mapView.removeMarker(marker) // Marker is removed from the MapView but can be added back anytime
```

## Using a DataRenderer

Markers are designed for simple use-cases. For more advanced drawing features it is recommended to use a `DataRenderer`.
They can draw any GeoJSON and allow for a wide range of style customization as well as redraw control.

First let's start by adding a `DataRenderer` to our `MapView` and redraw the same marker example but from GeoJSON this time:

```kotlin
val dataRenderer = DataRenderer(mapView) // You can add a `onTop=true` if you wish for your DataRenderer to be above everything

val geoJson = """
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
      }
    }
""".toGeoJsonObject() as Feature

val pointFeature = dataRenderer.addFeature(geoJson) {
    icon =Icon(
        "https://images.woosmap.com/dot-marker.png",
        Size(width = 46, height = 64)
    )
    label = "0°N 0°E Null Island"
}
```

You can also create a `Feature` programmatically, for example let's add a square around our marker:

```kotlin
val square = dataRenderer.addFeature(
    Feature(
        Polygon(
            listOf(
                Point(longitude = -10.0, latitude = -10.0),
                Point(longitude = 10.0, latitude = -10.0),
                Point(longitude = 10.0, latitude = 10.0),
                Point(longitude = -10.0, latitude = 10.0),
                Point(longitude = -10.0, latitude = -10.0),
            )
        )
    )
)
```

Under the hood `DataRenderer` works with GeoJSON which only handles geographical information.
All styling related information is only available once the `Feature` is known from a `DataRenderer` which returns a `DataBoundFeature`.
Just as for the marker any change to a property of a `DataBoundFeature` will trigger a redraw of the renderer.
However, you can have fine-grained control over those redraw by using methods like `setStyleProperties` on the `DataBoundFeature`
or `redrawAfter` on the `DataRenderer` itself. Notice also that the styling action when adding a feature to a `DataRenderer` will only redraw once after the action is completed.

```kotlin
square.fillColor = "blue"
// Redraw will happen here
square.strokeColor = "#00f"
// Redraw will happen here

square.setStyleProperties {
    fillColor = "red"
    strokeColor = "#f00"
}
// Redraw will happen here

dataRenderer.redrawAfter {
    square.fillColor = "green"
    square.strokeColor = "#0f0"
    
    // Even if nested
    square.setStyleProperties {
        fillColor = "yellow"
        strokeColor = "#ff0"
    }
}
// Redraw will happen here
```