Visualizing Data

The visualization submodule provides classes that visually express data containing geographical information to help users better understand it.

The data is rendered in the client side, so bigger data may cause poor performance. The following list shows available web browsers and platforms.

• PC: Internet Explorer 9 or later, Chrome, Safari 5 or later, Firefox
• Mobile: Android 5.0 or later, iOS 9.0 or later

The visualization classes currently available are as follows:

• Heatmap
• Dot density map

Refer to Visualization examples.

Load submodules

To visually express data containing geographical information, you should load the JavaScript file of the visualization submodule. Load the file as in the code below. This submodule requires the NAVER Maps API v3 to be loaded in advance. For more information, refer to Submodule System.

The NAVER Maps API v3 supports both http and https protocols.

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=visualization"></script>

Using heatmaps

A heatmap expresses the intensity of geographical data with colors. By default, areas of higher intensity are colored red, and areas of lower intensity blue.

HeatMap is a class that represents a heatmap. Create a new instance with the new operator. Use heatmap options to initialize properties of a heatmap. The options are created with object literals. For more information, refer to HeatMapOptions specification.

var data = [
    new naver.maps.LatLng(37.75,125.4),
    new naver.maps.LatLng(35.42,128.56),
    new naver.maps.LatLng(35.57,128.34),
    
    // (omitted)

    new naver.maps.LatLng(36.30,125.9),
    new naver.maps.LatLng(35.80,128.2),
    new naver.maps.LatLng(38.70,127.9)
];

naver.maps.onJSContentLoaded = function() {
    var heatmap = new naver.maps.visualization.HeatMap({
        map: map,
        data: data
    });
};

Examples: Visualizing a heatmap

Using dot density maps

A dot density map expresses locations of geographical data with dots.

DotMap is a class that represents a dot density map. Create a new instance with the new operator. Use dot density map options to initialize properties of a dot density map. The options are created with object literals. For more information, refer to DotMapOptions specification.

var data = [
    new naver.maps.LatLng(37.75,125.4),
    new naver.maps.LatLng(35.42,128.56),
    new naver.maps.LatLng(35.57,128.34),
    
    // (omitted)

    new naver.maps.LatLng(36.30,125.9),
    new naver.maps.LatLng(35.80,128.2),
    new naver.maps.LatLng(38.70,127.9)
];

naver.maps.onJSContentLoaded = function() {
    var dotmap = new naver.maps.visualization.DotMap({
        map: map,
        data: data
    });
};

Examples: Visualizing a dot density map

Applying weights

WeightedLocation class visually expresses weighted data as well as geographical information. A weight of data is normalized into the range, 0-1.

The visualization submodule internally manages all data with a WeightedLocation instance. If no weight is applied to data, 1 is used by default.

Normalized weights for each visualization type are as follows:

• HeatMap: A weight in a heatmap represents the impact intensity of each point. The range of intensity is 0.1-1. The intensity of no weight is 1.
• DotMap: A weight in a dot density map is used as a radius of a point. The range of a radius is 1-{custom radius}. A radius with no weight is a custom radius.

There are several ways to create weighted data for geographical information. As in the code below, you can create a new instance with the new operator.

var data = [
    new naver.maps.visualization.WeightedLocation(36.95, 129.92, 3.1),

    // (omitted)

    new naver.maps.visualization.WeightedLocation(33.36, 127.12, 2.1)
];

Or you can use literal data as in the code below. Then, the visualization submodule internally converts it into WeightedLocation.

var data = [
    {"weight":2.0, "location": [126.58,36.90]},

    // (omitted)

    {"weight":2.9, "location": [127.12,33.36]}
];

// (Or)

var data = [
    {"weight":2.0, "location": new naver.maps.LatLng(36.90,126.58)},

    // (omitted)

    {"weight":2.9, "location": new naver.maps.LatLng(33.36,127.12)}
];

// (Or)

var data = [
    {"weight":2.0, "location": {"lat": 33.36, "lng": 127.12}},

    // (omitted)

    {"weight":2.9, "location": {"lat": 33.36, "lng": 127.12}}
];

Examples: Creating a weighted heatmap
Examples: Creating a weighted dot density map