How to Add Markers and Point Locations on Ola Maps for Android

In this guide, we will walk you through how to add and animate markers on Ola Maps in your Android application. If you haven't yet integrated Ola Maps into your project, follow our complete integration guide here.

Prerequisites

• Ensure that Ola Maps is integrated into your project. Refer to our full integration guide here.

Step-by-Step Guide

1. Adding a Basic Marker

Basic Marker or Location Point in Ola Maps

To add a basic marker on the Ola Map, use the following code:

// Coordinates for the marker
double latitude = 18.516726; // Example latitude
double longitude = 73.856255; // Example longitude
// Add a basic marker
olaMapView.addMarker(Point.fromLngLat(longitude, latitude));

Here, Point.fromLngLat(longitude, latitude) creates a marker at the specified latitude and longitude.

2. Adding a Custom Marker

Custom Marker or Location Point in Ola Maps

For a custom marker, you need to specify additional parameters such as the marker's icon. Here’s how to do it:

// Coordinates for the custom marker
LatLng latLng = new LatLng();
latLng.setLongitude(longitude);
latLng.setLatitude(latitude);
// Add a custom marker
olaMapView.addMarker(latLng, "", R.drawable.marker, false);

In this example:

• latLng specifies the position of the marker.
• R.drawable.marker is the resource ID of the custom marker icon.

3. Animating the Camera to the Marker

To animate the camera to zoom in on the marker, use the following code:

// Coordinates for the zoom animation
LatLng latLng = new LatLng();
latLng.setLongitude(longitude);
latLng.setLatitude(latitude);
// Animate camera to zoom into the marker
olaMapView.zoomCamera(10, latLng, 1000, new Function0<Unit>() {
@Override
public Unit invoke() {
// Code to execute when zoom animation finishes
return null;
}
}, new Function0<Unit>() {
@Override
public Unit invoke() {
// Code to execute if zoom animation is cancelled
return null;
}
});

Here:

• 10 specifies the zoom level.
• latLng is the location to zoom into.
• 1000 is the duration of the animation in milliseconds.

Full Example Code

Here is the complete MainActivity.java integrating all the above functionalities:

import android.os.Bundle;
import android.util.Log;
import androidx.appcompat.app.AppCompatActivity;
import com.mapbox.geojson.Point;
import com.ola.maps.mapslibrary.models.OlaMapsConfig;
import com.ola.maps.navigation.ui.v5.MapStatusCallback;
import com.ola.maps.navigation.v5.navigation.OlaMapView;
import com.ola.maps.navigation.ui.v5.camera.NavigationCamera;
import kotlin.Unit;
import kotlin.jvm.functions.Function0;
import okhttp3.OkHttpClient;

public class MainActivity extends AppCompatActivity implements MapStatusCallback {
    private OlaMapView olaMapView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        olaMapView = findViewById(R.id.olaMapView);

        // Initialize OlaMapView
        olaMapView.onCreate(savedInstanceState);

        olaMapView.initialize(
                this,
                new OlaMapsConfig.Builder()
                        .setApplicationContext(getApplicationContext())
                        .setClientId("YOUR CLIENT ID")
                        .setMapBaseUrl("https://api.olamaps.io")
                        .setInterceptor(new AccessTokenInterceptor()) 
                        .setMinZoomLevel(3.0)
                        .setMaxZoomLevel(21.0)
                        .setZoomLevel(1.0)
                        .build()
        );
    }

    @Override
    public void onMapReady() {
      
      // Example coordinates
        double latitude = 18.516726;
        double longitude = 73.856255;

        // Add a basic marker
        olaMapView.addMarker(Point.fromLngLat(longitude, latitude));

      // Add a custom marker
        LatLng latLng = new LatLng();
        latLng.setLongitude(longitude);
        latLng.setLatitude(latitude);
       // olaMapView.addMarker(latLng, "", R.drawable.marker, false); 

        // Animate camera to zoom in on the marker
        olaMapView.zoomCamera(10, latLng, 1000, new Function0<Unit>() {
            @Override
            public Unit invoke() {
                // Code to execute when zoom animation finishes
                return null;
            }
        }, new Function0<Unit>() {
            @Override
            public Unit invoke() {
                // Code to execute if zoom animation is cancelled
                return null;
            }
        });

    }

    @Override
    public void onMapLoadFailed(String s) {
        Log.e("OlaMap", "Map load failed: " + s);
    }

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

    @Override
    protected void onDestroy() {
        olaMapView.onDestroy();
        super.onDestroy();
    }
}

Conclusion

You’ve now learned how to add and animate markers on Ola Maps. This allows you to enhance your map’s interactivity and user experience. For a full guide on integrating Ola Maps, refer to our detailed integration tutorial here.

If you found this guide helpful, please like, share, and follow for more updates and tutorials!