User Interface

Users can interact with your map in various ways, such as controls and gestures. You can control the way users interact with your map, and handle UI events to provide proper feedback.

UI settings

UiSettings is a class that handles UI settings. Set UiSettings properties to control UI components including controls and gestures.

Access to the object

You cannot directly create an instance of the UiSettings class, so you should call NaverMap.getUiSettings() to get an instance. A UiSettings instance corresponds to a NaverMap instance, one to one.

The following code example gets a UiSettings instance from NaverMap.

UiSettings uiSettings = naverMap.getUiSettings();

UiSettings uiSettings = naverMap.getUiSettings();

val uiSettings = naverMap.uiSettings

Controls

Controls are buttons on the map, which provide information of the map and simple manipulation features. The NAVER Maps SDK provides the following six controls:

• Compass: Shows the camera’s rotation and tilt status. When users tap the compass, the camera’s bearing and tilt are reset to 0. And when they are 0, the compass disappears automatically. Use the compassEnabled property to enable or disable the control.

• Scale bar: Shows the map’s scale. It does not manipulate the map. Use the scaleBarEnabled property to enable or disable the control.

• Zoom button: When the button is tapped, the map’s zoom level increases or decreases by 1. Use the zoomButtonEnabled property to enable or disable the control.

• Indoor map floor picker: Shows floor information of the indoor map that is being displayed. When a floor is selected, the indoor map of the floor is displayed. It appears only when an indoor map is displayed. Use the indoorLevelPickerEnabled property to enable or disable the control.

• Current location button: Shows the location tracking mode. When the button is tapped, the mode is changed. Use the locationButtonEnabled property to enable or disable the control.

• NAVER logo: When it is tapped, a dialog box showing legends, legal notices and open source licenses appears. You cannot disable NAVER logo, but can adjust its location or disable tapping it. For apps using the NAVER Maps SDK, make sure that the NAVER logo is not covered by other UI elements.
  • Adjust the logo’s location by using logoGravity to set gravity, and logoMargin to set margins. Use the logoClickEnabled property to enable or disable tapping the logo. If you disabled clicking the logo in your app, you must create a menu that links to the NAVER Maps SDK’s legal notice activity (LegalNoticeActivity) and open source license activity (OpenSourceLicenseActivity) in the app.

By changing UiSettings’ properties, you can enable or disable each control. Disabled controls disappear from the screen.

The following code example disables the compass and enables the current location button.

uiSettings.setCompassEnabled(false);
uiSettings.setLocationButtonEnabled(true);

uiSettings.setCompassEnabled(false);
uiSettings.setLocationButtonEnabled(true);

uiSettings.isCompassEnabled = false
uiSettings.isLocationButtonEnabled = true

UiSettings does not enable you to change the location of each basic control. However, as each control is provided as a view, you can disable a basic control with UiSettings and locate a separate control view in a place you want. A control view is in the widget package. Add a view to the layout and set a map object in the map property, then the control works.

The following code example disables the basic zoom control and place an additional zoom control at the bottom right.

<FrameLayout ...>
    <FrameLayout
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.naver.maps.map.widget.ZoomControlView
        android:id="@+id/zoom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp" 
        android:layout_gravity="end|bottom" />
</FrameLayout>

FragmentManager fm = getSupportFragmentManager();
MapFragment mapFragment = (MapFragment)fm.findFragmentById(R.id.map);
if (mapFragment == null) {
    NaverMapOptions options = new NaverMapOptions().zoomControlEnabled(false);
    mapFragment = MapFragment.newInstance(options);
    fm.beginTransaction().add(R.id.map, mapFragment).commit();
}
mapFragment.getMapAsync(naverMap -> {
    ZoomControlView zoomControlView = findViewById(R.id.zoom);
    zoomControlView.setMap(naverMap);
});

FragmentManager fm = getSupportFragmentManager();
MapFragment mapFragment = (MapFragment)fm.findFragmentById(R.id.map);
if (mapFragment == null) {
    NaverMapOptions options = new NaverMapOptions().zoomControlEnabled(false);
    mapFragment = MapFragment.newInstance(options);
    fm.beginTransaction().add(R.id.map, mapFragment).commit();
}
mapFragment.getMapAsync(naverMap -> {
    ZoomControlView zoomControlView = findViewById(R.id.zoom);
    zoomControlView.setMap(naverMap);
});

val fm = supportFragmentManager
val mapFragment = fm.findFragmentById(R.id.map) as MapFragment?
        ?: MapFragment.newInstance(NaverMapOptions().zoomControlEnabled(false))
                .also {
                    fm.beginTransaction().add(R.id.map, it).commit()
                }
mapFragment.getMapAsync {
    val zoomControlView = findViewById(R.id.zoom) as ZoomControlView
    zoomControlView.map = naverMap
}

Gestures

Users can move the camera with various gestures including tap, drag and pinch. The NAVER Maps SDK provides the following five gestures:

• Scroll: Drag the map with one or more fingers, and the camera moves following those fingers. Use the scrollGesturesEnabled property to enable or disable the gesture.
• Zoom: Double-tap the map, and the map’s zoom level increases by one level. Two-finger tap the map, and the zoom level decreases by one level. You can also use pinch, stretch, or one-finger zoom gesture to change the map’s zoom level. Use the zoomGesturesEnabled property to enable or disable the gesture.
• Tilt: Drag down or up the map with two fingers, and the map’s tilt angle is changed. Use the tiltGesturesEnabled property to enable or disable the gesture.
• Rotation: Rotate the map with two fingers, and the map’s bearing angle is changed. Use the rotateGesturesEnabled property to enable or disable the gesture.
• Stop: When you touch the map while the camera’s animation is in progress, the animation is cancelled and the camera stops at the current position. Use the stopGesturesEnabled property to enable or disable the gesture.

By changing UiSettings properties, you can enable or disable each gesture. If you want to show users the map that is neither tilted nor rotated only, you should not set the tilt or bearing angle when moving the camera and should also disable gestures so that users cannot tilt or rotate the map.

The following code example disables tilt and rotate gestures.

uiSettings.setTiltGesturesEnabled(false);
uiSettings.setRotateGesturesEnabled(false);

uiSettings.setTiltGesturesEnabled(false);
uiSettings.setRotateGesturesEnabled(false);

uiSettings.isTiltGesturesEnabled = false
uiSettings.isRotateGesturesEnabled = false

Set initial values

You can use NaverMapOptions or XML attributes to set an initial value for each property before creating a map object.

The following code example enables the current location button and disables the tilt gesture by using NaverMapOptions.

NaverMapOptions options = new NaverMapOptions()
    .locationButtonEnabled(true)
    .tiltGesturesEnabled(false);

NaverMapOptions options = new NaverMapOptions()
    .locationButtonEnabled(true)
    .tiltGesturesEnabled(false);

val options = NaverMapOptions()
        .locationButtonEnabled(true)
        .tiltGesturesEnabled(false)

The following code example enables the current location button and disables the tilt gesture by using XML attributes.

<androidx.fragment.app.FragmentContainerView xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/map"
    android:name="com.naver.maps.map.MapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:navermap_locationButtonEnabled="true"
    app:navermap_tiltGesturesEnabled="false" />

UI events

The NAVER Maps SDK provides various UI events in response to users’ touch.

Click and long click

Add OnMapClickListener with the setOnMapClickListener() method to receive a click event for the map. When the map is clicked, the onMapClick() callback method is called, with the screen coordinates and the map coordinates of the clicked position passed as a parameter.

The following code example displays the coordinates of the clicked position on the map as a toast message.

naverMap.setOnMapClickListener((point, coord) ->
    Toast.makeText(this, coord.latitude + ", " + coord.longitude,
        Toast.LENGTH_SHORT).show());

naverMap.setOnMapClickListener((point, coord) ->
    Toast.makeText(this, coord.latitude + ", " + coord.longitude,
        Toast.LENGTH_SHORT).show());

naverMap.setOnMapClickListener { point, coord ->
    Toast.makeText(this, "${coord.latitude}, ${coord.longitude}",
            Toast.LENGTH_SHORT).show()
}

Add OnMapLongClickListener with the setOnMapLongClickListener() method to receive a long click event for the map. When the map is long-clicked, the onMapLongClick() callback method is called, with the screen coordinates and the map coordinates of the clicked position passed as a parameter.

The following code example displays the coordinates of the long-clicked position on the map as a toast message.

naverMap.setOnMapLongClickListener((point, coord) ->
    Toast.makeText(this, coord.latitude + ", " + coord.longitude,
        Toast.LENGTH_SHORT).show());

naverMap.setOnMapLongClickListener((point, coord) ->
    Toast.makeText(this, coord.latitude + ", " + coord.longitude,
        Toast.LENGTH_SHORT).show());

naverMap.setOnMapLongClickListener { point, coord ->
    Toast.makeText(this, "${coord.latitude}, ${coord.longitude}",
            Toast.LENGTH_SHORT).show()
}

Click symbols

The NAVER Maps SDK distinguishes between clicking symbols on the map and clicking the map itself. Add OnSymbolClickListener with the setOnSymbolClickListener() method to receive a click event for the map’s symbols. When a symbol is clicked, the onSymbolClick() callback method is called with the clicked symbol object passed as a parameter. You can get the location and caption text of the clicked symbol from the symbol object.

A symbol click event can be propagated to the map. To propagate the event to the map, you should make OnSymbolClickListener’s onSymbolClick() return false. After the onSymbolClick() returns false, the OnClickListener.onClick() of the map is called. On the contrary, if the onSymbolClick() returns true, it is considered that the symbol consumes the event and thus the OnClickListener.onClick() of the map is not called.

The following code example displays a toast message saying “Seoul Metropolitan Government is clicked” when you click the symbol with the caption text "Seoul Metropolitan Government," and a toast message saying “Map is clicked” when you click other symbols or the map.

naverMap.setOnMapClickListener((point, coord) ->
    Toast.makeText(this, "Map is clicked", Toast.LENGTH_SHORT).show()
);

naverMap.setOnSymbolClickListener(symbol -> {
    if ("Seoul Metropolitan Government".equals(symbol.getCaption())) {
        Toast.makeText(this, "Seoul Metropolitan Government is clicked",
            Toast.LENGTH_SHORT).show();
        // Consumes the event, and the OnMapClick event does not occur.
        return true;
    }
    // Propagates the event, and the OnMapClick event occurs.
    return false;
});

naverMap.setOnMapClickListener((point, coord) ->
    Toast.makeText(this, "Map is clicked", Toast.LENGTH_SHORT).show()
);

naverMap.setOnSymbolClickListener(symbol -> {
    if ("Seoul Metropolitan Government".equals(symbol.getCaption())) {
        Toast.makeText(this, "Seoul Metropolitan Government is clicked",
            Toast.LENGTH_SHORT).show();
        // Consumes the event, and the OnMapClick event does not occur.
        return true;
    }
    // Propagates the event, and the OnMapClick event occurs.
    return false;
});

naverMap.setOnMapClickListener {
    Toast.makeText(this, "Map is clicked", Toast.LENGTH_SHORT).show()
}

naverMap.setOnSymbolClickListener { symbol ->
    if (symbol.caption == "Seoul Metropolitan Government") {
        Toast.makeText(this, "Seoul Metropolitan Government is clicked",
                Toast.LENGTH_SHORT).show()
        // Consumes the event, and the OnMapClick event does not occur.
        true
    } else {
        // Propagates the event, and the OnMapClick event occurs.
        false
    }
}

Click overlays

Like symbols, an overlay can receive a click event, consume or propagate it. However, an overlay click event is passed to each overly, unlike map or symbol click events, and you should add an event listener to each overlay. Add Overlay.OnClickListener with an overlay’s setOnClickListener() method to receive a click event for the overlay. When the overlay is clicked, the onClick() callback method is called with the clicked overlay object passed as a parameter.

An overlay click event can be propagated to the map. To propagate the event to the map, you should make Overlay.OnClickListener’s onClick() return false. After the onClick() returns false, the OnClickListener.onClick() of the map is called. On the contrary, if the onClick() returns true, it is considered that the symbol consumes the event and thus the OnClickListener.onClick() of the map is not called.

The following code example displays a toast message saying “Marker is clicked” when you click a marker.

marker.setOnClickListener(overlay -> {
    Toast.makeText(this, "Marker 1 is clicked", Toast.LENGTH_SHORT).show();
    // Consumes the event, and the OnMapClick event does not occur
    return true;
});

marker.setOnClickListener(overlay -> {
    Toast.makeText(this, "Marker 1 is clicked", Toast.LENGTH_SHORT).show();
    // Consumes the event, and the OnMapClick event does not occur
    return true;
});

marker.setOnClickListener { overlay ->
    Toast.makeText(this, "Marker 1 is clicked", Toast.LENGTH_SHORT).show()
    // Consumes the event, and the OnMapClick event does not occur.
    true
}

Overlays can propagate an event only to the map. That is, even if there are multiple overlays or symbols overlapped under the overlay that triggers an event, it is not propagated to those overlays or symbols. When you click an overlay that does not have the event listener added, the click is ignored. For example, if there are two overlays overlapped with each other and the one on the top does not have the event listener added, the other one receives the click event. If there is no overlapped overlay or the event listener is not added, it is considered that that map is clicked.

Double tap and two-finger tap

Double tap and two-finger tap zoom in or out the map as long as the zoom gestures are not disabled. Add an event listener to the map to receive an event for these gestures, and consume the event if you do not want the map to zoom in or out according to them.

Add OnMapDoubleTapListener with the setOnMapDoubleTapListener() method to receive a double tap event. When the map is double-tapped, the onMapDoubleTap() callback method is called with the screen coordinates and the map coordinates of the double-tapped position passed as a parameter. If you make the onMapDoubleTap() return true, the event is consumed and the screen is not zoomed in.

The following code example displays the coordinates of the double-tapped position on the map as a toast message and consumes the event so that the screen is not zoomed in.

Add OnMapTwoFingerTapListener with the setOnMapTwoFingerTapListener method to receive a two-finger tap event. When the map is tapped with two fingers, the `onMapTwoFingerTap() callback method is called with the screen coordinates and the map coordinates of the two–finger-tapped position passed as a parameter. If you make the onMapTwoFingerTap() return true, the event is consumed and the screen is not zoomed out.

The following code example displays the coordinates of the two–finger-tapped position on the map as a toast message and consumes the event so that the screen is not zoomed out.

naverMap.setOnMapTwoFingerTapListener((point, coord) -> {
    Toast.makeText(this, coord.latitude + ", " + coord.longitude,
        Toast.LENGTH_SHORT).show();
    return true;
});

naverMap.setOnMapTwoFingerTapListener((point, coord) -> {
    Toast.makeText(this, coord.latitude + ", " + coord.longitude,
        Toast.LENGTH_SHORT).show();
    return true;
});

naverMap.setOnMapTwoFingerTapListener { point, coord ->
    Toast.makeText(this, "${coord.latitude}, ${coord.longitude}",
            Toast.LENGTH_SHORT).show()
    true
}