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:
-
Go to https://developer.here.com/.
-
Log in with your HERE account, or sign up for a new account.
-
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.
-
-
Select the project from the projects page.
-
On the Project Details page, you can create keys.In the
REST
section, click Generate App.
The portal generates an APP ID. -
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:
-
Create a
HereMapsTileSetModel
with your API key and an optional set of map requirements. -
Use a
RasterTileSetLayer
to visualize the model.
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.
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>
)
}