Get Elements Hive

3D Globe

A lightweight and easy-to-use WebGL-based 3D Globe element.

Content Tab

Locations:

A repeater field with a list of GPS Coordinates of locations for which you want to add a marker on the globe.

  • Label: A label for the position. The label can also be used with the Interactions extension to animate the globe to a specific location.
  • Latitude: The latitude portion of the GPS Coordinates for the position.
  • Longitude: The longitude portion of the GPS Coordinates for the position.
  • Marker Size: The size of the marker

 

Design Tab

Container:

  • Width: The container width
  • Height: The container height

 

Globe:

  • Base Color: The base color of the globe
  • Darkness Level: Control the color mixing level between light and dark mode based on the chosen settings.
  • Fog: Create a fog layer starting from the edge of the globe covering the map.
  • Glow Color: The color of the glow around the edge of the globe.
  • Opacity: The transparency level of the globe.

 

Map:

  • Markers Color: The color of the markers.
  • Detail Level: The level of detail on the map. The higher the value, the more dots will be used to represent the map.
  • Brightness: The brightness level of the map

 

Transform:

  • Scale: The scale level of the globe within the container.
  • Position: The position of the globe within the container.
  • Rotation: The rotation of the globe.

 

Animations:

  • Auto Rotate: Enable auto rotation of the globe.
  • Rotation Speed Factor: The speed of the rotation.
  • Enable Draggable: Rotate the globe using a drag motion.
  • Easing Style: The easing to apply during the drag interaction.

 

Disable on Touch Devices:

  • Enabled: Disables the element on touch capable devices.