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 @@
+ +