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 Manager objects 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.

Create a Mobile Website
View Site in Mobile | Classic
Share by: