@road-labs/map-sdk 0.0.14 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -31
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
### Installation
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
|
-
npm install @road/map-sdk
|
|
6
|
+
npm install @road-labs/map-sdk
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
### Usage
|
|
@@ -11,56 +11,64 @@ npm install @road/map-sdk
|
|
|
11
11
|
After installing the package, you need to:
|
|
12
12
|
|
|
13
13
|
1. **Import the component:**
|
|
14
|
+
|
|
14
15
|
```typescript
|
|
15
|
-
import { App } from
|
|
16
|
+
import { App } from "@road-labs/map-sdk";
|
|
16
17
|
```
|
|
17
18
|
|
|
18
19
|
2. **Import the CSS stylesheet** (required for proper styling):
|
|
20
|
+
|
|
19
21
|
```typescript
|
|
20
|
-
import
|
|
22
|
+
import "@road-labs/map-sdk/dist/index.css";
|
|
21
23
|
```
|
|
22
24
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
### Props
|
|
26
|
+
|
|
27
|
+
The `App` component accepts the following props:
|
|
28
|
+
|
|
29
|
+
| Field Name | Required | Version(s) | Context | Description | Default Value |
|
|
30
|
+
| :-------------------------- | :------- | :--------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------- |
|
|
31
|
+
| `version` | No | Both | Both | Which version of the map SDK do you wish to use. | `v1` |
|
|
32
|
+
| `gestureHandling` | No | Both | Both | Google Maps SDK parameter controlling how gestures (scroll, pinch, etc.) interact with the map. Allowed values: `greedy`, `cooperative`, `none`, `auto`. Ee suggest a default value of `greedy`. More information can be obtained on | `-` |
|
|
33
|
+
| `language` | No | Both | Both | Language of the widget. Supported values: `en` | `en` |
|
|
34
|
+
| `position {lat,lng}` | No | Both | Both | Initial latitude/longitude to center the map on load. If not provided, defaults to visitor’s IP-based location. | Visitor IP location |
|
|
35
|
+
| `enableZoomControls` | No | Both | Both | Whether to display zoom (+/-) controls in the bottom-right corner. | `false` |
|
|
36
|
+
| `enableSidebar` | No | Both | Both | Enables sidebar with location/cluster information when selected. | `false` |
|
|
37
|
+
| `enablePlacesSearch` | No | Both | Both | Enables address search input at the top of the map. | `true` |
|
|
38
|
+
| `provider` | Yes | Both | Both | Provider reference within the Road platform. | `-` |
|
|
39
|
+
| `locationId` | No | Both | Both | If provided, the map will zoom to the given `locationId` and open its sidebar (if enabled). Overrides `position`. | `-` |
|
|
40
|
+
| `theming {}` | No | Both | Both | Controls widget look and feel with keys: `brandColor`, `backgroundColor`, `textColor`, `borderColor`. Accepts HEX values (e.g. `#ff3d00`). | `-` |
|
|
41
|
+
| `authorization` | Yes | v2 | Both | The public authorization key to search for locations. | `-` |
|
|
42
|
+
| `limitToLocationIds` | No | v2 | Both | Constrains the map to only show the locations with the configured IDs. | All available locations |
|
|
43
|
+
| `preferredOperators` | No | v2 | Both | Ensures that the selected operator appear at the top of the operator selector dropdown | |
|
|
44
|
+
| `showNoAdditionalFeeFilter` | No | v2 | msp | Used to configure whether we enable the user to filter out stations that come with additional fees. | |
|
|
45
|
+
| `showPublishingModeFilter` | No | v2 | cpo | Used to configured whether we enable the user to filter our public or private stations. | |
|
|
46
|
+
| `showOperatorOnly` | No | v2 | both | Include a quick filter option to find a specific operator. | |
|
|
47
|
+
|
|
48
|
+
Full example:
|
|
27
49
|
|
|
28
50
|
### Example
|
|
29
51
|
|
|
30
52
|
```typescript
|
|
31
53
|
import React from 'react';
|
|
32
|
-
import { App } from '@road/map-sdk';
|
|
33
|
-
import '@road/map-sdk/dist/index.css';
|
|
54
|
+
import { App } from '@road-labs/map-sdk';
|
|
55
|
+
import '@road-labs/map-sdk/dist/index.css';
|
|
34
56
|
|
|
35
57
|
function MyComponent() {
|
|
36
58
|
return (
|
|
37
59
|
<App
|
|
38
60
|
height={600}
|
|
61
|
+
authorization="your-authorization-key"
|
|
62
|
+
context="cpo"
|
|
63
|
+
gestureHandling="greedy"
|
|
39
64
|
apiRoot="https://api.road.io"
|
|
40
65
|
googleApiKey="your-google-maps-api-key"
|
|
41
|
-
|
|
66
|
+
language="en"
|
|
67
|
+
preferredOperators={["operator1", "operator2"]}
|
|
68
|
+
onMarkerClicked={({ ids }) => {
|
|
69
|
+
console.log('Marker clicked:', ids);
|
|
70
|
+
}}
|
|
42
71
|
/>
|
|
43
72
|
);
|
|
44
73
|
}
|
|
45
74
|
```
|
|
46
|
-
|
|
47
|
-
---
|
|
48
|
-
|
|
49
|
-
## Typescript Browser
|
|
50
|
-
|
|
51
|
-
```
|
|
52
|
-
# setup npmrc to work with our private registry
|
|
53
|
-
make init-npm-registry
|
|
54
|
-
|
|
55
|
-
# run the generator and tranform resulting TS code into JS dist as described by ./src/ts/browser/tsup.config.js
|
|
56
|
-
make build-browser
|
|
57
|
-
|
|
58
|
-
# publish to provate registry
|
|
59
|
-
make publish-browser
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
The generator then loads the contract files and uses the gathered information to extend the provided base class with method definitions that enforce types defines in the contracts, and saves the resulting TS file into `./build` folder. From there we use `tsup` for packaging as normal, leading to final check with `np` and `npm publish`.
|
|
63
|
-
|
|
64
|
-
### Todo
|
|
65
|
-
|
|
66
|
-
- [ ] allow particular definitions of events (ie journeys) to define own fields that can then be applied and enforced to all journey related definitions
|