How to make Mapbox Marker clickable and get their properties?

Question

I have the main activity where i load all my markers from the database into a List and then i add them in my map.

public void onMapReady(@NonNull final MapboxMap mapboxMap) {

        MainActivity.this.mapboxMap = mapboxMap;

        StringRequest request = new StringRequest(url, new Response.Listener<String>() {
            @Override
            public void onResponse(String response) {
              try {

                    JSONArray jsonArray = new JSONArray(response);
                    List<Feature> symbolLayerIconFeatureList = new ArrayList<>();

                    for(int i = 0; i < jsonArray.length(); i++){
                        JSONObject crag = jsonArray.getJSONObject(i);

                        String nome = crag.getString("nome");
                        String tipo = crag.getString("tipo");
                        Double lng = crag.getDouble("longitudine");
                        Double lat = crag.getDouble("latitudine");

                        symbolLayerIconFeatureList.add(Feature.fromGeometry(Point.fromLngLat(lng,lat)));
                        symbolLayerIconFeatureList.get(i).addStringProperty("NAME_PROPERTY_KEY", nome);
                        symbolLayerIconFeatureList.get(i).addStringProperty("TYPE_KEY", tipo);

                    }

                    mapboxMap.setStyle(new Style.Builder().fromUri("mapbox://styles/mapbox/streets-v11")

                            .withSource(new GeoJsonSource(SOURCE_ID,
                                    FeatureCollection.fromFeatures(symbolLayerIconFeatureList)))

                            .withLayer(new SymbolLayer(LAYER_ID, SOURCE_ID)
                                    .withProperties(
                                            iconImage(get("TYPE_KEY")),
                                            iconAllowOverlap(true),
                                            iconIgnorePlacement(true),
                                            textOffset(new Float[]{0f,-2.5f}),
                                            textIgnorePlacement(true),
                                            textAllowOverlap(true),
                                            textField(get("NAME_PROPERTY_KEY"))
                                    )
                            ), new Style.OnStyleLoaded() {
                        @Override
                        public void onStyleLoaded(@NonNull Style style) {
                            mapboxMap.addOnMapClickListener(MainActivity.this);
                            mapboxMap.getUiSettings().setLogoEnabled(false);
                            mapboxMap.getUiSettings().setAttributionEnabled(false);

                            enableLocationComponent(style);

                        }
                    });
                } catch (JSONException e){
                    e.printStackTrace();
                }
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                error.printStackTrace();
            }
        });

        mQueue.add(request);

        mapView.addOnStyleImageMissingListener(new MapView.OnStyleImageMissingListener() {
            @Override
            public void onStyleImageMissing(@NonNull String id) {
                if(id.equals("Falesia")){
                    addImage(id, R.drawable.icona_falesia);
                }  else{
                    addImage(id, R.drawable.icon_gym);
                }
            }
        });
    }

I can't figure how to make them clickable

I saw the documentation and the example and maybe i have to implement onMapClick method, but i don't know what put in it.

Does anyone know how to implement it or other way to make them clickable?

Thank you.

score 0 · Accepted Answer · answered Oct 29 '20 at 15:05

You can add a map click listener in your onMapReady-callback. In your onMapClick-method you set up a query at the selected point to see if there are any features in the symbollayer at that location. Then you get a list of features in that point that you can use. Here's a very condensed version of what I'm using:

    private void handleMapClick(LatLng point){
        if (myMapboxMap != null){
            final PointF screenPoint = myMapboxMap.getProjection().toScreenLocation(point);
            List<Feature> features = myMapboxMap.queryRenderedFeatures(screenPoint, SYMBOL_LAYER_ID);
            if (!features.isEmpty()) {
                //do stuff with features in feature list
            }
        }
    }

How to make Mapbox Marker clickable and get their properties?

1 Answers1