CSS styles are transpiled using Sass.
We are using Webpack for the bundled creation.
Follow the instruction here below for the development instructions.
What things you need to install the software and how to install them:
- Node (global)
- NPM (global)
A step by step series of examples that tell you how to get a development env running
Install npm project's dependencies
npm install
Start the dev server with
npm run start
Build the widget with the production config of Webpack:
npm run build
The destination for the resulting code will be the dist folder, located at the root of the project.
Here maps needs an API key that has to be set in the env variable HERE_API_KEY which is set through the definePlugin
The EFA/STA api doesn't require API key.
| Attribute name | Description | Example | Notes |
|---|---|---|---|
destination |
coordinates of the destination in the following format: "longitude:latitude" | destination="11.1604034:46.6684672" |
the longitude:latitude format is the opposite of what you can find on many websites, including google maps that uses the latitude, longitude format |
destination-name |
display name of the destination | destination-name="Terme di Merano, Merano" |
|
destination-type |
destination type used to make trip request on STA endpoint | destination-name="stop" |
Try by yourself what works best for your destination. In general location works good for urban destinations and stop for extra-urban destinations like Karrerpass / Passo Carezza |
disable-car |
if present it disables the HERE maps car routing integration | ||
language |
two letter key for the language to be used | language=de |
if omitted the widget will use the language of the browser (navigator.language[?s]) if supported. Fallback is en |
attribution |
Attribution text for the tiles, can contain html | ||
tiles-url |
Url for the tiles, see https://leafletjs.com/reference-1.6.0.html#tilelayer | ||
width |
Width of the component as css property (es: '500px' or '100%'), default is 100%, | ||
height |
Height of the component as css property (es: '500px' or '100%'), deafult is 500px | ||
Using the --webcomp-routeplanner-font-family css variable you can set a custom font-family.
link to MDN doc
<style>
routeplanner-widget {
--webcomp-routeplanner-font-family: Metal Mania;
}
</style>
<routeplanner-widget ...attributes></routeplanner-widget>