Custom Overlays

The NAVER Maps API v3 provides the OverlayView class to allow you to create a custom overlay. This class provides methods that need to be implemented to create an overlay.

The following methods are required to be implemented to create a custom overlay.

• The onAdd method is called when an overlay is added to the map.
• The draw method is called when an overlay is drawn on the map.
• The onRemove method is called when an overlay is removed from the map.

Add a custom overlay

Create a custom overlay

The following code example creates a simple DOM element overlay that inherits from OverlayView.

/**
 * Implement a custom overlay
 */
var CustomOverlay = function(options) {
    this._element = $('<div style="position:absolute;left:0;top:0;width:120px;height:30px;line-height:30px;text-align:center;background-color:#fff;border:2px solid #f00;">Custom overlay</div>')

    this.setPosition(options.position);
    this.setMap(options.map || null);
};

// CustomOverlay inherits from OverlayView.
CustomOverlay.prototype = new naver.maps.OverlayView();

CustomOverlay.prototype.constructor = CustomOverlay;

CustomOverlay.prototype.onAdd = function() {
    var overlayLayer = this.getPanes().overlayLayer;
    
    this._element.appendTo(overlayLayer);
};

CustomOverlay.prototype.draw = function() {
    // If a map object is not specified, an overlay is not drawn.
    if (!this.getMap()) {
        return;
    }

    // Change LatLng coordinates to screen coordinates by using the projection object.
    var projection = this.getProjection(),
        position = this.getPosition();

    var pixelPosition = projection.fromCoordToOffset(position);

    this._element.css('left', pixelPosition.x);
    this._element.css('top', pixelPosition.y);
};

CustomOverlay.prototype.onRemove = function() {
    this._element.remove();
    
    // If an event handler is set, remove it.
    this._element.off();
};

CustomOverlay.prototype.setPosition = function(position) {
    this._position = position;
    this.draw();
};

CustomOverlay.prototype.getPosition = function() {
    return this._position;
};

/**
 * Use a custom overlay
 */
var center = new naver.maps.LatLng(37.358202009037356, 127.10801839828491);
var map = new naver.maps.Map("map", {
    center: center,
    zoom: 12
});

// Create an overlay
var overlay = new CustomOverlay({
    position: center,
    map: map
});

// Remove an overlay 
// overlay.setMap(null);

This example contains jQuery code.

Examples: Displaying a custom overlay

Initialize a custom overlay

After creating a custom overlay, you need to connect it with the map. When the setMap(map) method is called (or the map property of the option is specified), the NAVER Maps API v3 calls the onAdd method to notify that an overlay is added to the map. So, you should implement this method to add an overlay element to one of map pane elements.

CustomOverlay.prototype.onAdd = function() {
    var overlayLayer = this.getPanes().overlayLayer;
    
    this._element.appendTo(overlayLayer);
};

This example contains jQuery code.

The getPanes method returns a MapPanes object which represents a map pane element.

Draw a custom overlay

Whenever the map needs to draw an overlay, the NAVER Maps API v3 calls the draw method. So, you should implement this method to update the location and shape of the current overlay.

CustomOverlay.prototype.draw = function() {
    // If a map object is not specified, an overlay is not drawn.
    if (!this.getMap()) {
        return;
    }

    // Change LatLng coordinates to screen coordinates by using the projection object.
    var projection = this.getProjection(),
        position = this.getPosition();

    var pixelPosition = projection.fromCoordToOffset(position);

    this._element.css('left', pixelPosition.x);
    this._element.css('top', pixelPosition.y);
};

This example contains jQuery code.

The getProjection method returns a MapSystemProjection object providing the method that converts between map coordinates and screen coordinates. You can use it to convert the map coordinates of an overlay to the screen coordinates, and to place it at the proper location.

Remove a custom overlay

When the setMap(null) method is called (or the map property of the option is set to null), the NAVER Maps API v3 calls the onRemove method to notify that an overlay is removed from the map. So, you should implement this method to remove an overlay element from the map pane elements.

CustomOverlay.prototype.onRemove = function() {
    this._element.remove();

    // If an event handler is set, remove it.
    this._element.off();
};

This example contains jQuery code.