radar-sdk-js 4.3.4 → 4.3.5-beta.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 +7 -7
- package/dist/radar.js +76 -21
- package/dist/radar.js.map +1 -1
- package/dist/version.d.ts +1 -1
- package/package.json +1 -1
- package/src/ui/RadarMarker.ts +78 -19
- package/src/version.ts +1 -1
package/README.md
CHANGED
|
@@ -56,7 +56,7 @@ Radar.initialize('prj_test_pk_...', { /* options */ });
|
|
|
56
56
|
|
|
57
57
|
Add the following script in your `html` file
|
|
58
58
|
```html
|
|
59
|
-
<script src="https://js.radar.com/v4.3.
|
|
59
|
+
<script src="https://js.radar.com/v4.3.5-beta.0/radar.min.js"></script>
|
|
60
60
|
```
|
|
61
61
|
|
|
62
62
|
Then initialize the Radar SDK
|
|
@@ -73,8 +73,8 @@ To create a map, first initialize the Radar SDK with your publishable key. Then
|
|
|
73
73
|
```html
|
|
74
74
|
<html>
|
|
75
75
|
<head>
|
|
76
|
-
<link href="https://js.radar.com/v4.3.
|
|
77
|
-
<script src="https://js.radar.com/v4.3.
|
|
76
|
+
<link href="https://js.radar.com/v4.3.5-beta.0/radar.css" rel="stylesheet">
|
|
77
|
+
<script src="https://js.radar.com/v4.3.5-beta.0/radar.min.js"></script>
|
|
78
78
|
</head>
|
|
79
79
|
|
|
80
80
|
<body>
|
|
@@ -98,8 +98,8 @@ To create an autocomplete input, first initialize the Radar SDK with your publis
|
|
|
98
98
|
```html
|
|
99
99
|
<html>
|
|
100
100
|
<head>
|
|
101
|
-
<link href="https://js.radar.com/v4.3.
|
|
102
|
-
<script src="https://js.radar.com/v4.3.
|
|
101
|
+
<link href="https://js.radar.com/v4.3.5-beta.0/radar.css" rel="stylesheet">
|
|
102
|
+
<script src="https://js.radar.com/v4.3.5-beta.0/radar.min.js"></script>
|
|
103
103
|
</head>
|
|
104
104
|
|
|
105
105
|
<body>
|
|
@@ -130,8 +130,8 @@ To power [geofencing](https://radar.com/documentation/geofencing/overview) exper
|
|
|
130
130
|
```html
|
|
131
131
|
<html>
|
|
132
132
|
<head>
|
|
133
|
-
<link href="https://js.radar.com/v4.3.
|
|
134
|
-
<script src="https://js.radar.com/v4.3.
|
|
133
|
+
<link href="https://js.radar.com/v4.3.5-beta.0/radar.css" rel="stylesheet">
|
|
134
|
+
<script src="https://js.radar.com/v4.3.5-beta.0/radar.min.js"></script>
|
|
135
135
|
</head>
|
|
136
136
|
|
|
137
137
|
<body>
|
package/dist/radar.js
CHANGED
|
@@ -405,7 +405,7 @@ class Navigator {
|
|
|
405
405
|
}
|
|
406
406
|
}
|
|
407
407
|
|
|
408
|
-
var SDK_VERSION = '4.3.
|
|
408
|
+
var SDK_VERSION = '4.3.5-beta.0';
|
|
409
409
|
|
|
410
410
|
const inFlightRequests = new Map();
|
|
411
411
|
class Http {
|
|
@@ -1600,6 +1600,32 @@ class RadarMarkerMouseEvent {
|
|
|
1600
1600
|
this.type = type;
|
|
1601
1601
|
}
|
|
1602
1602
|
}
|
|
1603
|
+
// cache URL loaded markers
|
|
1604
|
+
const IMAGE_CACHE = new Map();
|
|
1605
|
+
const useCachedImage = (url, timeoutMS = 5000) => new Promise((resolve, reject) => {
|
|
1606
|
+
if (!IMAGE_CACHE.has(url)) { // nothing in cache
|
|
1607
|
+
IMAGE_CACHE.set(url, 'pending'); // request in flight
|
|
1608
|
+
return reject('miss');
|
|
1609
|
+
}
|
|
1610
|
+
const start = Date.now();
|
|
1611
|
+
const interval = setInterval(() => {
|
|
1612
|
+
const cachedData = IMAGE_CACHE.get(url);
|
|
1613
|
+
if (cachedData === 'pending') {
|
|
1614
|
+
if ((Date.now() - start) > timeoutMS) { // cache lookup took too long
|
|
1615
|
+
clearInterval(interval);
|
|
1616
|
+
reject('timed out');
|
|
1617
|
+
}
|
|
1618
|
+
}
|
|
1619
|
+
else if (cachedData === 'failed') { // request failed
|
|
1620
|
+
clearInterval(interval);
|
|
1621
|
+
reject('failed');
|
|
1622
|
+
}
|
|
1623
|
+
else { // return data
|
|
1624
|
+
clearInterval(interval);
|
|
1625
|
+
resolve(cachedData);
|
|
1626
|
+
}
|
|
1627
|
+
}, 100);
|
|
1628
|
+
});
|
|
1603
1629
|
const createImageElement = (options) => {
|
|
1604
1630
|
const element = document.createElement('img');
|
|
1605
1631
|
element.src = options.url;
|
|
@@ -1660,32 +1686,61 @@ class RadarMarker extends maplibregl.Marker {
|
|
|
1660
1686
|
};
|
|
1661
1687
|
const onError = (err) => {
|
|
1662
1688
|
Logger.error(`Could not load marker: ${err.message} - falling back to default marker`);
|
|
1689
|
+
IMAGE_CACHE.set(markerOptions.url, 'failed'); // mark as failed
|
|
1663
1690
|
this._element.replaceChildren(...Array.from(originalElement.childNodes));
|
|
1664
1691
|
};
|
|
1692
|
+
// custom URL image
|
|
1665
1693
|
if (markerOptions.url) {
|
|
1666
|
-
|
|
1667
|
-
.
|
|
1668
|
-
|
|
1669
|
-
res.
|
|
1670
|
-
.
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1694
|
+
const loadImage = () => {
|
|
1695
|
+
fetch(markerOptions.url)
|
|
1696
|
+
.then(res => {
|
|
1697
|
+
if (res.status === 200) {
|
|
1698
|
+
res.blob()
|
|
1699
|
+
.then((data) => {
|
|
1700
|
+
IMAGE_CACHE.set(markerOptions.url, data); // cache data
|
|
1701
|
+
onSuccess(data);
|
|
1702
|
+
})
|
|
1703
|
+
.catch(onError);
|
|
1704
|
+
}
|
|
1705
|
+
else {
|
|
1706
|
+
onError(new Error(res.statusText));
|
|
1707
|
+
}
|
|
1708
|
+
})
|
|
1709
|
+
.catch(onError);
|
|
1710
|
+
};
|
|
1711
|
+
// attempt to use cached data, otherwise fetch marker image data from URL
|
|
1712
|
+
useCachedImage(markerOptions.url)
|
|
1713
|
+
.then(onSuccess)
|
|
1714
|
+
.catch((reason) => {
|
|
1715
|
+
if (reason !== 'miss') {
|
|
1716
|
+
Logger.debug(`RadarMarker: cache lookup for ${markerOptions.url}: ${reason}`);
|
|
1675
1717
|
}
|
|
1676
|
-
|
|
1677
|
-
|
|
1718
|
+
loadImage();
|
|
1719
|
+
});
|
|
1678
1720
|
}
|
|
1721
|
+
// Radar hosted image
|
|
1679
1722
|
if (markerOptions.marker) {
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1723
|
+
const loadMarker = () => {
|
|
1724
|
+
Http.request({
|
|
1725
|
+
method: 'GET',
|
|
1726
|
+
version: 'maps',
|
|
1727
|
+
path: `markers/${markerOptions.marker}`,
|
|
1728
|
+
responseType: 'blob',
|
|
1729
|
+
})
|
|
1730
|
+
.then(({ data }) => {
|
|
1731
|
+
IMAGE_CACHE.set(markerOptions.url, data); // cache data
|
|
1732
|
+
onSuccess(data);
|
|
1733
|
+
})
|
|
1734
|
+
.catch(onError);
|
|
1735
|
+
};
|
|
1736
|
+
useCachedImage(markerOptions.marker)
|
|
1737
|
+
.then(onSuccess)
|
|
1738
|
+
.catch((reason) => {
|
|
1739
|
+
if (reason !== 'miss') {
|
|
1740
|
+
Logger.debug(`RadarMarker: cache lookup for ${markerOptions.marker} ${reason}`);
|
|
1741
|
+
}
|
|
1742
|
+
loadMarker();
|
|
1743
|
+
});
|
|
1689
1744
|
}
|
|
1690
1745
|
}
|
|
1691
1746
|
// handle deprecated popup options
|
package/dist/radar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radar.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"radar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: "4.3.
|
|
1
|
+
declare const _default: "4.3.5-beta.0";
|
|
2
2
|
export default _default;
|
package/package.json
CHANGED
package/src/ui/RadarMarker.ts
CHANGED
|
@@ -29,6 +29,34 @@ interface ImageOptions {
|
|
|
29
29
|
height?: number | string;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
// cache URL loaded markers
|
|
33
|
+
const IMAGE_CACHE = new Map<string, 'pending' | 'failed' | Blob>();
|
|
34
|
+
|
|
35
|
+
const useCachedImage = (url: string, timeoutMS: number = 5000): Promise<Blob> => new Promise((resolve, reject) => {
|
|
36
|
+
if (!IMAGE_CACHE.has(url)) { // nothing in cache
|
|
37
|
+
IMAGE_CACHE.set(url, 'pending'); // request in flight
|
|
38
|
+
return reject('miss');
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const start = Date.now();
|
|
42
|
+
const interval = setInterval(() => {
|
|
43
|
+
const cachedData = IMAGE_CACHE.get(url);
|
|
44
|
+
if (cachedData === 'pending') {
|
|
45
|
+
if ((Date.now() - start) > timeoutMS) { // cache lookup took too long
|
|
46
|
+
clearInterval(interval);
|
|
47
|
+
reject('timed out');
|
|
48
|
+
}
|
|
49
|
+
} else if (cachedData === 'failed') { // request failed
|
|
50
|
+
clearInterval(interval);
|
|
51
|
+
reject('failed');
|
|
52
|
+
|
|
53
|
+
} else { // return data
|
|
54
|
+
clearInterval(interval);
|
|
55
|
+
resolve(cachedData as Blob);
|
|
56
|
+
}
|
|
57
|
+
}, 100);
|
|
58
|
+
});
|
|
59
|
+
|
|
32
60
|
const createImageElement = (options: ImageOptions) => {
|
|
33
61
|
const element = document.createElement('img');
|
|
34
62
|
element.src = options.url!;
|
|
@@ -97,33 +125,64 @@ class RadarMarker extends maplibregl.Marker {
|
|
|
97
125
|
|
|
98
126
|
const onError = (err: any) => {
|
|
99
127
|
Logger.error(`Could not load marker: ${err.message} - falling back to default marker`);
|
|
128
|
+
IMAGE_CACHE.set(markerOptions.url as string, 'failed'); // mark as failed
|
|
100
129
|
this._element.replaceChildren(...Array.from(originalElement.childNodes));
|
|
101
130
|
}
|
|
102
131
|
|
|
132
|
+
// custom URL image
|
|
103
133
|
if (markerOptions.url) {
|
|
104
|
-
|
|
105
|
-
.
|
|
106
|
-
|
|
107
|
-
res.
|
|
108
|
-
.
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
134
|
+
const loadImage = () => { // fetch marker data from URL
|
|
135
|
+
fetch(markerOptions.url as string)
|
|
136
|
+
.then(res => {
|
|
137
|
+
if (res.status === 200) {
|
|
138
|
+
res.blob()
|
|
139
|
+
.then((data) => {
|
|
140
|
+
IMAGE_CACHE.set(markerOptions.url as string, data); // cache data
|
|
141
|
+
onSuccess(data);
|
|
142
|
+
})
|
|
143
|
+
.catch(onError);
|
|
144
|
+
} else {
|
|
145
|
+
onError(new Error(res.statusText));
|
|
146
|
+
}
|
|
147
|
+
})
|
|
148
|
+
.catch(onError)
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
// attempt to use cached data, otherwise fetch marker image data from URL
|
|
152
|
+
useCachedImage(markerOptions.url)
|
|
153
|
+
.then(onSuccess)
|
|
154
|
+
.catch((reason: 'miss' | 'timedout' | 'failed' | Error) => {
|
|
155
|
+
if (reason !== 'miss') {
|
|
156
|
+
Logger.debug(`RadarMarker: cache lookup for ${markerOptions.url}: ${reason}`);
|
|
112
157
|
}
|
|
113
|
-
|
|
114
|
-
|
|
158
|
+
loadImage();
|
|
159
|
+
});
|
|
115
160
|
}
|
|
116
161
|
|
|
162
|
+
// Radar hosted image
|
|
117
163
|
if (markerOptions.marker) {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
164
|
+
const loadMarker = () => {
|
|
165
|
+
Http.request({
|
|
166
|
+
method: 'GET',
|
|
167
|
+
version: 'maps',
|
|
168
|
+
path: `markers/${markerOptions.marker}`,
|
|
169
|
+
responseType: 'blob',
|
|
170
|
+
})
|
|
171
|
+
.then(({ data }) => {
|
|
172
|
+
IMAGE_CACHE.set(markerOptions.url as string, data); // cache data
|
|
173
|
+
onSuccess(data)
|
|
174
|
+
})
|
|
175
|
+
.catch(onError);
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
useCachedImage(markerOptions.marker as string)
|
|
179
|
+
.then(onSuccess)
|
|
180
|
+
.catch((reason: 'miss' | 'timedout' | 'failed' | Error) => {
|
|
181
|
+
if (reason !== 'miss') {
|
|
182
|
+
Logger.debug(`RadarMarker: cache lookup for ${markerOptions.marker} ${reason}`);
|
|
183
|
+
}
|
|
184
|
+
loadMarker();
|
|
185
|
+
});
|
|
127
186
|
}
|
|
128
187
|
}
|
|
129
188
|
|
package/src/version.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default '4.3.
|
|
1
|
+
export default '4.3.5-beta.0';
|