diff --git a/changelog.md b/changelog.md
index 2629eef..bc67415 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,13 @@
# Change Log
+## [5.0.3](https://github.com/chrisrzhou/react-globe/compare/v5.0.3...v5.0.2) (2020-12-31)
+
+Small enhancement.
+Add onTouch event for mobile use.
+| Status | Old | New |
+| --- | --- | --- |
+| added | | `onTouchMarker` |
+
## [5.0.2](https://github.com/chrisrzhou/react-globe/compare/v5.0.2...v5.0.1) (2020-08-08)
Various bugfixes.
diff --git a/docs/props.mdx b/docs/props.mdx
index 02e383e..e833434 100644
--- a/docs/props.mdx
+++ b/docs/props.mdx
@@ -38,6 +38,8 @@ interface Props {
width?: string | number;
/** Callback to handle click events of a marker. Captures the clicked marker, ThreeJS object and pointer event. */
onClickMarker?: MarkerCallback;
+ /** Callback to handle touch events of a marker. Captures the touched marker, ThreeJS object and pointer event. */
+ onTouchMarker?: MarkerCallback;
/** Callback to handle defocus events (i.e. clicking the globe after a focus has been applied). Captures the previously focused coordinates. */
onDefocus?: (previousFocus: Coordinates) => void;
/** Capture the initialized globe instance */
diff --git a/docs/usage/callbacks.mdx b/docs/usage/callbacks.mdx
index 168c175..1e205e5 100644
--- a/docs/usage/callbacks.mdx
+++ b/docs/usage/callbacks.mdx
@@ -29,6 +29,16 @@ import ReactGlobe from './react-globe';
setDetails(`City: ${marker.city} (Sales: ${marker.value}.0M)`);
}
+ function onTouchMarker(marker, markerObject, event) {
+ setEvent({
+ type: 'TOUCH',
+ marker,
+ markerObjectID: markerObject.uuid,
+ pointerEventPosition: { x: event.clientX, y: event.clientY },
+ });
+ setDetails(`City: ${marker.city} (Sales: ${marker.value}.0M)`);
+ }
+
function onDefocus(previousCoordinates) {
setEvent({
type: 'DEFOCUS',
@@ -59,6 +69,7 @@ import ReactGlobe from './react-globe';
{},
- onDefocus: _previousFocus => {},
- onGlobeBackgroundTextureLoaded: () => {},
- onGlobeCloudsTextureLoaded: () => {},
- onGlobeTextureLoaded: () => {},
- onMouseOutMarker: (_marker, _markerObject, _event) => {},
- onMouseOverMarker: (_marker, _markerObject, _event) => {},
+ onClickMarker: (_marker, _markerObject, _event) => { },
+ onTouchMarker: (_marker, _markerObject, _event) => { },
+ onDefocus: _previousFocus => { },
+ onGlobeBackgroundTextureLoaded: () => { },
+ onGlobeCloudsTextureLoaded: () => { },
+ onGlobeTextureLoaded: () => { },
+ onMouseOutMarker: (_marker, _markerObject, _event) => { },
+ onMouseOverMarker: (_marker, _markerObject, _event) => { },
};
export const defaultGlobeBackgroundTexture =
diff --git a/lib/globe.js b/lib/globe.js
index 7b1f127..15ee03d 100644
--- a/lib/globe.js
+++ b/lib/globe.js
@@ -177,6 +177,17 @@ export default class Globe {
this.updateFocus(marker.coordinates);
this.callbacks.onClickMarker(marker, markerObject, event);
},
+ onTouchMarker: (marker, markerObject, event) => {
+ this.updateFocus(marker.coordinates);
+ if (this.options.enableMarkerTooltip) {
+ this.tooltip.show(
+ event.clientX,
+ event.clientY,
+ this.options.markerTooltipRenderer(markerObject.marker),
+ );
+ }
+ this.callbacks.onTouchMarker(marker, markerObject, event);
+ },
onMouseOutMarker: (marker, markerObject, event) => {
this.tooltip.hide();
this.callbacks.onMouseOutMarker(marker, markerObject, event);
diff --git a/lib/markers.js b/lib/markers.js
index 5d9445a..c2e96bf 100644
--- a/lib/markers.js
+++ b/lib/markers.js
@@ -172,6 +172,10 @@ function applyCallbacks(markerObject, callbacks) {
const event = interaction.data.originalEvent;
callbacks.onClickMarker(marker, markerObject, event);
});
+ markerObject.on('touch', interaction => {
+ const event = interaction.data.originalEvent;
+ callbacks.onTouchMarker(marker, markerObject, event);
+ });
markerObject.on('mousemove', interaction => {
const event = interaction.data.originalEvent;
callbacks.onMouseOverMarker(marker, markerObject, event);
diff --git a/readme.md b/readme.md
index 8bdc7bb..d4fccc1 100644
--- a/readme.md
+++ b/readme.md
@@ -121,11 +121,12 @@ function MyGlobe() {
options={options}
width="100%"
onClickMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)}
+ onTouchMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)}
onGetGlobe={setGlobe}
onMouseOutMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)}
onGlobeTextureLoaded={() => console.log('globe loaded')}
onMouseOverMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)}
- >
+ />
)
}
```
diff --git a/types/index.d.ts b/types/index.d.ts
index 77f225f..8a74794 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -16,6 +16,7 @@ export interface Animation {
export interface Callbacks {
onClickMarker: MarkerCallback;
+ onTouchMarker: MarkerCallback;
onDefocus: (previousFocus: Coordinates | null) => void;
onGlobeBackgroundTextureLoaded: () => void;
onGlobeCloudsTextureLoaded: () => void;
@@ -211,6 +212,8 @@ export interface Props {
width?: string | number;
/** Callback to handle click events of a marker. Captures the clicked marker, ThreeJS object and pointer event. */
onClickMarker?: MarkerCallback;
+ /** Callback to handle touch events of a marker. Captures the touched marker, ThreeJS object and pointer event. */
+ onTouchMarker?: MarkerCallback;
/** Callback to handle defocus events (i.e. clicking the globe after a focus has been applied). Captures the previously focused coordinates. */
onDefocus?: (previousFocus: Coordinates) => void;
/** Capture the initialized globe instance */