Markers

In the Focus section, we explored ways to focus on a coordinate specified explicitly via the focus props. In most scenarios, we would like to render various markers on the globe that support focusing events.

react-globe provides an extremely simple way to do this by passing an array of marker data using the markers props. Based on the id, coordinates, color and value fields of the marker data, react-globe will render these values accordingly on the globe. Markers support focusing/defocusing behaviors, and provide a rich ways to interact with the globe.

We will be using the following markers dataset for the examples:

xxxxxxxxxx
 
[
  {
    "id": "marker1",
    "city": "Singapore",
    "color": "red",
    "coordinates": [
      1.3521,
      103.8198
    ],
    "value": 50
  },
  {
    "id": "marker2",
    "city": "New York",
    "color": "blue",
    "coordinates": [
      40.73061,
      -73.935242
    ],
    "value": 25
  },
  {
    "id": "marker3",
    "city": "San Francisco",
    "color": "orange",
    "coordinates": [
      37.773972,
      -122.431297
    ],
    "value": 35
  },
  {
    "id": "marker4",
    "city": "Beijing",
    "color": "gold",
    "coordinates": [
      39.9042,
      116.4074
    ],
    "value": 135
  },
  {
    "id": "marker5",
    "city": "London",
    "color": "green",
    "coordinates": [
      51.5074,
      0.1278
    ],
    "value": 80
  },
  {
    "id": "marker6",
    "city": "Los Angeles",
    "color": "gold",
    "coordinates": [
      29.7604,
      -95.3698
    ],
    "value": 54
  }

Point/Bar Markers

react-globe supports rendering point and bar markers natively. This can be controlled by setting the markerType option. You can import some useful defaults for point and bar markers with:

xxxxxxxxxx
 
import { defaultBarMarkerOptions, defaultDotMarkerOptions } from 'react-globe';

Dot Markers

xxxxxxxxxx
 
<ReactGlobe
  markers={markers}
  options={{
    enableMarkerGlow: true,
    markerRadiusScaleRange: [0.005, 0.02],
    markerType: 'dot',
  }}
/>

Bar Markers

xxxxxxxxxx
 
<ReactGlobe
  markers={markers}
  options={{
    enableMarkerGlow: false,
    markerRadiusScaleRange: [0.2, 0.5],
    markerType: 'bar',
  }}
/>

Marker Options and Tooltips

You can configure various marker features using the options prop (e.g. setting the size range of the marker using the markerRadiusScaleRange option).

By default, tooltips are enabled for markers and the default value of the tooltip is the marker's coordinates. The markerTooltipRenderer option allows you to return custom tooltip strings based on the marker data. Use the Playground to play around with some of these options.

xxxxxxxxxx
 
<ReactGlobe
  markers={markers}
  options={{
    enableMarkerTooltip: true,
    markerEnterAnimationDuration: 3000,
    markerEnterEasingFunction: ['Bounce', 'InOut'],
    markerExitAnimationDuration: 3000,
    markerExitEasingFunction: ['Cubic', 'Out'],
    markerTooltipRenderer: marker =>
      `${marker.city} (Sales: ${marker.value}.0M)`,
    markerRadiusScaleRange: [0.01, 0.05],
  }}
/>

Custom Renderer

If the markerRenderer option is provided, react-globe will use this callback to render the markers. The return type of markerRenderer has to be an instance of THREE.Object3D. react-globe will still handle placing the markers and supporting focus/defocus and pointer events. This is an extremely powerful data-driven way to render custom objects on the globe. Go crazy!