a

Demand-Web-Components

A component that displays Here Maps, using Stencil.

Getting Started

npm i demand-web-components

Setup after installation depends on which framework you are using. See link below: https://stenciljs.com/docs/overview

Testing

In browser:

In one terminal run npm start In another run npm run storybook Then in the browser open localhost:3000

Unit tests

npm run test

Sample Usage (embedding)

Get an api key, app id and app code from: https://developer.here.com/products/maps

<hm-map-component class="map"
                  api_key="MY_API_KEY_NY_HERE_MAPS_API"
                  app_id="MY_APP_ID_NY_HERE_MAPS_API"
                  app_code="MY_APP_CODE_NY_HERE_MAPS_API"
></hm-map-component>

API:

Inputs

api_key:

Type string, Mandatory. This is used for the HERE MAPS API for JavaScript.

app_id:

Type string, Mandatory. This is used for the HERE Location Services.

app_code:

Type string, Mandatory. This is used for the HERE Location Services.

markers:

Type Marker, Optional. See below for more details.

routes:

Type Route, Optional. See below for more details.

zoom:

Type 'PICKUP' | 'DESTINATION' | 'CONFIRMED_PICKUP' | 'ALL', Optional.

zoom_level:

Type number, between 1 and 20. Optional.

locale:

Type 'de-DE' | 'en-GB' | 'en-US' | 'es-ES' | 'fi-FI' | 'fr-FR' | 'it-IT' | 'nl-NL' | 'pl-PL' | 'pt-BR' | 'pt-PT' | 'ru-RU' | 'tr-TR' | 'zh-CN', Optional.

map_style:

Type object, Optional. See below for more details.

center:

Type Point ({lat: number, lng: number}), Optional. See below for more details.

Types:

Marker

type:

Type 'PICKUP' | 'DESTINATION', Mandatory.

location:

Type Location, Mandatory. See below for more details.

tooltip_text:

Type string, Optional. Will show a bubble info.

tooltip_icon:

Type 'PICKUP' | 'DESTINATION' | 'TAXI' | 'HIGH_SPEED_TRAIN' | 'INTERCITY_TRAIN' | 'INTER_REGIONAL_TRAIN' | 'CITY_TRAIN' | 'BUS' | 'FERRY' | 'SUBWAY' | 'LIGHT_RAIL' | 'PRIVATE_BUS' | 'INCLINED' | 'AERIAL' | 'BUS_RAPID' | 'MONORAIL' | 'WALK' | 'BIKE', Optional.

Route

type:

Type 'TAXI' | 'HIGH_SPEED_TRAIN' | 'INTERCITY_TRAIN' | 'INTER_REGIONAL_TRAIN' | 'CITY_TRAIN' | 'BUS' | 'FERRY' | 'SUBWAY' | 'LIGHT_RAIL' | 'PRIVATE_BUS' | 'INCLINED' | 'AERIAL' | 'BUS_RAPID' | 'MONORAIL' | 'WALK' | 'BIKE', Optional.

legs:

Type RouteLeg[], Mandatory. The list of legs for the route.

faded:

Type boolean, Optional. If true, will draw the route in gray, and hide the bubble info.

click_callback:

Type: function, Optional. Will be called on route line click.

RouteLeg:

start:

Type Location, Mandatory. See below for more details.

end:

Type Location, Mandatory. See below for more details.

tooltip_text:

Type string, Optional. Will show a bubble info.

tooltip_position:

Type 'START' | 'MIDDLE' | 'END', Optional.

color:

Type string, Optional. Will display the leg polyline in this color.

Location

point:

Type Point ({lat: number, lng: number}), Mandatory.

free_text:

Type string, Optional. Will display the address as a text.

Polygon

vertices:

Type Point [] ([{lat: number, lng: number}]), Mandatory.

style:

Type object, Optional. Will define polygon look-and-feel. If not provided default values will be used.