From 5135005797603fcfcb24bbf014bb74db20b2f745 Mon Sep 17 00:00:00 2001 From: Craig Kochis Date: Wed, 4 Sep 2024 14:25:00 -0400 Subject: [PATCH 1/3] fallback to marker associated with style if one is not specified --- README.md | 14 ++-- package-lock.json | 2 +- package.json | 2 +- src/ui/RadarMap.ts | 11 +++ src/ui/RadarMarker.ts | 167 +++++++++++++++++++++++------------------- src/version.ts | 2 +- 6 files changed, 113 insertions(+), 85 deletions(-) diff --git a/README.md b/README.md index 0be5af9c..a170aa88 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ Radar.initialize('prj_test_pk_...', { /* options */ }); Add the following script in your `html` file ```html - + ``` Then initialize the Radar SDK @@ -73,8 +73,8 @@ To create a map, first initialize the Radar SDK with your publishable key. Then ```html - - + + @@ -98,8 +98,8 @@ To create an autocomplete input, first initialize the Radar SDK with your publis ```html - - + + @@ -130,8 +130,8 @@ To power [geofencing](https://radar.com/documentation/geofencing/overview) exper ```html - - + + diff --git a/package-lock.json b/package-lock.json index fe0b5715..ece66673 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "radar-sdk-js", - "version": "4.4.1", + "version": "4.5.0-beta.0", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/package.json b/package.json index 39b01b49..bcce4715 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "radar-sdk-js", - "version": "4.4.1", + "version": "4.5.0-beta.0", "description": "Web Javascript SDK for Radar, location infrastructure for mobile and web apps.", "homepage": "https://radar.com", "type": "module", diff --git a/src/ui/RadarMap.ts b/src/ui/RadarMap.ts index 4ccfcbdf..7aabe34c 100644 --- a/src/ui/RadarMap.ts +++ b/src/ui/RadarMap.ts @@ -80,6 +80,7 @@ const getStyle = (options: RadarOptions, mapOptions: RadarMapOptions) => { class RadarMap extends maplibregl.Map { _markers: RadarMarker[] = []; _features: RadarMapFeature[] = []; + _defaultMarker?: string; constructor(radarMapOptions: RadarMapOptions) { const config = Config.get(); @@ -152,6 +153,16 @@ class RadarMap extends maplibregl.Map { }; this.on('resize', onResize); this.on('load', onResize); + + // parse radar metadata from style + this.on('style.load', () => { + const style = this.getStyle(); + const metadata: any = style.metadata || {}; + + if (metadata['radar:marker']) { // default marker associated with custom style + this._defaultMarker = metadata['radar:marker']; + } + }); } addMarker(marker: RadarMarker) { diff --git a/src/ui/RadarMarker.ts b/src/ui/RadarMarker.ts index d76342f2..f9faeb00 100644 --- a/src/ui/RadarMarker.ts +++ b/src/ui/RadarMarker.ts @@ -89,6 +89,7 @@ const defaultMarkerOptions: RadarMarkerOptions = { }; class RadarMarker extends maplibregl.Marker { + _options: RadarMarkerOptions; _map!: RadarMap; constructor(markerOptions: RadarMarkerOptions) { @@ -107,83 +108,11 @@ class RadarMarker extends maplibregl.Marker { super(maplibreOptions); + this._options = markerOptions; + // handle marker images (Radar marker, or custom URL) if (markerOptions.marker || markerOptions.url) { - const originalElement = this._element.cloneNode(true); - this._element.childNodes.forEach((child) => { - child.remove(); - }); - - const onSuccess = (blob: Blob) => { - const markerObject = URL.createObjectURL(blob); - this._element.replaceChildren(createImageElement({ - width: markerOptions.width, - height: markerOptions.height, - url: markerObject, - })); - }; - - const onError = (err: any) => { - Logger.error(`Could not load marker: ${err.message} - falling back to default marker`); - IMAGE_CACHE.set(markerOptions.url as string, 'failed'); // mark as failed - this._element.replaceChildren(...Array.from(originalElement.childNodes)); - } - - // custom URL image - if (markerOptions.url) { - const loadImage = () => { // fetch marker data from URL - fetch(markerOptions.url as string) - .then(res => { - if (res.status === 200) { - res.blob() - .then((data) => { - IMAGE_CACHE.set(markerOptions.url as string, data); // cache data - onSuccess(data); - }) - .catch(onError); - } else { - onError(new Error(res.statusText)); - } - }) - .catch(onError) - }; - - // attempt to use cached data, otherwise fetch marker image data from URL - useCachedImage(markerOptions.url) - .then(onSuccess) - .catch((reason: 'miss' | 'timedout' | 'failed' | Error) => { - if (reason !== 'miss') { - Logger.debug(`RadarMarker: cache lookup for ${markerOptions.url}: ${reason}`); - } - loadImage(); - }); - } - - // Radar hosted image - if (markerOptions.marker) { - const loadMarker = () => { - Http.request({ - method: 'GET', - version: 'maps', - path: `markers/${markerOptions.marker}`, - responseType: 'blob', - }) - .then(({ data }) => { - IMAGE_CACHE.set(markerOptions.url as string, data); // cache data - onSuccess(data) - }) - .catch(onError); - }; - - useCachedImage(markerOptions.marker as string) - .then(onSuccess) - .catch((reason: 'miss' | 'timedout' | 'failed' | Error) => { - if (reason !== 'miss') { - Logger.debug(`RadarMarker: cache lookup for ${markerOptions.marker} ${reason}`); - } - loadMarker(); - }); - } + this.getCustomImage(markerOptions); } // handle deprecated popup options @@ -238,7 +167,95 @@ class RadarMarker extends maplibregl.Marker { } } + // load marker image from a URL or as a Radar asset (custom styles) + getCustomImage(markerOptions: RadarMarkerOptions) { + const originalElement = this._element.cloneNode(true); + this._element.childNodes.forEach((child) => { + child.remove(); + }); + + const onSuccess = (blob: Blob) => { + const markerObject = URL.createObjectURL(blob); + this._element.replaceChildren(createImageElement({ + width: markerOptions.width, + height: markerOptions.height, + url: markerObject, + })); + }; + + const onError = (err: any) => { + Logger.error(`Could not load marker: ${err.message} - falling back to default marker`); + IMAGE_CACHE.set(markerOptions.url as string, 'failed'); // mark as failed + this._element.replaceChildren(...Array.from(originalElement.childNodes)); + } + + // custom URL image + if (markerOptions.url) { + const loadImage = () => { // fetch marker data from URL + fetch(markerOptions.url as string) + .then(res => { + if (res.status === 200) { + res.blob() + .then((data) => { + IMAGE_CACHE.set(markerOptions.url as string, data); // cache data + onSuccess(data); + }) + .catch(onError); + } else { + onError(new Error(res.statusText)); + } + }) + .catch(onError) + }; + + // attempt to use cached data, otherwise fetch marker image data from URL + useCachedImage(markerOptions.url) + .then(onSuccess) + .catch((reason: 'miss' | 'timedout' | 'failed' | Error) => { + if (reason !== 'miss') { + Logger.debug(`RadarMarker: cache lookup for ${markerOptions.url}: ${reason}`); + } + loadImage(); + }); + } + + // Radar hosted image + if (markerOptions.marker) { + const loadMarker = () => { + Http.request({ + method: 'GET', + version: 'maps', + path: `markers/${markerOptions.marker}`, + responseType: 'blob', + }) + .then(({ data }) => { + IMAGE_CACHE.set(markerOptions.url as string, data); // cache data + onSuccess(data) + }) + .catch(onError); + }; + + useCachedImage(markerOptions.marker as string) + .then(onSuccess) + .catch((reason: 'miss' | 'timedout' | 'failed' | Error) => { + if (reason !== 'miss') { + Logger.debug(`RadarMarker: cache lookup for ${markerOptions.marker} ${reason}`); + } + loadMarker(); + }); + } + } + addTo(map: RadarMap) { + // use default marker associated with map style, if none is provided in options + // (and custom style has an associated marker) + if (!this._options.url && !this._options.marker && map._defaultMarker) { + this.getCustomImage({ + ...this._options, + marker: map._defaultMarker, + }); + } + map.addMarker(this); return super.addTo(map); } diff --git a/src/version.ts b/src/version.ts index 45efae50..cd1e34ba 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1 +1 @@ -export default '4.4.1'; +export default '4.5.0-beta.0'; From c44c70bb0ac4de3afc1026e59f4919282c272702 Mon Sep 17 00:00:00 2001 From: Craig Kochis Date: Wed, 4 Sep 2024 14:27:32 -0400 Subject: [PATCH 2/3] dont use style default if a color is provided --- src/ui/RadarMarker.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/ui/RadarMarker.ts b/src/ui/RadarMarker.ts index f9faeb00..1501ac92 100644 --- a/src/ui/RadarMarker.ts +++ b/src/ui/RadarMarker.ts @@ -249,11 +249,14 @@ class RadarMarker extends maplibregl.Marker { addTo(map: RadarMap) { // use default marker associated with map style, if none is provided in options // (and custom style has an associated marker) - if (!this._options.url && !this._options.marker && map._defaultMarker) { - this.getCustomImage({ - ...this._options, - marker: map._defaultMarker, - }); + const markerOptions = this._options; + if (!markerOptions.url && !markerOptions.marker && !markerOptions.color) { + if (map._defaultMarker) { + this.getCustomImage({ + ...markerOptions, + marker: map._defaultMarker, + }); + } } map.addMarker(this); From 1a024cd0248441525f16957caed9e82f690b7d9e Mon Sep 17 00:00:00 2001 From: Craig Kochis Date: Wed, 11 Sep 2024 13:22:52 -0400 Subject: [PATCH 3/3] update code with cache fix --- src/ui/RadarMarker.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/RadarMarker.ts b/src/ui/RadarMarker.ts index 1501ac92..64e7e984 100644 --- a/src/ui/RadarMarker.ts +++ b/src/ui/RadarMarker.ts @@ -229,7 +229,7 @@ class RadarMarker extends maplibregl.Marker { responseType: 'blob', }) .then(({ data }) => { - IMAGE_CACHE.set(markerOptions.url as string, data); // cache data + IMAGE_CACHE.set(markerOptions.marker as string, data); // cache data onSuccess(data) }) .catch(onError);