Enabling HERE Maps in South Korea Using the HERE Maps API for JavaScript

Introduction

With HERE’s powerful location services, you can deliver interactive, high-quality mapping experiences tailored for South Korea. Setting up HERE Maps using the HERE Maps API for JavaScript involves ensuring the correct configuration of app credentials and region-specific endpoints. This guide walks you through the process of enabling HERE Maps in South Korea and outlines how to integrate with HERE’s tile services, traffic data, and additional layers.

Important Note on Credentials and Access

To access the South Korean map tiles and related services, you must have an evaluation plan that includes the appropriate region coverage. Before integrating, please reach out to your Account Executive (AE). They can coordinate with the HERE Access Support team to ensure that the correct app_id and app_code are enabled for South Korea. Without these properly configured credentials, you will not be able to access the localized services.

Prerequisites

A valid app_id and app_code authorized for South Korea.

Approval from the HERE team after contacting your AE.

Sample Integration Steps

Below is a sample HTML/JS snippet showcasing how to initialize the HERE platform for South Korea using the corresponding endpoints and load various map layers:

Copied

        <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>HERE Maps in South Korea</title>
    <!-- Include HERE Maps JavaScript API -->
    <script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-pano.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-clustering.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-data.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;

        }
        #mapContainer {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body onload="mapInit()">
    <input type="text" id="input-app_id" placeholder="Enter APP_ID" />
    <input type="text" id="input-app_code" placeholder="Enter APP_CODE" />
    <button onclick="mapInit()">Initialize Map</button>
    <div id="mapContainer"></div>
    <div id="releaseInfoTxt"></div>
    <script>
        var mapInit = function () {
            // Retrieve app_id and app_code from input fields 
            var app_id = document.getElementById("input-app_id").value;
            var app_code = document.getElementById("input-app_code").value;
            // If no values are provided, check URL parameters 
            if (app_id === "" || app_code === "") {
                app_id = getUrlParameter('app_id');
                app_code = getUrlParameter('app_code');
            }
            // If still no values, exit if credentials are missing 
            if (app_id === "" || app_code === "") {
                alert("Please enter valid APP_ID and APP_CODE");
                return;
            }
            // Use HTTPS and handle HiDPI screens 
            var secure = true;
            var hidpi = window.devicePixelRatio > 1;
            // Initialize platform for South Korea (cc.api.heremaps.kr) 
            var platform = new H.service.Platform({
                app_id: app_id,
                app_code: app_code,
                baseUrl: new H.service.Url('http', 'cc.api.heremaps.kr'),
                useHTTPS: secure
            });
            // Define map tile services: base, aerial, and traffic 
            var base = platform.getMapTileService({ type: 'base' });
            var areal = platform.getMapTileService({ type: 'aerial' });
            var traffic = platform.getMapTileService({ type: 'traffic' });
            // Traffic incidents provider 
            var incidentsProvider = new H.service.TrafficIncidentsProvider(platform.getTrafficIncidentsService(), undefined, null);
            var incidentsLayer = new H.map.layer.MarkerTileLayer(incidentsProvider);
            // Define various layer configurations 
            var defaultLayers = {
                normal: {
                    map: base.createTileLayer('maptile', 'normal.day', 256, 'jpg', { lg2: "eng" }, hidpi ? 2 : 1, false),
                    label: base.createTileLayer('labeltile', 'normal.day', 256, 'jpg', { lg2: "eng" }, hidpi ? 2 : 1, false),
                    traffic: traffic.createTileLayer('traffictile', 'normal.day', 256, 'jpg', { lg2: "eng" }, hidpi ? 2 : 1, false)
                },
                satellite: {
                    map: areal.createTileLayer('maptile', 'hybrid.day', 256, 'jpg', { lg2: "eng" }, hidpi ? 2 : 1, false),
                    traffic: traffic.createTileLayer('traffictile', 'hybrid.day', 256, 'jpg', { lg2: "eng" }, hidpi ? 2 : 1, false)
                },
                terrain: {
                    map: areal.createTileLayer('maptile', 'terrain.day', 256, 'jpg', { lg2: "eng" }, hidpi ? 2 : 1, false),
                    traffic: traffic.createTileLayer('traffictile', 'terrain.day', 256, 'jpg', { lg2: "eng" }, hidpi ? 2 : 1, false)
                },
                incidents: incidentsLayer
            };
            var engineTypeP2d = H.Map.EngineType['P2D'];
            // Create the map with default normal layer 
            var map = new H.Map(
                document.getElementById('mapContainer'),
                defaultLayers.normal.map,
                {
                    zoom: 12,
                    engineType: engineTypeP2d,
                    center: { lat: 37.465241849335015, lng: 127.03659770355904 }
                }
            );
            // Enable map event system and interaction 
            var mapevents = new H.mapevents.MapEvents(map);
            var behavior = new H.mapevents.Behavior(mapevents);
            // Add UI controls 
            var ui = H.ui.UI.createDefault(map, defaultLayers);
            // Display service release info 
            document.getElementById("releaseInfoTxt").innerHTML = "Used Service Releases:\n";
            document.getElementById("releaseInfoTxt").innerHTML += "JS API: 3." + H.buildInfo().version;
            // Handle window resize 
            window.addEventListener('resize', function () {
                map.getViewPort().resize();
            });
        };
        function getUrlParameter(name) {
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(window.location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        }
    </script>
</body>

</html>

The full example can be evaluated using this link - https://demo.support.here.com/examples/v3/south_korea_example

Evaluation Plan and App Credentials

As mentioned, ensure you have the correct evaluation plan and authorized credentials for South Korea. If you do not have these or are unsure, contact your AE, who can collaborate with the HERE Access Support team. Once your credentials are enabled, you can place your app_id and app_code into the fields or pass them as URL parameters, and the map will display the localized tiles, traffic layers, and other data seamlessly.

Key Takeaways

Always validate your app_id and app_code are specifically enabled for the South Korean region.

The baseUrl endpoint is set to cc.api.heremaps.kr to access South Korea maps.

No map will appear if your credentials are not properly enabled—coordinate with your AE for evaluation and activation.

Once configured, you can leverage the HERE Maps JS API just as you would in other regions, adding traffic, satellite, or terrain layers as needed.

Conclusion

By following these steps, and ensuring you have the correct credentials and evaluation plan, you can easily integrate HERE Maps in South Korea using the HERE Maps API for JavaScript. This setup opens the door to rich, localized mapping experiences, including real-time traffic updates, different map styles (normal, satellite, terrain), and interactive UI components that help users navigate confidently and efficiently.