logo
Tutorials Examples naver map js api v3 네이버 지도 API Basics of Creating a GL

Basics of Creating a GL

The GL submodule is not compatible with other submodules (e.g., drawing, visualization). Please use the GL submodule independently.

The GL submodule is one of the submodules provided by NAVER Maps API v3, offering vector maps through WebGL rendering.

Since it depends on the client device, performance may degrade on devices with low CPU/GPU specifications.
Also, if browser hardware acceleration is disabled, it will display image tile-based maps as before.
Internet Explorer is not supported.

Using the GL submodule provides the following advantages:

  • Supports fractional zoom levels for smooth map zooming in and out
  • Provides sharp rendering results considering the client device's pixel ratio (devicePixelRatio)
  • Allows dynamic modification of various display properties

For GL examples, refer to GL Examples.

Loading the Submodule

To use GL, load the GL submodule JavaScript file as shown in the code below.

The GL submodule requires the NAVER Maps API v3 to be loaded in advance. For more information, refer to Submodule System.

NAVER Maps API v3 supports both http and https protocols.

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

Major Changes

Fractional Zoom Levels

  • Raster map: Integer
  • Vector map: Float

Default Zoom Level Change

  • Raster map: 16.
  • Vector map: 15. This is 1 level lower than the raster map zoom level.

Supported Zoom Level Range

  • Raster map: 6 ~ 21
  • Vector map: 5 ~ 20

Zoom Level Legend

Level Legend                                            
4 ~ 5 Country
6 ~ 8 Province
9 ~ 10 City/District
11 ~ 15 Town/Village
16 ~ 18 Street
19 ~ 20 Building

Switching to GL (Vector Map)

Setting Options

To use the GL submodule, the gl option has been added by extending the existing MapOptions object. Setting this option value to true will render the map as a vector map.

var map = new naver.maps.Map('map', {
    gl: true,
    zoom: 15,
    center: new naver.maps.LatLng(37.5666103, 126.9783882)
});

Examples: Creating the basic vector map