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

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.

_{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.

_{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.

Copied

        https://heremaps.github.io/maps-api-for-javascript-examples/change-harp-style-at-load/data/night.json

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:

HERE SDK - Create and Load Custom Map Styles
Sample code from HERE SDK for Flutter showing how to load custom map style into a map scene

Copied

        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

Copied

        var platform = new H.service.Platform({
  apikey: window.apikey
});
var style = new H.map.render.harp.Style('https://heremaps.github.io/maps-api-for-javascript-examples/change-harp-style-at-load/data/night.json');
var vectorLayer = platform.getOMVService().createLayer(style, { engineType });
var map = new H.Map(document.getElementById('map'),
  vectorLayer, {
  engineType,
  center: {lat: 52.51477270923461, lng: 13.39846691425174},
  zoom: 13,
  pixelRatio: window.devicePixelRatio || 1
});