Styling markers in a Here Maps layer

Question

Using the sample code provided on the Here developer website I'm displaying postcode boundaries.

What I want to be able to do is get hold of the markers that are placed at the centroids in order to change the icons but I cannot find anything in the docs that indicates how this can be done.

The code, so far, looks like this and is pretty much identical to that in the docs here (https://developer.here.com/documentation/maps/3.1.15.1/dev_guide/topics/fleet-telematics-advanced-data-sets.html):

showPostcodes() {
  const service = this.platform.getPlatformDataService();
  const bubble = new H.ui.InfoBubble(this.map.getCenter(), {
    content: ''
  });
  bubble.close();
  this.ui.addBubble(bubble);

  const style = new H.map.SpatialStyle();

  // create tile provider and layer that displays postcode boundaries
  const boundariesProvider = new H.service.extension.platformData.TileProvider(
    service,
    {
      layerId: 'PSTLCB_GEN',
      level: 12
    },
    {
      resultType:
        H.service.extension.platformData.TileProvider.ResultType.POLYLINE,
      styleCallback: function (data) {
        return style;
      }
    }
  );
  const boundaries = new H.map.layer.TileLayer(boundariesProvider);

  this.map.addLayer(boundaries);

  // create tile provider and layer that displays postcode centroids
  const centroidsProvider = new H.service.extension.platformData.TileProvider(
    service,
    {
      layerId: 'PSTLCB_MP',
      level: 12
    },
    {
      resultType:
        H.service.extension.platformData.TileProvider.ResultType.MARKER,
      styleCallback: function (data) {
        return style;
      }
    }
  );
  const centroids = new H.map.layer.MarkerTileLayer(centroidsProvider);
  this.map.addLayer(centroids);

  centroidsProvider.addEventListener('tap', function (ev) {
    const marker = ev.target;
    console.log(marker);
    bubble.setPosition(marker.getGeometry());
    const str =
      '<nobr>Postal code: ' +
      marker.getData().getCell('POSTAL_CODE') +
      '</nobr><br>' +
      '<br>';
    bubble.setContent(str);
    bubble.open();
  });
},

I've tried adding an event listener on update on the centroidsProvider but that doesn't seem to yield the markers that were updated, or if it does, they're buried somewhere within that object and I can't see any docs to tell me where.

So, in a nutshell, how do I change the default icon for markers that are created in this way?

score 1 · Accepted Answer · answered Jun 13 '20 at 07:51

Thanks to the HereMaps Slack community, I got this response that allowed me to do what I needed to do.

By setting the styleCallback function to return the icon we can customise the marker and use data from the layer

i.e.

// Allows us to customise the icon for each postcode district
const svg = `<svg width="80" height="24" xmlns="http://www.w3.org/2000/svg"><text x="0" y="20" font-size="10pt" font-family="Arial">{POSTCODE}</text></svg>`;

const centroidsProvider = new H.service.extension.platformData.TileProvider(
    service,
    {
      layerId: 'PSTLCB_MP',
      level: 12
    },
    {
      resultType:
        H.service.extension.platformData.TileProvider.ResultType.MARKER,
      styleCallback(data) {
        const postcode = data.getCell('POSTAL_CODE');
        const postcodeSvg = svg.replace('{POSTCODE}', postcode);
        const icon = new H.map.Icon(postcodeSvg);
        return icon;
      }
    }

Styling markers in a Here Maps layer

1 Answers1