Getting a HERE Maps API key

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

To create a key for HERE Maps:

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

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

    1. If you sign up for a new account, select a plan that fits your project.The default is the Freemium plan.
      Once you have logged on, you see a Projects page that lists all your projects and the corresponding HERE plan.For new accounts with a Freemium plan, the Projects page shows one project called Freemium and the project creation date.

  3. Select the project from the projects page.

  4. On the Project Details page, you can create keys.In the REST section, click Generate App.
    The portal generates an APP ID.

  5. Click Create API key.
    The portal generates a key. Click the Copy button to copy/paste it in your code.

Note that more terms may apply for deployment. For more information about HERE licensing, see the HERE terms and Conditions.

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" : type === "roads" ? "base"
                                                                                                 : "traffic",
  type: type === "roadsWithTraffic" ? "traffictile" : "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: "HERE"
      });
    });

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/components/Attribution.tsx for more details.

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

  const [logos, setLogos] = useState<string[]>([]);
  const [strings, setStrings] = useState<string[]>([]);

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

    const attributionLogosListener = attributionProvider.on("AttributionLogosChanged", () => {
      setLogos(attributionProvider.getAttributionLogos());
    });
    const attributionStringsListener = attributionProvider.on("AttributionStringsChanged", () => {
      setStrings(attributionProvider.getAttributionStrings());
    });

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

  return (
      <div className="attribution">
        {logos.map(logo => <img alt={logo} key={logo} className="attributionLogo" src={logo}/>)}
        <div className="attribution-strings">
          {[...strings].map(str => <p key={str}>{str}</p>)}
          {staticAttributions}
        </div>
      </div>
  )
}