Miniature Earth | 3D Globe for JavaScript

Introduction to Miniature Earth | 3D Globe for JavaScript

The Miniature Earth | 3D Globe is a stunning visual representation of our planet, designed to showcase the world's geographical features in a unique and captivating way. This 3D globe is built using JavaScript and can be easily integrated into web pages, providing an engaging and educational experience for users. In this tutorial, we'll guide you through the process of using the Miniature Earth | 3D Globe for JavaScript, covering its features, configuration, and integration with your own projects.

Prerequisites

Before we dive into the tutorial, make sure you have the following:

1. Basic knowledge of HTML, CSS, and JavaScript
2. A code editor or IDE of your choice
3. A web browser (tested on Chrome, Firefox, and Safari)

Setting up the Miniature Earth | 3D Globe

To use the Miniature Earth | 3D Globe, you'll need to include the JavaScript file in your HTML file and configure the globe to suit your needs. Here's a step-by-step guide:

Step 1: Include the JavaScript file

Add the following line of code to the head section of your HTML file:

<script src="https://cdn.jsdelivr.net/npm/miniature-earth@1.2.0/dist/miniature-earth.min.js"></script>

This will load the Miniature Earth | 3D Globe JavaScript file from a content delivery network (CDN).

Step 2: Create a container element

Add a div element to your HTML file where you want the globe to appear. This will serve as the container for the globe:

<div id="globe-container" style="width: 400px; height: 400px;"></div>

In this example, the container has a width and height of 400 pixels. You can adjust these values to fit your design.

Step 3: Initialize the globe

Use the following JavaScript code to initialize the globe:

const globe = new MiniatureEarth.Globe({
  container: document.getElementById('globe-container'),
  width: 400,
  height: 400,
  radius: 100,
  // Optional: add additional configuration options here
});

Here, we're creating a new instance of the Miniature Earth | 3D Globe, specifying the container element, width, height, and radius. You can customize the globe's appearance by adding additional configuration options, such as changing the color scheme or adding animations.

Step 4: Add event listeners (optional)

If you want to respond to user interactions, such as clicks or hover events, add event listeners to the globe:

globe.addEventListener('click', (event) => {
  console.log(`Clicked on ${event.target.lat}° N, ${event.target.lon}° E`);
});

globe.addEventListener('mouseover', (event) => {
  console.log(`Hovering over ${event.target.lat}° N, ${event.target.lon}° E`);
});

In this example, we're adding event listeners for click and mouseover events. When a user clicks on the globe, we log the latitude and longitude coordinates to the console. Similarly, when a user hovers over the globe, we log the coordinates.

Step 5: Display the globe

Finally, add the globe to the page by calling the globe.render() method:

globe.render();

This will render the Miniature Earth | 3D Globe in the specified container element.

Configuring the Globe

The Miniature Earth | 3D Globe offers several configuration options to customize its appearance and behavior. Some of the available options include:

• colorScheme: Change the color scheme of the globe (e.g., dark, light, or custom)
• atmosphere: Add an atmosphere effect to the globe (e.g., true or false)
• animations: Enable or disable animations on the globe (e.g., true or false)
• events: Enable or disable event listeners on the globe (e.g., true or false)

You can set these options when initializing the globe or by using the globe.configure() method:

globe.configure({
  colorScheme: 'dark',
  atmosphere: true,
  animations: true,
  events: true,
});

Conclusion

In this tutorial, we've covered the basics of using the Miniature Earth | 3D Globe for JavaScript. By following these steps, you should be able to integrate the globe into your own projects and customize its appearance to suit your needs. Experiment with the configuration options and event listeners to create an engaging and educational experience for your users. Happy coding!