Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update marker params #168

Merged
merged 2 commits into from
Jun 3, 2024
Merged

Update marker params #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0ef05e1
update marker params
kochis Jun 3, 2024
80ac96f
handle popup.element
kochis Jun 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions demo/views/add-a-marker.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,11 @@
map.on('load', () => {
const { lat, lng } = map.getCenter();

marker = Radar.ui.marker({ text: `${lat}, ${lng}` })
marker = Radar.ui.marker({
popup: {
text: `${lat}, ${lng}`,
},
})
.setLngLat([lng, lat])
.addTo(map);

Expand All @@ -59,8 +63,10 @@
}
const { lat, lng } = map.getCenter();
marker = Radar.ui.marker({
image: { url },
text: `${lat}, ${lng}`,
url,
popup: {
text: `${lat}, ${lng}`,
},
})
.setLngLat([lng, lat])
.addTo(map);
Expand Down
22 changes: 18 additions & 4 deletions demo/views/start-a-trip.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,11 @@
<p>${location.latitude},${location.longitude}</p>
`.trim();

const userMarker = Radar.ui.marker({ html: userContent })
const userMarker = Radar.ui.marker({
popup: {
html: userContent,
},
})
.setLngLat([location.longitude, location.latitude])
.addTo(map);

Expand All @@ -122,7 +126,12 @@
<p>${user.trip.destinationGeofenceExternalId}</p>
`.trim();

const destMarker = Radar.ui.marker({ html: destContent, color: '#FF6F00' })
const destMarker = Radar.ui.marker({
color: '#FF6F00',
popup: {
html: destContent,
},
})
.setLngLat(user.trip.destinationLocation.coordinates)
.addTo(map);

Expand Down Expand Up @@ -197,7 +206,7 @@
<p>${location.latitude},${location.longitude}</p>
`.trim();

const userMarker = Radar.ui.marker({ html: userHtml })
const userMarker = Radar.ui.marker({ popup: { html: userHtml }})
.setLngLat([location.longitude, location.latitude])
.addTo(map);

Expand All @@ -208,7 +217,12 @@
<p>${user.trip.destinationGeofenceExternalId}</p>
`.trim();

destMarker = Radar.ui.marker({ html: destHtml, color: '#FF6F00' })
destMarker = Radar.ui.marker({
color: '#FF6F00',
popup: {
html: destHtml,
},
})
.setLngLat(user.trip.destinationLocation.coordinates)
.addTo(map);
}
Expand Down
4 changes: 2 additions & 2 deletions demo/views/track-a-user.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@
&lt;p&gt;${location.latitude},${location.longitude}&lt;/p&gt;
`.trim();

const marker = Radar.ui.marker({ html })
const marker = Radar.ui.marker({ popup: { html }})
.setLngLat([location.longitude, location.latitude])
.addTo(map);
});
Expand Down Expand Up @@ -144,7 +144,7 @@
<p>${location.latitude},${location.longitude}</p>
`.trim();

const marker = Radar.ui.marker({ html })
const marker = Radar.ui.marker({ popup: { html }})
.setLngLat([location.longitude, location.latitude])
.addTo(map);

Expand Down
24 changes: 16 additions & 8 deletions src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,22 +463,30 @@ export interface RadarMapOptions extends Omit<maplibregl.MapOptions, 'transformR
language?: string;
}

export interface RadarMarkerImage {
url?: string;
radarMarkerId?: string;
width?: number;
height?: number;
}

export interface RadarMarkerPopupOptions extends maplibregl.PopupOptions {
text?: string;
html?: string;
element?: HTMLElement;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't think this is being handled anywhere

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated: https://github.com/radarlabs/radar-sdk-js/pull/168/files#diff-e53267c1a9488c80008ee9e8ac8ad555734d062f4553b72ba21f7e76323a104fR125

}

export interface RadarMarkerOptions extends maplibregl.MarkerOptions {
/**
* @deprecated Use popup.text
*/
text?: string;

/**
* @deprecated Use popup.html
*/
html?: string;
image?: RadarMarkerImage;

// marker configs
url?: string;
marker?: string;
width?: number;
height?: number;

// popup configs
popup?: RadarMarkerPopupOptions;
}

Expand Down
37 changes: 24 additions & 13 deletions src/ui/RadarMarker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,16 @@ import Logger from '../logger';

import type RadarMap from './RadarMap';

import type { RadarMarkerImage, RadarMarkerOptions } from '../types';
import type { RadarMarkerOptions } from '../types';

interface ImageOptions {
url?: string;
width?: number;
height?: number;
}

const defaultMarkerOptions: RadarMarkerOptions = {
color: '#000257',
};

const createImageElement = (options: RadarMarkerImage) => {
const createImageElement = (options: ImageOptions) => {
const element = document.createElement('img');
element.src = options.url!;

Expand All @@ -30,13 +33,17 @@ const createImageElement = (options: RadarMarkerImage) => {
return element;
}

const defaultMarkerOptions: RadarMarkerOptions = {
color: '#000257',
};

class RadarMarker extends maplibregl.Marker {
_map!: RadarMap;
_image?: RadarMarkerImage;

constructor(markerOptions: RadarMarkerOptions) {
const maplibreOptions: maplibregl.MarkerOptions = Object.assign({}, defaultMarkerOptions);

// init MapLibre marker configs
if (markerOptions.color) {
maplibreOptions.color = markerOptions.color;
}
Expand All @@ -49,9 +56,8 @@ class RadarMarker extends maplibregl.Marker {

super(maplibreOptions);

if (markerOptions.image) {
this._image = markerOptions.image;

// 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();
Expand All @@ -67,8 +73,8 @@ class RadarMarker extends maplibregl.Marker {
this._element.replaceChildren(...Array.from(originalElement.childNodes));
}

if (markerOptions.image.url) {
fetch(markerOptions.image.url)
if (markerOptions.url) {
fetch(markerOptions.url)
.then(res => {
if (res.status === 200) {
res.blob()
Expand All @@ -81,12 +87,12 @@ class RadarMarker extends maplibregl.Marker {
.catch(onError)
}

if (markerOptions.image.radarMarkerId) {
if (markerOptions.marker) {
// fetch custom marker
Http.request({
method: 'GET',
version: 'maps',
path: `markers/${markerOptions.image.radarMarkerId}`,
path: `markers/${markerOptions.marker}`,
responseType: 'blob',
})
.then(({ data }) => onSuccess(data))
Expand All @@ -96,10 +102,12 @@ class RadarMarker extends maplibregl.Marker {

// handle deprecated popup options
if (markerOptions.text) {
Logger.warn('marker option "text" is deprecated, and will be removed in a future version. Use "popup.text".');
markerOptions.popup = markerOptions.popup || {};
markerOptions.popup!.text = markerOptions.text;
}
if (markerOptions.html) {
Logger.warn('marker option "html" is deprecated, and will be removed in a future version. Use "popup.html".');
markerOptions.popup = markerOptions.popup || {};
markerOptions.popup!.html = markerOptions.html;
}
Expand All @@ -114,6 +122,9 @@ class RadarMarker extends maplibregl.Marker {
if (markerOptions.popup.html) {
popup.setHTML(markerOptions.popup.html);
}
if (markerOptions.popup.element) {
popup.setDOMContent(markerOptions.popup.element);
}

this.setPopup(popup);
}
Expand Down
Loading