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

NMFNaverMapView is a map view class that contains various pre-defined control UIs used in a map. Set NMFNaverMapView properties to control UI components including controls and user location tracking.

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 heading and tilt are reset to 0. And when they are 0, the compass disappears automatically. Use the showCompass property to enable or disable the control.

  

• Scale bar: Shows the map’s scale. It does not manipulate the map. Use the showScaleBar 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 showZoomControls 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 showIndoorLevelPicker property to enable or disable the control.

• Current location button: Shows the location tracking mode. When the button is tapped, the mode is changed. For more information, refer to Location.

  
  Use the showLocationButton 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 logoAlign to set gravity, and logoMargin to set margins.
  • Use the logoInteractionEnabled property to enable or disable tapping the logo. If you disabled tapping the logo in your app, you must create a menu that links to the NAVER Maps SDK’s legal notice (-showLegalNotice) and open source license (-showOpenSourceLicense) views.

You can enable or disable each controller by changing its property. Disabled controls disappear from the screen.

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

naverMapView.showCompass = false
naverMapView.showLocationButton = true

naverMapView.showCompass = false
naverMapView.showLocationButton = true

self.naverMapView.showCompass = NO;
self.naverMapView.showLocationButton = YES;

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 scrollGestureEnabled 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 zoomGestureEnabled 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 tiltGestureEnabled property to enable or disable the gesture.
• Rotation: Rotate the map with two fingers, and the map’s bearing angle is changed. Use the rotateGestureEnabled property to enable or disable the gesture.
• Stop: When you tap the map while the camera’s animation is in progress, the animation is cancelled and the camera stops at the current position. Use the stopGestureEnabled property to enable or disable the gesture.

By changing NMFMapView 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 heading 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.

mapView.isTiltGestureEnabled = false
mapView.isRotateGestureEnabled = false

mapView.isTiltGestureEnabled = false
mapView.isRotateGestureEnabled = false

self.mapView.tiltGestureEnabled = NO;
self.mapView.rotateGestureEnabled = NO;

UI events

The NAVER Maps SDK provides various UI events in response to users’ tap. As touch events of a map extend UIGestureRecognizer, make sure that gesture events you want to add are not overlapped with them.

Tap maps

If a delegate is set to the NMFMapView.delegate property, the -didTapMapView:LatLng: delegate method is called when the map is tapped, with the screen coordinates and the map coordinates of the tapped position passed as a parameter.

The following code example displays the coordinates of the tapped position on the map.

func didTapMapView(_ point: CGPoint, latLng latlng: NMGLatLng) {
    print("\(latlng.lat), \(latlng.lng)")
}

func didTapMapView(_ point: CGPoint, latLng latlng: NMGLatLng) {
    print("\(latlng.lat), \(latlng.lng)")
}

- (void)didTapMapView:(CGPoint)point LatLng:(NMGLatLng *)latlng {
    NSLog(@"%f, %f", latlng.lat, latlng.lng);
}

Tap symbols

The NAVER Maps SDK distinguishes between tapping symbols on the map and tapping the map itself. When a symbol is tapped, the -mapView:didTapSymbol: delegate method is called with the tapped symbol object passed as a parameter. You can get the tapped map view object and caption text from the symbol object.

A symbol tap event can be propagated to the map. To propagate the event to the map, you should make NMFMapView’s -mapView:didTapSymbol: return NO. Then, after the -mapView:didTapSymbol: returns NO, the -didTapMapView:LatLng: of the map is called. On the contrary, if the -mapView:didTapSymbol: returns YES, it is considered that the symbol consumes the event and thus the -mapView:didTapSymbol: of the map is not called.

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

func didTapMapView(_ point: CGPoint, latLng latlng: NMGLatLng) {
    print("Map is tapped")
}

func mapView(_ mapView: NMFMapView, didTap symbol: NMFSymbol) {
    if symbol.caption == "Seoul Metropolitan Government" {
        print("Seoul Metropolitan Government is tapped")
        return true

    } else {
        print("Symbol is tapped")
        return false
    }
}

func didTapMapView(_ point: CGPoint, latLng latlng: NMGLatLng) {
    print("Map is tapped")
}

func mapView(_ mapView: NMFMapView, didTap symbol: NMFSymbol) {
    if symbol.caption == "Seoul Metropolitan Government" {
        print("Seoul Metropolitan Government is tapped")
        return true

    } else {
        print("Symbol is tapped")
        return false
    }
}

- (void)didTapMapView:(CGPoint)point LatLng:(NMGLatLng *)latlng {
    NSLog(@"Map is tapped");
}

- (void)mapView:(NMFMapView *)mapView didTapSymbol:(NMFSymbol *)symbol {
    if ([symbol.caption isEqualToString:@"Seoul Metropolitan Government"]) {
        NSLog(@"Seoul Metropolitan Government is tapped");
        return YES;
    } else {
        NSLog(@"Symbol is tapped");
        return NO;
    }
}

Tap overlays

Like symbols, an overlay can receive a touch event, consume or propagate it. However, an overlay touch event is passed to each overly, unlike map or symbol touch events, and you should add an event handler to each overlay. Add overlayTouchHandler to an overlay’s touchHandler property to receive a touch event for the overlay. When the overlay is tapped, the block method specified in the overlayTouchHandler is called with the tapped overlay object passed as a parameter.

An overlay touch event can be propagated to the map. To propagate the event to the map, you should make overlayTouchHandler return NO. Then, after the block method is executed, the -didTapMapView:LatLng: of the map is called. On the contrary, if the overlayTouchHandler returns YES, it is considered that the overlay consumes the event and thus the -didTapMapView:LatLng: of the map is not called.

The following code example displays a log saying “Marker is touched” when a marker is tapped.

marker.touchHandler = { (overlay: NMFOverlay) -> Bool in
    print("Marker is touched")
    return true // Consumes the event, and the didTapMapView event does not occur.
}

marker.touchHandler = { (overlay: NMFOverlay) -> Bool in
    print("Marker is touched")
    return true // Consumes the event, and the didTapMapView event does not occur.
}

marker.touchHandler = ^BOOL(NMFOverlay *overlay) {
    NSLog(@"Marker is touched");
    return YES; // Consumes the event, and the didTapMapView event does not occur.
};

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 tap an overlay that does not have the event listener added, the tap is ignored. For example, if there are two overlays overlapped with each other and the one on top of the other does not have an event listener added, the other one receives a click event. If there is no overlapped overlay or an event listener is not added, it is considered that the map is tapped.