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 Country feature 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
}