From 6b6d40e73fee24e2acdb007ff6e1fcfcbab21dca Mon Sep 17 00:00:00 2001 From: Jason Liu Date: Thu, 9 May 2024 10:50:40 -0400 Subject: [PATCH] Radar map UI kit refactor (#153) * support custom style * custom markers * Maplibre control radar logo * bump version * refactor mapui kit by inheriting maplibre-gl - bump tsconfig target from es2015->es2016 for compatibility with class inheritence * pass request header override in map transformRequest * version bump * include custom style id in marker request * new marker logic * Delete .vscode directory * add .vscode/ to .gitignore * bump version * bump version * update transformRequest and add custom styles to demo page * marker updates * remove `getOptions` from `RadarMarker` * better way to handle custom markers and image urls * add custom url input to marker demo page * compliation target changes and copy changes * set beta version --------- Co-authored-by: Craig Kochis --- .gitignore | 1 + README.md | 14 ++-- demo/views/add-a-marker.hbs | 21 ++++- demo/views/display-a-map.hbs | 31 +++++++ package-lock.json | 2 +- package.json | 2 +- src/http.ts | 59 ++++++++------ src/types.ts | 15 ++-- src/ui/RadarLogoControl.ts | 24 ++++++ src/ui/RadarMap.ts | 140 ++++++++++++++++++++++++++++++++ src/ui/RadarMarker.ts | 126 +++++++++++++++++++++++++++++ src/ui/map.ts | 152 +++-------------------------------- src/version.ts | 2 +- tsconfig.json | 2 +- 14 files changed, 407 insertions(+), 184 deletions(-) create mode 100644 src/ui/RadarLogoControl.ts create mode 100644 src/ui/RadarMap.ts create mode 100644 src/ui/RadarMarker.ts diff --git a/.gitignore b/.gitignore index 9060430f..92b050f6 100644 --- a/.gitignore +++ b/.gitignore @@ -28,3 +28,4 @@ cdn/ coverage/ site/ .nyc_output/ +.vscode/ diff --git a/README.md b/README.md index 2b2757ea..c072bc10 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/demo/views/add-a-marker.hbs b/demo/views/add-a-marker.hbs index 090187b1..1f65fd22 100644 --- a/demo/views/add-a-marker.hbs +++ b/demo/views/add-a-marker.hbs @@ -12,6 +12,8 @@
+ +

Add publishable key to see map

@@ -37,12 +39,28 @@ container: 'map', }); + let marker; map.on('load', () => { const { lat, lng } = map.getCenter(); - const marker = Radar.ui.marker({ text: `${lat}, ${lng}` }) + marker = Radar.ui.marker({ text: `${lat}, ${lng}` }) .setLngLat([lng, lat]) .addTo(map); + + // use custom marker from URL + $('#imageUrl').on('change', (e) => { + const url = e.target.value; + if (marker) { + marker.remove(); + } + const { lat, lng } = map.getCenter(); + marker = Radar.ui.marker({ + image: { url }, + text: `${lat}, ${lng}`, + }) + .setLngLat([lng, lat]) + .addTo(map); + }); }); map.on('error', (err) => { @@ -59,4 +77,5 @@ init(publishableKey); } }); + diff --git a/demo/views/display-a-map.hbs b/demo/views/display-a-map.hbs index 8e75b32b..38a9f832 100644 --- a/demo/views/display-a-map.hbs +++ b/demo/views/display-a-map.hbs @@ -12,6 +12,8 @@
+ +