Drawing with Android SDK
Drawing on a MapView
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 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:
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:
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:
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:
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:
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:
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:
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.
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
