MarkerView

Join the Mapbox Developers Discord Communityarrow-right

Not compatible with the Maps SDK v10

This plugin is not compatible with the Maps SDK v10 or higher. See the Markers and annotations guide.

This example uses the MarkerView plugin to add map markers as Android views in a simplified way.

You must install the plugin before running the application.

Note

This example is a part of the Mapbox Android Demo app. You can find the values for all referenced resources in the res directory. For example, see res/values/activity_strings.xml for R.string.* references used in this example.

activity_markerview_plugin

github View on GitHub

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:mapbox="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".examples.plugins.MarkerViewPluginActivity">

    <com.mapbox.mapboxsdk.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        mapbox:mapbox_cameraTargetLat="48.13726"
        mapbox:mapbox_cameraTargetLng="11.57555"
        mapbox:mapbox_cameraZoom="12"/>

</FrameLayout>

marker_view_bubble

github View on GitHub

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="200dp"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/cardview_dark_background"
    app:cardCornerRadius="10dp"
    app:cardElevation="5dp"
    app:cardUseCompatPadding="true"
    android:layout_height="wrap_content">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <TextView
        android:id="@+id/marker_window_title"
        android:layout_width="wrap_content"
        android:padding="8dp"
        tools:text="Text here is this"
        android:textStyle="bold"
        android:textColor="@color/black_semi_transparent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/marker_window_snippet"
        android:layout_width="wrap_content"
        android:padding="8dp"
        tools:text="Text here is this"
        android:textColor="@color/black_semi_transparent"
        android:layout_height="wrap_content" />
    </LinearLayout>
</androidx.cardview.widget.CardView>

MarkerViewPluginActivity.java

github View on GitHub

package com.mapbox.mapboxandroiddemo.examples.plugins;

import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.TextView;

import com.mapbox.mapboxandroiddemo.R;
import com.mapbox.mapboxsdk.Mapbox;
import com.mapbox.mapboxsdk.geometry.LatLng;
import com.mapbox.mapboxsdk.maps.MapView;
import com.mapbox.mapboxsdk.maps.MapboxMap;
import com.mapbox.mapboxsdk.maps.OnMapReadyCallback;
import com.mapbox.mapboxsdk.maps.Style;
import com.mapbox.mapboxsdk.plugins.markerview.MarkerView;
import com.mapbox.mapboxsdk.plugins.markerview.MarkerViewManager;

import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;

/**
 * Use the Mapbox MarkerView Plugin to create a marker which uses a custom Android view as the icon.
 */
public class MarkerViewPluginActivity extends AppCompatActivity {

  private MapView mapView;
  private MarkerView markerView;
  private MarkerViewManager markerViewManager;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Mapbox access token is configured here. This needs to be called either in your application
    // object or in the same activity which contains the mapview.
    Mapbox.getInstance(this, getString(R.string.access_token));

    // This contains the MapView in XML and needs to be called after the access token is configured.
    setContentView(R.layout.activity_markerview_plugin);

    mapView = findViewById(R.id.mapView);
    mapView.onCreate(savedInstanceState);
    mapView.getMapAsync(new OnMapReadyCallback() {
      @Override
      public void onMapReady(@NonNull final MapboxMap mapboxMap) {

        mapboxMap.setStyle(Style.MAPBOX_STREETS, new Style.OnStyleLoaded() {
          @Override
          public void onStyleLoaded(@NonNull Style style) {

            // Initialize the MarkerViewManager
            markerViewManager = new MarkerViewManager(mapView, mapboxMap);

            // Use an XML layout to create a View object
            View customView = LayoutInflater.from(MarkerViewPluginActivity.this).inflate(
              R.layout.marker_view_bubble, null);
            customView.setLayoutParams(new FrameLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT));

            // Set the View's TextViews with content
            TextView titleTextView = customView.findViewById(R.id.marker_window_title);
            titleTextView.setText(R.string.draw_marker_options_title);

            TextView snippetTextView = customView.findViewById(R.id.marker_window_snippet);
            snippetTextView.setText(R.string.draw_marker_options_snippet);

            // Use the View to create a MarkerView which will eventually be given to
            // the plugin's MarkerViewManager class
            markerView = new MarkerView(new LatLng(48.13863, 11.57603), customView);
            markerViewManager.addMarker(markerView);
          }
        });
      }
    });
  }

  @Override
  public void onResume() {
    super.onResume();
    mapView.onResume();
  }

  @Override
  protected void onStart() {
    super.onStart();
    mapView.onStart();
  }

  @Override
  protected void onStop() {
    super.onStop();
    mapView.onStop();
  }

  @Override
  public void onPause() {
    super.onPause();
    mapView.onPause();
  }

  @Override
  public void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    mapView.onSaveInstanceState(outState);
  }

  @Override
  public void onLowMemory() {
    super.onLowMemory();
    mapView.onLowMemory();
  }

  @Override
  public void onDestroy() {
    super.onDestroy();
    if (markerViewManager != null) {
      markerViewManager.onDestroy();
    }
    mapView.onDestroy();
  }
}

Join the Mapbox Developers Discord Communityarrow-right

Was this example helpful?