Getting a HERE Maps API key

The first thing you need before connecting to HERE Maps is a HERE API key. On the HERE platform portal, you can create a HERE account and one or more keys.

To create a key for HERE Maps:

  1. Go to https://platform.here.com/.

  2. Log in with your HERE account, or sign up for a new account.

    • If you sign up for a new account, you will also have to subscribe to the Base Plan. The Limited plan throttles the amount of tile requests per second you can do on the service and will result in tile request errors.

  3. Once you have logged on, you need to navigate to the Access Manager. This is available from the menu at the top of the page.

  4. On the Apps Tab in the Access Manager, you can Register new App.

  5. On the App page you can then create up to 2 API keys in the Credentials Tab. Use one of those keys in your LuciadRIA application.

Please also consult the HERE Service Terms if you include HERE Maps data in your application.

Visualizing HERE Maps data

Visualizing HERE Maps data requires two steps:

  1. Create a HereMapsTileSetModel with your API key and an optional set of map requirements.

  2. Use a RasterTileSetLayer to visualize the model.

Program: Creating a HERE Maps raster layer (from samples/dataformats/HereMapsDataLoader.js) 
const options = {
  apiKey: apiKey,
  base: type === "aerial" ? "aerial" : type === "aerialWithLabels" ? "aerial" : "base",
  type: "maptile",
  scheme: type === "aerial" ? "satellite.day" : type === "aerialWithLabels" ? "hybrid.day" : "normal.day"
}
return createHereMapsTileSetModel(options)
    .then(model => {
      return new RasterTileSetLayer(model, {
        label: `${type} (HERE)`,
        layerType: LayerType.BASE,
        id: "Background"
      });
    });

To comply with the terms of use for HERE Maps data, you must show the attribution information of the imagery.

The LuciadRIA sample code contains an Attribution overlay component to handle this.

Please refer to the sample samples/common/ui/overlay/Attribution.tsx for more details.

Program: Including HERE Maps attribution information using the sample component Attribution (from samples/common/ui/overlay/Attribution.tsx) 
export const Attribution = ({map, separator = " • ", staticAttributions}: Props) => {

  const [layerAttributions, setLayerAttributions] = useState<LayerAttribution[]>([]);

  useEffect(() => {
    const attributionProvider = new TileSetAttributionProvider(map);

    const layerAttributionListener = attributionProvider.on("LayerAttributionsChanged", (layerAttributions) => {
      setLayerAttributions(layerAttributions);
    });

    setLayerAttributions(attributionProvider.getLayerAttributions())

    return () => {
      layerAttributionListener.remove();
    }
  }, [map]);

  // if multiple layers provide attribution, add the layer label to the line, so you know what attributions belong to what layer
  const showLayerLabel = layerAttributions.length > 1;

  return (
      <div className="attribution">
        <div className="attribution-strings">
          {layerAttributions.map(attr =>
              <div key={attr.layer.id}>
              {(showLayerLabel ? `[${attr.layer.label}]: ` : "")}
                {attr.attributionStrings.join(separator)}
                {(attr.attributionLogos as string[]).map(
                    logo => <img className="attributionLogo" alt={logo} key={logo} src={logo}/>)}
              </div>
          )}
          {staticAttributions}
        </div>
      </div>
  )
}