Handle click events

Select platform: Android iOS JavaScript

You can make a feature layer respond to user click events to get the place ID and feature type for the boundary that was clicked. The following example map shows the boundaries for the Country layer, and shows an event handler that styles the clicked polygon associated with the selected country.

Write a click event handler

When a click event occurs on a feature layer, the Maps SDK for Android passes a FeatureClickEvent object to the event handler. Use the FeatureClickEvent to get the latitude and longitude coordinates of the click and a list of features affected by the click.

Handle feature layer events

Take the following steps to handle events on a feature layer. In this example, you define a click event handler for the Country feature layer to apply a red fill to the polygon representing the selected country.

When you call FeatureLayer.setFeatureStyle() , the style factory function sets the style on all features in the feature layer. To update the style of a feature in the event handler, you must call FeatureLayer.setFeatureStyle() to set the updated style on all features.

  1. If you haven't already done so, follow the steps in Get Started to create a new map ID and map style. Be sure to enable the Countryfeature layer.

  2. Make sure your class implements FeatureLayer.OnFeatureClickListener .

  3. Register an event handler for feature click events by calling FeatureLayer.addOnFeatureClickListener() .

    Java

     private 
      
     FeatureLayer 
      
     countryLayer 
     ; 
    
    @Override public void onMapReady ( GoogleMap map ) {
    // Get the COUNTRY feature layer. countryLayer = map . getFeatureLayer ( new FeatureLayerOptions . Builder () . featureType ( FeatureType . COUNTRY ) . build ());
    // Register the click event handler for the Country layer. countryLayer . addOnFeatureClickListener ( this );
    // Apply default style to all countries on load to enable clicking. styleCountryLayer (); }
    // Set default fill and border for all countries to ensure that they respond // to click events. private void styleCountryLayer () { FeatureLayer . StyleFactory styleFactory = ( Feature feature ) - > { return new FeatureStyle . Builder () // Set the fill color for the country as white with a 10% opacity. . fillColor ( Color . argb ( 0.1 , 0 , 0 , 0 )) // Set border color to solid black. . strokeColor ( Color . BLACK ) . build (); };
    // Apply the style factory function to the country feature layer. countryLayer . setFeatureStyle ( styleFactory ); }

    Kotlin

     private 
      
     var 
      
     countryLayer 
     : 
      
     FeatureLayer 
     ? 
      
     = 
      
     null 
    
    override fun onMapReady ( googleMap : GoogleMap ) { // Get the COUNTRY feature layer. countryLayer = googleMap . getFeatureLayer ( FeatureLayerOptions . Builder () . featureType ( FeatureType . COUNTRY ) . build ())
    // Register the click event handler for the Country layer. countryLayer ? . addOnFeatureClickListener ( this )
    // Apply default style to all countries on load to enable clicking. styleCountryLayer () }
    // Set default fill and border for all countries to ensure that they respond // to click events. private fun styleCountryLayer () { val styleFactory = FeatureLayer . StyleFactory { feature : Feature - > return @StyleFactory FeatureStyle . Builder () // Set the fill color for the country as white with a 10% opacity. . fillColor ( Color . argb ( 0.1f , 0f , 0f , 0f )) // Set border color to solid black. . strokeColor ( Color . BLACK ) . build () }
    // Apply the style factory function to the country feature layer. countryLayer ? . setFeatureStyle ( styleFactory ) }
  4. Apply a fill color of red to the selected country. Only visible features are clickable.

    Java

     @Override 
     // Define the click event handler. 
     public 
      
     void 
      
     onFeatureClick 
     ( 
     FeatureClickEvent 
      
     event 
     ) 
      
     { 
    
    // Get the list of features affected by the click using // getPlaceIds() defined below. List<String> selectedPlaceIds = getPlaceIds ( event . getFeatures ());
    if ( ! selectedPlaceIds . isEmpty ()) { FeatureLayer . StyleFactory styleFactory = ( Feature feature ) - > { // Use PlaceFeature to get the placeID of the country. if ( feature instanceof PlaceFeature ) { if ( selectedPlaceIds . contains ((( PlaceFeature ) feature ). getPlaceId ())) { return new FeatureStyle . Builder () // Set the fill color to red. . fillColor ( Color . RED ) . build (); } } return null ; };
    // Apply the style factory function to the feature layer. countryLayer . setFeatureStyle ( styleFactory ); } }
    // Get a List of place IDs from the FeatureClickEvent object. private List<String> getPlaceIds ( List<Feature> features ) { List<String> placeIds = new ArrayList <> (); for ( Feature feature : features ) { if ( feature instanceof PlaceFeature ) { placeIds . add ((( PlaceFeature ) feature ). getPlaceId ()); } } return placeIds ; }

    Kotlin

     // Define the click event handler. 
     override 
      
     fun 
      
     onFeatureClick 
     ( 
     event 
     : 
      
     FeatureClickEvent 
     ) 
      
     { 
    
    // Get the list of features affected by the click using // getPlaceIds() defined below. val selectedPlaceIds = getPlaceIds ( event . getFeatures ()) if ( ! selectedPlaceIds . isEmpty ()) { val styleFactory = FeatureLayer . StyleFactory { feature : Feature - > // Use PlaceFeature to get the placeID of the country. if ( feature is PlaceFeature ) { if ( selectedPlaceIds . contains (( feature as PlaceFeature ). getPlaceId ())) { return @StyleFactory FeatureStyle . Builder () // Set the fill color to red. . fillColor ( Color . RED ) . build () } } return @StyleFactory null }
    // Apply the style factory function to the feature layer. countryLayer ? . setFeatureStyle ( styleFactory ) } }
    // Get a List of place IDs from the FeatureClickEvent object. private fun getPlaceIds ( features : List<Feature> ): List<String> { val placeIds : MutableList<String> = ArrayList () for ( feature in features ) { if ( feature is PlaceFeature ) { placeIds . add (( feature as PlaceFeature ). getPlaceId ()) } } return placeIds }
Create a Mobile Website
View Site in Mobile | Classic
Share by: