HERE Vector Tile and Mapbox display POIs

[FKSI]

Hi,

How can I display HERE POIs layer on Mapbox?

F.

[ferdicus]

I've managed to display labels of train stations via adding this section within my style.json:

    {
      id: 'points_of_interest',
      type: 'symbol',
      source: 'omv',
      'source-layer': 'pois',
      filter: ['all', ['==', 'kind', 'station']],
      layout: {
        visibility: 'visible',
        'text-field': '{name}',
        'text-font': ['Fira GO Regular'],
        'text-size': {
          stops: [
            [15, 0],
            [17, 16],
          ],
        },
        'text-allow-overlap': false,
        'text-ignore-placement': false,
        'text-rotation-alignment': 'auto',
        'text-pitch-alignment': 'auto',
        'text-padding': 1,
      },
      paint: {
        'text-color': 'rgba(0, 0, 0, 0.8)',
      },
    },

However I'm asking myself how to display the icons 🤔
maybe @pakore has some insights?

[FKSI]

Nice I came up with a similar solution as-well. But I guess for icons we have to importe the icons' sprite and link them to the styles.json.

[ferdicus]

We're using a react-native app, so I was able to use this construct together with react-native-mapbox-gl/maps :

        <MapboxGL.SymbolLayer
          id="points_of_interest"  // notice, name is same as I defined in the style.json
          style={{
            iconAllowOverlap: true,
            iconSize: [
              'interpolate',
              ['exponential', 1.5],
              ['zoom'],
              10, // min zoom interpolation
              0.05, // icon size at min zoom
              16, // max zoom interpolation
              0.08, // icon size at max zoom
            ],
            iconImage: require('App/Images/station.png'),
            iconAnchor: 'bottom',
            iconRotationAlignment: 'viewport',
          }}
        />

[musculman]

Hello, you are going in the right direction.
I am able to see icons just by adding a sprite section to the stylesheet. e.g.

"sprite": "PATH_TO_SPRITES",

Accessible on that path you must have a json file and images files in png format as specified here.
Once you have successfully imported it, you need to modify the snippet showed above for transit stations to include icon-image property within the layout section, e.g.

"icon-image": "train-station"

This means that your index file has a train-station entry that is mapped to the right image.
Optionally, you may consider using

"icon-allow-overlap": true,

to allow for overlaps and better finetune the style sheet.
Here is a very quick and dirty example of what I just explained. Please note, I am hiding labels so the icon can be seen better.