Google Maps Multilayer Utility

Select platform: Android JavaScript
  1. Introduction
  2. Adding multiple cluster, KML, and GeoJSON layers
  3. Adding your own features
  4. Handling click events
  5. See the demo app

Introduction

In previous tutorials, you’ve learned how to add features from KML and GeoJSON to your map, as well as clusters of markers. But what if you want to add several of these layers on the same map and get independent click events for each?

Adding multiple cluster, KML, and GeoJSON layers

The library includes Managerobjects to help manage click events for multiple types of layers. So, before you set up your layers you’ll first need to instantiate these and pass in your GoogleMap:

Kotlin

val markerManager = MarkerManager(map)
val groundOverlayManager = GroundOverlayManager(map!!)
val polygonManager = PolygonManager(map)
val polylineManager = PolylineManager(map)

Java

MarkerManager markerManager = new MarkerManager(map);
GroundOverlayManager groundOverlayManager = new GroundOverlayManager(map);
PolygonManager polygonManager = new PolygonManager(map);
PolylineManager polylineManager = new PolylineManager(map);

Next, you can pass these manager classes into the constructors of the other layers when you set them up:

Kotlin

val clusterManager =
    ClusterManager<MyItem>(context, map, markerManager)
val geoJsonLineLayer = GeoJsonLayer(
    map,
    R.raw.geojson_file,
    context,
    markerManager,
    polygonManager,
    polylineManager,
    groundOverlayManager
)
val kmlPolylineLayer = KmlLayer(
    map,
    R.raw.kml_file,
    context,
    markerManager,
    polygonManager,
    polylineManager,
    groundOverlayManager,
    null
)

Java

ClusterManager<MyItem> clusterManager = new ClusterManager<>(context, map, markerManager);
GeoJsonLayer geoJsonLineLayer = new GeoJsonLayer(map, R.raw.geojson_file, context, markerManager, polygonManager, polylineManager, groundOverlayManager);
KmlLayer kmlPolylineLayer = new KmlLayer(map, R.raw.kml_file, context, markerManager, polygonManager, polylineManager, groundOverlayManager, null);

Adding your own features

If you want to add your own markers, ground overlays, polylines, or polygons alongside these layers, create your own Collection and then use the Managers to add the feature instead of directly adding them to the GoogleMap object. For example, if you want to add a new marker:

Kotlin

val markerCollection =
    markerManager.newCollection()
markerCollection.addMarker(
    MarkerOptions()
        .position(LatLng(51.150000, -0.150032))
        .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
        .title("Unclustered marker")
)

Java

MarkerManager.Collection markerCollection = markerManager.newCollection();
markerCollection.addMarker(new MarkerOptions()
    .position(new LatLng(51.150000, -0.150032))
    .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
    .title("Unclustered marker"));

Handling click events

For clusters, KML, and GeoJSON, click listeners work like normal - as long as you pass in the Manager classes in the constructor of the layer you’re setting. For example, here’s how to set up a click listener for the KML layer:

Kotlin

kmlPolylineLayer.addLayerToMap()
kmlPolylineLayer.setOnFeatureClickListener { feature: Feature ->
    Toast.makeText(context,
        "KML polyline clicked: ${feature.getProperty("name")}",
        Toast.LENGTH_SHORT
    ).show()
}

Java

kmlPolylineLayer.addLayerToMap();
kmlPolylineLayer.setOnFeatureClickListener(feature -> Toast.makeText(context,
    "KML polyline clicked: " + feature.getProperty("name"),
    Toast.LENGTH_SHORT).show());

When you add your own markers, ground overlays, polylines, or polygons, just be sure to add click listeners to those Collection objects. For example, here’s how to set up the marker click listener on the markerCollection:

Kotlin

markerCollection.setOnMarkerClickListener { marker: Marker ->
    Toast.makeText(
        context,
        "Marker clicked: ${marker.title}",
        Toast.LENGTH_SHORT
    ).show()
    false
}

Java

markerCollection.setOnMarkerClickListener(marker -> { Toast.makeText(context,
    "Marker clicked: " + marker.getTitle(),
        Toast.LENGTH_SHORT).show();
    return false;
});

See the demo app

For an example of adding multiple layers, take a look at the MultiLayerDemoActivity in the demo app that ships with the utility library. The setup guide shows you how to run the demo app.