mahal_map 1.4.8 → 1.5.0
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 +114 -21
- package/dist/index.d.mts +142 -113
- package/dist/index.d.ts +142 -113
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +24 -3
- package/dist/index.mjs.map +1 -1
- package/dist/mahal_map.sdk.js +1 -1
- package/package.json +12 -13
package/README.md
CHANGED
|
@@ -1,43 +1,136 @@
|
|
|
1
1
|
# Mahal Map
|
|
2
2
|
|
|
3
|
-
Mahal Map
|
|
3
|
+
Mahal Map is a JavaScript/TypeScript SDK for working with Mahal map services on top of MapLibre GL JS.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
7
|
```sh
|
|
8
|
-
npm install maplibre-gl
|
|
8
|
+
npm install mahal_map maplibre-gl
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
`maplibre-gl` is a peer dependency: the application that uses this SDK must install it or include it through a browser script.
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
import
|
|
13
|
+
## NPM Usage
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import maplibregl from "maplibre-gl";
|
|
17
|
+
import "maplibre-gl/dist/maplibre-gl.css";
|
|
18
|
+
import { MahalMap, MahalMapDefaultMarker } from "mahal_map";
|
|
19
|
+
|
|
20
|
+
const mainMap = MahalMap.create(
|
|
21
|
+
{
|
|
22
|
+
container: "main-map",
|
|
23
|
+
center: [69.624024, 40.279687],
|
|
24
|
+
zoom: 12,
|
|
25
|
+
},
|
|
26
|
+
maplibregl,
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
const marker = new MahalMapDefaultMarker({
|
|
30
|
+
coordinates: [69.624024, 40.279687],
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
mainMap.addMarker(marker);
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Multiple Maps
|
|
37
|
+
|
|
38
|
+
`MahalMap.create()` always creates and returns a new map instance. The SDK also stores created instances by their `container` key.
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
const mainMap = MahalMap.create({ container: "main" }, maplibregl);
|
|
42
|
+
const miniMap = MahalMap.create({ container: "mini" }, maplibregl);
|
|
43
|
+
|
|
44
|
+
MahalMap.getInstance("main").setZoom(14);
|
|
45
|
+
MahalMap.addMarker(miniMap, marker);
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Browser SDK Usage
|
|
49
|
+
|
|
50
|
+
For direct browser usage, include MapLibre first and then the Mahal Map SDK bundle:
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<link
|
|
54
|
+
rel="stylesheet"
|
|
55
|
+
href="https://unpkg.com/maplibre-gl@5.3.0/dist/maplibre-gl.css"
|
|
56
|
+
/>
|
|
57
|
+
<script src="https://unpkg.com/maplibre-gl@5.3.0/dist/maplibre-gl.js"></script>
|
|
58
|
+
<script src="/dist/mahal_map.sdk.js?apikey=YOUR_API_KEY"></script>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
The browser SDK reads `apikey` from its script URL and stores it as the default API key for search and routing requests.
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<script>
|
|
65
|
+
const map = MahalMap.create({
|
|
66
|
+
container: "map",
|
|
67
|
+
center: [69.624024, 40.279687],
|
|
68
|
+
zoom: 12,
|
|
69
|
+
});
|
|
70
|
+
</script>
|
|
71
|
+
```
|
|
17
72
|
|
|
18
|
-
|
|
19
|
-
|
|
73
|
+
## Search
|
|
74
|
+
|
|
75
|
+
```ts
|
|
76
|
+
import { Search, SearchByLocation } from "mahal_map";
|
|
77
|
+
|
|
78
|
+
const results = await Search("Dushanbe", "");
|
|
79
|
+
|
|
80
|
+
const nearby = await SearchByLocation({
|
|
81
|
+
lat: 38.5737,
|
|
82
|
+
lng: 68.7738,
|
|
83
|
+
});
|
|
20
84
|
```
|
|
21
85
|
|
|
22
|
-
##
|
|
86
|
+
## Routing
|
|
23
87
|
|
|
24
|
-
|
|
88
|
+
```ts
|
|
89
|
+
import { Router } from "mahal_map";
|
|
25
90
|
|
|
26
|
-
|
|
27
|
-
|
|
91
|
+
const routes = await Router(
|
|
92
|
+
[
|
|
93
|
+
[69.624024, 40.279687],
|
|
94
|
+
[68.7738, 38.5737],
|
|
95
|
+
],
|
|
96
|
+
"geojson",
|
|
97
|
+
"",
|
|
98
|
+
);
|
|
28
99
|
```
|
|
29
100
|
|
|
30
|
-
##
|
|
101
|
+
## Development
|
|
31
102
|
|
|
32
103
|
```sh
|
|
33
|
-
npm run
|
|
104
|
+
npm run build
|
|
105
|
+
npm run build:sdk
|
|
106
|
+
npm run build:all
|
|
107
|
+
npm test
|
|
34
108
|
```
|
|
35
109
|
|
|
36
|
-
|
|
110
|
+
`npm run build` creates the npm package output. `npm run build:sdk` creates the browser IIFE SDK bundle.
|
|
111
|
+
|
|
112
|
+
## Project Structure
|
|
113
|
+
|
|
114
|
+
```text
|
|
115
|
+
src/
|
|
116
|
+
index.ts
|
|
117
|
+
sdk.ts
|
|
118
|
+
config/
|
|
119
|
+
core/
|
|
120
|
+
markers/
|
|
121
|
+
services/
|
|
122
|
+
types/
|
|
123
|
+
utils/
|
|
124
|
+
```
|
|
37
125
|
|
|
38
|
-
- `
|
|
39
|
-
- `
|
|
126
|
+
- `index.ts` is the clean npm entrypoint.
|
|
127
|
+
- `sdk.ts` is the browser SDK entrypoint that reads `apikey` from the script URL.
|
|
128
|
+
- `core/` contains map and camera classes.
|
|
129
|
+
- `markers/` contains marker components and adapters.
|
|
130
|
+
- `services/` contains HTTP, auth key, search, and routing logic.
|
|
131
|
+
- `types/` contains public TypeScript contracts.
|
|
132
|
+
- `utils/` contains shared helpers and polyline utilities.
|
|
40
133
|
|
|
41
|
-
##
|
|
134
|
+
## License
|
|
42
135
|
|
|
43
|
-
|
|
136
|
+
ISC
|
package/dist/index.d.mts
CHANGED
|
@@ -1,42 +1,16 @@
|
|
|
1
|
-
import { Map, FlyToOptions } from 'maplibre-gl';
|
|
1
|
+
import { Map, FlyToOptions, Marker } from 'maplibre-gl';
|
|
2
|
+
import * as axios from 'axios';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
lng: string | number;
|
|
14
|
-
token?: string;
|
|
15
|
-
type?: string;
|
|
16
|
-
}
|
|
17
|
-
interface ISearch {
|
|
18
|
-
fullAddress: string;
|
|
19
|
-
latitude: number;
|
|
20
|
-
longitude: number;
|
|
21
|
-
type: string;
|
|
22
|
-
distance: number | null;
|
|
23
|
-
detailInfo: {
|
|
24
|
-
categories: string;
|
|
25
|
-
name: string;
|
|
26
|
-
};
|
|
27
|
-
detailDetail: {
|
|
28
|
-
city: string | null;
|
|
29
|
-
city_type: string | null;
|
|
30
|
-
street_name: string | null;
|
|
31
|
-
street_type: string | null;
|
|
32
|
-
subject_name: string | null;
|
|
33
|
-
subject_type: string | null;
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
interface ISearchResponse {
|
|
37
|
-
success: boolean;
|
|
38
|
-
data: ISearch[];
|
|
39
|
-
message?: string;
|
|
4
|
+
declare class CameraController {
|
|
5
|
+
private map;
|
|
6
|
+
constructor(map: Map);
|
|
7
|
+
setZoom(zoom: number, smooth?: boolean): void;
|
|
8
|
+
setBearing(bearing: number, smooth?: boolean): void;
|
|
9
|
+
setPitch(pitch: number, smooth?: boolean): void;
|
|
10
|
+
toggle3D(is3D: boolean): void;
|
|
11
|
+
resetNorth(): void;
|
|
12
|
+
flyTo(options: FlyToOptions): void;
|
|
13
|
+
getPitch(): number;
|
|
40
14
|
}
|
|
41
15
|
|
|
42
16
|
interface IAdditionalParamType {
|
|
@@ -46,6 +20,31 @@ interface IAdditionalParamType {
|
|
|
46
20
|
limit?: number;
|
|
47
21
|
}
|
|
48
22
|
|
|
23
|
+
interface IMahalMapOptions {
|
|
24
|
+
container?: string | HTMLElement;
|
|
25
|
+
style?: string;
|
|
26
|
+
theme?: "dark" | "light";
|
|
27
|
+
center?: [number, number];
|
|
28
|
+
zoom?: number;
|
|
29
|
+
autoAddVectorSource?: boolean;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
interface MahalMapDefaultMarkerProps {
|
|
33
|
+
coordinates: [number, number];
|
|
34
|
+
draggable?: boolean;
|
|
35
|
+
anchor?: "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
36
|
+
color?: string;
|
|
37
|
+
svg?: string;
|
|
38
|
+
innerSvg?: string;
|
|
39
|
+
innerUrl?: string;
|
|
40
|
+
}
|
|
41
|
+
interface IMapMarker {
|
|
42
|
+
getElement(): HTMLElement;
|
|
43
|
+
getCoordinates(): [number, number];
|
|
44
|
+
isDraggable?(): boolean;
|
|
45
|
+
getAnchor?(): "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
46
|
+
}
|
|
47
|
+
|
|
49
48
|
interface IRoute {
|
|
50
49
|
id: number;
|
|
51
50
|
type: string;
|
|
@@ -78,71 +77,75 @@ interface IRoute {
|
|
|
78
77
|
};
|
|
79
78
|
}
|
|
80
79
|
|
|
81
|
-
interface
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
attributionControl: boolean;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
interface MahalMapDefaultMarkerProps {
|
|
92
|
-
coordinates: [number, number];
|
|
93
|
-
draggable?: boolean;
|
|
94
|
-
anchor?: "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
95
|
-
color?: string;
|
|
96
|
-
svg?: string;
|
|
97
|
-
innerSvg?: string;
|
|
98
|
-
innerUrl?: string;
|
|
80
|
+
interface ISearchParam {
|
|
81
|
+
text: string;
|
|
82
|
+
lat?: string;
|
|
83
|
+
lng?: string;
|
|
84
|
+
token: string;
|
|
85
|
+
type?: string;
|
|
86
|
+
limit?: number;
|
|
99
87
|
}
|
|
100
|
-
interface
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
88
|
+
interface ISearchByLocationParam {
|
|
89
|
+
lat: string | number;
|
|
90
|
+
lng: string | number;
|
|
91
|
+
token?: string;
|
|
92
|
+
type?: string;
|
|
105
93
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
94
|
+
interface ISearchResponse {
|
|
95
|
+
longitude: number;
|
|
96
|
+
latitude: number;
|
|
97
|
+
fullAddress: string;
|
|
98
|
+
type: string;
|
|
99
|
+
distance: number | null;
|
|
100
|
+
detailInfo: {
|
|
101
|
+
categories: string;
|
|
102
|
+
name: string;
|
|
103
|
+
};
|
|
104
|
+
detailDetail: {
|
|
105
|
+
city: string | null;
|
|
106
|
+
city_type: string | null;
|
|
107
|
+
street_name: string | null;
|
|
108
|
+
street_type: string | null;
|
|
109
|
+
subject_name: string | null;
|
|
110
|
+
subject_type: string | null;
|
|
111
|
+
};
|
|
117
112
|
}
|
|
118
113
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
private createElement;
|
|
124
|
-
private applyColorToCustomSvg;
|
|
125
|
-
getElement(): HTMLElement;
|
|
126
|
-
getCoordinates(): [number, number];
|
|
127
|
-
isDraggable(): boolean;
|
|
128
|
-
getAnchor(): "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
114
|
+
interface IReponse<T> {
|
|
115
|
+
success: boolean;
|
|
116
|
+
data: T;
|
|
117
|
+
message: string;
|
|
129
118
|
}
|
|
130
119
|
|
|
120
|
+
type MapLibreApi = {
|
|
121
|
+
Map: new (...args: ConstructorParameters<typeof Map>) => Map;
|
|
122
|
+
Marker: new (...args: ConstructorParameters<typeof Marker>) => Marker;
|
|
123
|
+
};
|
|
131
124
|
declare class MahalMap {
|
|
132
|
-
private static
|
|
125
|
+
private static instances;
|
|
133
126
|
private isReady;
|
|
134
127
|
private readyCallbacks;
|
|
135
128
|
private map;
|
|
136
129
|
private maplibre;
|
|
137
130
|
private camera;
|
|
131
|
+
private logoElement?;
|
|
138
132
|
private options;
|
|
133
|
+
private instanceKey;
|
|
139
134
|
private constructor();
|
|
140
|
-
static
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
static
|
|
144
|
-
static
|
|
145
|
-
|
|
135
|
+
private static getInstanceKey;
|
|
136
|
+
static create(options: IMahalMapOptions, maplibreObject?: MapLibreApi): MahalMap;
|
|
137
|
+
static onReady(container: string, callback: (map: Map) => void): void;
|
|
138
|
+
static getInstance(container: string): MahalMap;
|
|
139
|
+
static hasInstance(container: string): boolean;
|
|
140
|
+
static removeInstance(container: string): boolean;
|
|
141
|
+
static addMarker(instance: MahalMap, marker: IMapMarker): Marker;
|
|
142
|
+
static getCamera(instance: MahalMap): CameraController;
|
|
143
|
+
static getMap(instance: MahalMap): Map;
|
|
144
|
+
static setStyle(instance: MahalMap, theme: "dark" | "light"): void;
|
|
145
|
+
static setCenter(instance: MahalMap, center: [number, number]): void;
|
|
146
|
+
static setZoom(instance: MahalMap, zoom: number): void;
|
|
147
|
+
static destroy(instance: MahalMap): void;
|
|
148
|
+
addMarker(marker: IMapMarker): Marker;
|
|
146
149
|
init(map: Map): void;
|
|
147
150
|
getCamera(): CameraController;
|
|
148
151
|
getMap(): Map;
|
|
@@ -150,39 +153,65 @@ declare class MahalMap {
|
|
|
150
153
|
setCenter(center: [number, number]): void;
|
|
151
154
|
setZoom(zoom: number): void;
|
|
152
155
|
destroy(): void;
|
|
156
|
+
private addLogo;
|
|
157
|
+
private updateLogoColor;
|
|
158
|
+
private getLogoSvg;
|
|
153
159
|
}
|
|
154
160
|
|
|
161
|
+
declare function saveKey(param: string): void;
|
|
162
|
+
declare function clearKey(): void;
|
|
163
|
+
declare const getApiKey: () => string;
|
|
164
|
+
|
|
165
|
+
declare const api: axios.AxiosInstance;
|
|
166
|
+
|
|
167
|
+
declare function Router(param: number[][], typeData: string, token: string): Promise<IRoute[]>;
|
|
168
|
+
|
|
155
169
|
declare function Search(param: string, token: string, additionalParam?: IAdditionalParamType): Promise<ISearchResponse>;
|
|
156
170
|
declare function SearchByLocation(params: ISearchByLocationParam): Promise<ISearchResponse>;
|
|
157
171
|
|
|
158
|
-
declare
|
|
172
|
+
declare const index$1_Router: typeof Router;
|
|
173
|
+
declare const index$1_Search: typeof Search;
|
|
174
|
+
declare const index$1_SearchByLocation: typeof SearchByLocation;
|
|
175
|
+
declare const index$1_api: typeof api;
|
|
176
|
+
declare const index$1_clearKey: typeof clearKey;
|
|
177
|
+
declare const index$1_getApiKey: typeof getApiKey;
|
|
178
|
+
declare const index$1_saveKey: typeof saveKey;
|
|
179
|
+
declare namespace index$1 {
|
|
180
|
+
export { index$1_Router as Router, index$1_Search as Search, index$1_SearchByLocation as SearchByLocation, index$1_api as api, index$1_clearKey as clearKey, index$1_getApiKey as getApiKey, index$1_saveKey as saveKey };
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
declare class MahalMapDefaultMarker {
|
|
184
|
+
private props;
|
|
185
|
+
private element;
|
|
186
|
+
constructor(props: MahalMapDefaultMarkerProps);
|
|
187
|
+
private createElement;
|
|
188
|
+
private applyColorToCustomSvg;
|
|
189
|
+
getElement(): HTMLElement;
|
|
190
|
+
getCoordinates(): [number, number];
|
|
191
|
+
isDraggable(): boolean;
|
|
192
|
+
getAnchor(): "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
declare function checkCoordinates(coordinates: string): {
|
|
196
|
+
lat: string | undefined;
|
|
197
|
+
lng: string | undefined;
|
|
198
|
+
} | null;
|
|
159
199
|
|
|
160
200
|
declare function debounce<F extends (...args: any[]) => Promise<any>>(fn: F, delay: number): (...args: Parameters<F>) => Promise<ReturnType<F>>;
|
|
161
201
|
|
|
162
|
-
declare
|
|
163
|
-
declare namespace index {
|
|
164
|
-
export { index_debounce as debounce };
|
|
165
|
-
}
|
|
202
|
+
declare function geojsonPolyline(encoded: string): number[][];
|
|
166
203
|
|
|
167
|
-
declare function
|
|
168
|
-
declare function clearKey(): void;
|
|
169
|
-
declare const getApiKey: () => string;
|
|
204
|
+
declare function geometryPolyline(coordinates: number[][]): string;
|
|
170
205
|
|
|
171
|
-
declare
|
|
172
|
-
declare const keyUtils_getApiKey: typeof getApiKey;
|
|
173
|
-
declare const keyUtils_saveKey: typeof saveKey;
|
|
174
|
-
declare namespace keyUtils {
|
|
175
|
-
export { keyUtils_clearKey as clearKey, keyUtils_getApiKey as getApiKey, keyUtils_saveKey as saveKey };
|
|
176
|
-
}
|
|
206
|
+
declare function trimValue(value: string, cut: number): string;
|
|
177
207
|
|
|
178
|
-
declare const
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
};
|
|
208
|
+
declare const index_checkCoordinates: typeof checkCoordinates;
|
|
209
|
+
declare const index_debounce: typeof debounce;
|
|
210
|
+
declare const index_geojsonPolyline: typeof geojsonPolyline;
|
|
211
|
+
declare const index_geometryPolyline: typeof geometryPolyline;
|
|
212
|
+
declare const index_trimValue: typeof trimValue;
|
|
213
|
+
declare namespace index {
|
|
214
|
+
export { index_checkCoordinates as checkCoordinates, index_debounce as debounce, index_geojsonPolyline as geojsonPolyline, index_geometryPolyline as geometryPolyline, index_trimValue as trimValue };
|
|
215
|
+
}
|
|
187
216
|
|
|
188
|
-
export { type IAdditionalParamType, type IMahalMapOptions, type IMapMarker, type
|
|
217
|
+
export { type IAdditionalParamType, type IMahalMapOptions, type IMapMarker, type IReponse, type IRoute, type ISearchByLocationParam, type ISearchParam, type ISearchResponse, MahalMap, MahalMapDefaultMarker, type MahalMapDefaultMarkerProps, Router, Search, SearchByLocation, index$1 as keyUtils, index as utils };
|