Discussion on Miniature Earth | 3D Globe for JavaScript


hipedcom supports this item


This author's response time can be up to 2 business days.

82 comments found.


Loque_k Purchased

It would be really awesome to support MTL files. Is this possible to do without too much trouble? I am noticing it is quite tricky to pin down the right loaders for three and implement them. I appreciate this is probably out of scope for support, but if you have any insight or know of anything that might help me implement mtl & obj files with this I’d really appreciate it.

I am currently stuck finding and adding the right loaders to the bundle so I can then load the mtl files into/with the objects. I think if I had this I should be able to add mtl files in a similar way addMesh works and then reference them… could be really cool… altho, this is my first go with 3d objects and three so I might be missing some common pitfalls.

Many thanks!

It is possible to load a 3D file with THREE.js methods and add it as child element of a dummy marker to place it on the earth and move it arround.

Is there a hover feature for each country or will I have to implement that feature?

Ok. I just thought it looks like a good challenge. Is there an already done example that I can look at?

There is no example for this particular case. You can easily write a test for this by using code from misc/earth-adv-getlocation.htm and country-selector.htm Thank you

Ok. Thank you.

Can we calculate Sun location from current data and time? Is there a pre-defined method to get sunAngle by passing date and time?

I’m sorry, there are no methods to calculate the real sunlight position.

I bought this plugin and when I’m trying to embedding the plugin to my angular 9 project its not working, I’m getting a lot of errors. for example: Cannot read property ‘removed’ of undefined at Earth.updateAnimations.

Some try to embed it angular 9?

The library is not prepared for particular frameworks. Please load the library with native JavaScript as in the examples.

can we change the background from this


if so i would be interested on buying this

Yes, of course. All demos and examples can be modified to your needs. Thank you


Chipped Purchased

Hi, trying to add this library to a Vue cli app, struggling to get it working though, can you help?

Miniature Earth is not yet prepared for frameworkds or package managers. Please load the library the classical way, using the script tag and use the code from the examples. Thank you

Hi there, thank you for this amazing 3D earth!

I’m on a project and i wonder if it is possible to incorporate a map like openStreetMap with vector tiles or raster tiles, not only svg and png ?

Thanks again.

Hi! If you can generate a world map image (in equirectangular projection) with openStreetMap you can use it with the earth. Thank you

Hi, i want to buy your app, but i need to know, how i can customize your app to my project.

i have json file with markers and other information, i want to click on a marker on the map and open popup with information regarding to the poing.

I can send you screenshot of my design, if it would be more helpfull for you.

Hi. If you are familiar with JavaScript it is easy to setup the earth and customize it for your needs. You get an API documentation and many examples. You can send me a screenshot ( ) if you need to verify that a certain feature is supported. Thank you!


I will anwser to your email. Thank you

Hello! This is a great plugin. Would you kindly be able to send me some more working examples for WordPress (the js/css file) to help me get started? I don’t need anything complicated – just a realistic globe, clickable pins and a pop-up image per-pin. Thanks in advance!

I’ve tried this already but couldn’t get it to work, so I would really appreciate a jump-start here to integrate with WP. I’ve already installed the plugin – it’s just the editable files I need help with. Thank you

Hi, please write to so I can send you some files. Thank you

Brilliant, many thanks. I’ve just sent this.


Why are the carribbean countries not visible such as Antigua, Barbadaos etc?

thanks cheers Kiran

Very small countries and islands are not included in default SVG map as it would be difficult to see or click them. You can use a map image or a custom SVG map to display all countries.

Hi, nice product. I don’t know JavaScript, but thankfully you provided a WordPress plugin. Great.

I just don’t know how to set things up through the shortcode. If i see a setting in the api, how do I put that in the shortcode.

Also, can I render two kind of globe together? I would like the hologram over the space view.

Hi! The setup of Miniature Earth requires JavaScript skills. The WordPress plugin example offers only some basic features and must be modified to your needs. Open the file myearth.js and insert the earth properties you need (from API documentation) at line 10.

> “hologram over the space view” It is possible but it requires a good understanding of JavaScript.

ok.I might be ok, with simply editing myearth.js using the syntax from the api, Are you able to offer guidance about using the hologram over the space view? or is it too hard to show someone with little javascript knowledge?

I made an example for you and sent it by email. Good luck!

Can I ask for help again? I am even happy to pay.

I have purchased your globe and I just want the globe to look like a mix of two of your examples.

Can I pay to have that? I want to be configured to work in WordPress look exactly like this: with this over the top:

Hello, I have already sent you a mixed/combined example for your purposes by e-mail. Maybe it is in your spam folder.

I’m sorry, I can’t do the setup and configuration for you, please hire a web developer.


Nickid Purchased


I am using miniature earth and a smooth scrolling plugin (smooth-scrollbar by idiotWu) in my site and everything works fine in the desktop. However, in mobile and every device with a touch screen in general, there seems to be a conflict with the earth and the scrolling. Basically, when the earth is initialized, every touch event is being hijacked by the earth and scrolling does not work. I even tried tweaking with z-index and pointer-events CSS rules, but nothing happened.

Please note that the earth element does not take up the whole screen and this situation appears when I am trying to touch-scroll outside the earth area. Also, it happens even when earth dragging is disabled.

Thank you in advance.

Sincerely, Nick

Hi, the library doesn’t prevent any touch events outside the earth canvas, so I can’t tell why the scrolling plugin doesn’t work. You could try to initalize the earth before (or after) your scroll plugin or remove some event listeners after they are added. Good luck!

Hi, I would build your beautiful miniature earth in my web site made with wordpress. I want to know if there are instructions for beginners. Moreover I’d like to know if there is a code, which I could utilize, and where I can insert it.

thak you

Hi, you find a Wordpress plugin and instructions in integrations/wordpress-miniature-earth Good luck!

Hello, so it seems on a few android mobile devices in particular Moto e5 play and a few others, the earth doesn’t show color on the earth only displaying a black silhouette circle, which i also think I found an article related to the issue. Do you have an update coming soon that will fix this issue or know of a way around it? Thanks and happy trails :) I posted the link below of the article which I believe is the issue?


Hi, what page or demo are you viewing? I tested on many old Android devices (via BrowserStack) and they all work. Sadly the mentioned devices are not available for testing. A solution would be to detect the affected devices and show a fallback image or other content to them. Thank you

Hi, I am trying to figure out your php-database locations example. Unfortunately, I am not very knowledgeable with php. I work a lot with python and sqlite. The first step in the readme file has me stuck and I was hoping I could get some more details. What do you mean by “into your database”? I don’t know what database you are referring to. Where can I find/how do I create the database that want me to import “marker-locations.sql” into?

Hello, this example is for PHP and MySQL, a popular combination available on most web servers. To get the data into the database, you need a database manager like phpMyAdmin. Of course, you can rewrite the example to use any scripting language or database. Good luck!

OK, I figured that out thank you. I have a database of nearly 200,000 rows with each row having geo coordinates. I would like to search through this database and display certain markers on the globe quickly based on user input. Do you recommend I use a csv and ajax to do this search quickly and efficiently or import everything into MySQL for the best performance? Or does it not matter?

With more than 1,000 rows I suggest to use a database.


Loque_k Purchased

I am having troubles getting the default SVG used out of the minified in a way that I can then edit it and import it – do you have this asset available so I can do this? It would be really appreciated as we have a requirement to adjust it ever so slightly.

Many thanks!

To see the map in a vector app you need to change the colors from black to something different. You can change the colors by opening the SVG in a text editor and edit the css styles at the beginn of the file.


Loque_k Purchased

Perfect, I was forgetting the styles I had applied in the project were defined in the options for the globe and I would need to define them in css instead.

Thanks for the help!


Loque_k Purchased

I noticed whilst doing this that it’s not possible to apply styles the globe instance via options, or with mapStyles and then redraw().

However I was able to edit Earth.prototype.loadTexture to do this when this.options.mapImage is true with

(Basically just copying and pasting the same functionality that is applied if it loads the default SVG)

Not sure if it’s useful but figured it might be good to share in-case I am missing something also <3


Question I want to be able to add animated markers to the the earth using the float comand.

I need just a bit of guidance on how to add code to the myearth.js and call it from the wordpress shortcode.

Hi, you can start a looping animation right after your marker is created. In myearth.js search for “addMarker”. After that line add: marker.animate( ‘property’, value, { loop: true } ); Take a look at the “animatable properties” example. Good luck!

How do I implement the demo examples. How do I take the code from the HTML examples and use them for the Wordpress version. I see the call outs in the html do I take that code and addd it to my earth.js file? Thanks

You can copy the JavaScript code to myearth.js and the CSS to myearth.css. If you load any files/images, I suggest to use absolute urls. Good luck!


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey