Skip to main content
APIs 4 min read

How to create custom map style using HERE Style Editor for Self-Hosted Location Services

hero image custom map self hosting

In the dynamic landscape of digital mapping and geospatial solutions, control, security, and performance are very important. HERE Location Services - Self Hosting empowers you to take control of your location data, ensuring unparalleled data safety, security, and privacy. Customers can install and operate HERE software on their own hardware and within their own data center. HERE Location Services for Self-Hosting offers an array of powerful tools, including map rendering services, routing services, geocoding services, route matching services, and geofencing services. 

HERE Style Editor is a web application for designing custom HERE map styles. The interactive UI controls expose several map styling properties. Style the map as you desire, export it, and use it with HERE SDK, Maps API for JavaScript, or with HERE Navigation. The HERE SDK is planned to be available in a self-hosted environment soon.

This blog will show how to create a custom HERE map style in HERE Style Editor to be used in a self-hosted environment.

Step 1: Create a custom map design with HERE Style Editor

The HERE Style Editor is accessible through HERE platform portal. If you have a platform account – just login. If you do not have a platform account yet, follow this blog post to create one. 

Once logged into HERE platform, ‘HERE Style Editor’ can be found on the launcher on the right side. The Style Editor currently has HERE base map styles – day and night – to start with, follow this blog post to learn more.

Style Editor

HERE Style Editor - preview

Step 2: Export the custom map design

To export a custom style for your application, click File > Export Map Style (see image below). This exports the JSON stylesheet needed to load your custom map style in your app, follow this user guide to learn more. Note that the style is exported as WYSIWYG, so any modifiers that are visibly active are automatically applied to the exported style. 

export button HERE Style Editor

HERE Style Editor - File > Export Map Style button

Step 3: Host the custom map design in your self-hosted environment (For Maps API for Javascript only)

To use the custom map design, upload the JSON stylesheet exported from the HERE Style Editor (from Step 2) somewhere in your self-hosted environment. For example, see the URL below for a custom map design uploaded to our public GitHub.


Step 4: Use the custom map design in your self-hosted HERE Location Services applications

After the JSON stylesheet exported is uploaded, you can load the custom map design in your application powered by self-hosted HERE Location Services. For steps on loading your custom style in your application, see:

        void loadCustomMapStyle() {
  File file = File("assets/custom-dark-style-neon-rds.json");
  String filePath = file.path;
  _hereMapController.mapScene.loadSceneFromConfigurationFile(filePath, (MapError? error) {
    if (error == null) {
      // Scene loaded.
    } else {
      print("Map scene not loaded. MapError: " + error.toString());
  • HERE Maps API for JavaScript - Set a map style exported from the HERE Style Editor

    Note: In this example, we use HARP rendering engine, which is capable of rendering vector data using the style configuration exported from the HERE Style Editor. HARP engine is not the default engine, and it's not included in the mapsjs-core.js module. To use this engine, you need to include mapsjs-harp.js file to your HTML page

        var platform = new H.service.Platform({
  apikey: window.apikey
var style = new'');
var vectorLayer = platform.getOMVService().createLayer(style, { engineType });
var map = new H.Map(document.getElementById('map'),
  vectorLayer, {
  center: {lat: 52.51477270923461, lng: 13.39846691425174},
  zoom: 13,
  pixelRatio: window.devicePixelRatio || 1

Sample Application

This is the sample application showing custom map style from HERE Style Editor using HERE Maps API for Javascript. 



Erwin Soekianto

Erwin Soekianto

Developer Evangelist

Have your say

Sign up for our newsletter

Why sign up:

  • Latest offers and discounts
  • Tailored content delivered weekly
  • Exclusive events
  • One click to unsubscribe