Customizing Elastic Map Service Basemaps

[m.hanna]

I am testing using Elastic Map Service on a disconnected network. I am able to get the server installed and running, but the basemaps are quite busy and not that nice to look at.
I was able to clean up the basemaps by modifying the style.json and style-local.json files in /usr/src/app/tiles/styles/dark-matter and I can see the difference in the Elastic Maps Service page, but I don't see the changes in the Kibana maps.

Original dark-matter style as seen in the Elastic Map Service page:

Current dark-matter style as seen in the Elastic Map Service page:

When I load that basemap in Kibana it still looks like the original style:

I have tried clearing the browser cache, using different browsers, and using incognito mode. I verified that Kibana is using my local instance of EMS. When I shutdown my EMS, Kibana doesn't pull any basemaps at all.
Is there another style.json that needs to be modified for Kibana?

For completeness, here is the snippet of my docker-compose.yml for ems

  ems:
    depends_on:
      elasticsearch:
        condition: service_healthy
    image: ${EMS_IMAGE}
    container_name: ems
    environment:
      - ELASTICSEARCH_HOST=https://elasticsearch:9200
      - ELASTICSEARCH_USERNAME=xxxxxxxx
      - ELASTICSEARCH_PASSWORD=xxxxxxxxxx
      - ELASTICSEARCH_SSL_CERTIFICATE=config/certs/elasticsearch/elasticsearch.crt
      - ELASTICSEARCH_SSL_KEY=config/certs/elasticsearch/elasticsearch.key
      - ELASTICSEARCH_SSL_CERTIFICATEAUTHORITIES=config/certs/ca/ca.crt
    volumes:
      - './config/ems/certs/:/usr/src/app/server/config/certs/'
      - './config/ems/dark-matter/style.json:/usr/src/app/tile/styles/dark-matter/style.json'
      - './config/ems/dark-matter/style-local.json:/usr/src/app/tile/styles/dark-matter/style-local.json'
    ports: ['8082:8080']

[jsanz (Jorge Sanz)]

No idea what is wrong, but you seem to be doing it correctly. You only need to mount the style-local.json file to /usr/src/app/tile/styles/dark-matter/style-local.json.

Are you sure that the same request is made? Can you double check filtering in the browser console network tab for dark-matter/style.json and check if both Kibana and the EMS Ui are requesting the same URL?

I mounted a reduced dark matter style file shared below at the mentioned path, and I got the desired result in both EMS UI and Kibana.

{
  "version": 8,
  "name": "Dark Matter",
  "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "mbtiles://{v3}"
    }
  },
  "sprite": "{styleJsonFolder}/sprite",
  "glyphs": "{fontstack}/{range}.pbf",
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": "#3b4252"
      }
    },
    {
      "id": "water",
      "type": "fill",
      "source": "openmaptiles",
      "source-layer": "water",
      "filter": ["==", "$type", "Polygon"],
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "fill-color": "#2e3440",
        "fill-antialias": false
      }
    },
    {
      "id": "boundary_country",
      "type": "line",
      "source": "openmaptiles",
      "source-layer": "boundary",
      "filter": ["==", "admin_level", 2],
      "layout": {
        "line-cap": "round",
        "line-join": "round"
      },
      "paint": {
        "line-color": "rgb(83, 89, 102)",
        "line-width": 1,
        "line-blur": 1,
        "line-opacity": 1
      }
    },
    {
      "id": "place_country_major",
      "type": "symbol",
      "source": "openmaptiles",
      "source-layer": "place",
      "filter": [
        "all",
        ["==", "$type", "Point"],
        ["<=", "rank", 1],
        ["==", "class", "country"],
        ["has", "iso_a2"]
      ],
      "layout": {
        "visibility": "visible",
        "text-field": "{name_en}",
        "text-font": ["Metropolis Regular", "Noto Sans Regular"],
        "text-transform": "uppercase",
        "text-max-width": 6.25,
        "text-size": 15,
        "text-anchor": "center"
      },
      "paint": {
        "text-halo-width": 1.4,
        "text-halo-color": "rgb(22, 26, 28)",
        "text-color": "rgb(152, 162, 179)"
      }
    }
  ],
  "id": "dark-matter"
}

[m.hanna]

Thanks. I used your example style here and it seems to be working now.

I had just set "visibility": "none" on all of the elements that I didn't want to show up in the style json.
So either Kibana ignores the visibility setting or I wasn't clearing my browser cache properly.
Either way I now have a solution that works.

[jsanz (Jorge Sanz)]

Most likely, the issue was with the visibility setting since Kibana actively modifies the style in different ways.

Can I ask you about the use case for simplifying the styles? Is it just because your users don't need that level of detail or a more personal preference of you as the Kibana admin?

Would it make sense, in your opinion, to allow users (or admins if it makes more sense to be a global setting) to disable layer groups (roads, land use, points of interest, etc.) to customize the basemap even further?

[m.hanna]

Some of our users don't want see all of that info. The main use case is highlighting countries and having the state boundaries, city names, etc gets "too cluttered" for them.

I think that both options would be great. The admins could set a baseline for the users that don't want to manage layers and the users that do could enable/disable the layers that they would be interested in.

For now, though, I can modify the json files for the users at a global level and that will work.

Thanks.

[jsanz (Jorge Sanz)]

Just in case this is useful to you.

Another option could be not to change the basemap, create a template map with no basemap, and use EMS world boundaries as a basemap. Still, maybe that is too simplistic since you would lose all the excellent styling features of the basemap.

This example map below renders the EMS World Countries layer with no basemap at all.