Code

Discussion on Miniature Earth | 3D Globe for JavaScript

hipedcom

hipedcom supports this item

Supported

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

78 comments found.

Hi, Team

I have implemented the GLobe in out project. But in myearth.addEventListener( ‘click’, function(event) {} function…in the mobile case, id is coming empty every time. But in desktop it’s working fine.

Is this known issue ? can you please help us with this ?

Hi, there should be no difference between desktop and mobile behavior. The news demo ( https://miniature.earth/demo/world-news.htm ) uses the id to determine the clicked country and works on desktop and mobile devices alike. Please recheck your code. Thank you

lupinvv

lupinvv Purchased

can i do this with my wordpress site? https://www.covidvisualizer.com/

Yes! This website uses Miniature Earth! :)

Hello, is it possible to make a custom map using a Mercator-sized image?

Hi! You can use a custom map in equirectangular projection. https://en.wikipedia.org/wiki/Equirectangular_projection

how can I use a json data to load news to each country? for

Hello! Take the news demo as a basis. When the click event is triggered, you can load your data with Ajax and display it on the page. Thank you

bentevb

bentevb Purchased

Hi!

I am playing with Miniature Earth. Works great, good api. One question though: is it possible to prevent the occlusion of a marker/sprite when dragging / rotating the earth? So that you can never rotate it out of sight?

best regards, Bente

In the current version only overlays (with occlude: false) can always stay in front of the earth. In the next release sprites will get this option too. Thank you!

Can I upload my own SVG maps. I need a map world map that has the City and States. Also can I add HTML code or text to each marker once they click on it?

Yes, you can use custom SVG maps with equirectangular projection. https://en.wikipedia.org/wiki/Equirectangular_projection

Yes, you can add text or HTML elements to the earth and show/hide them on click.

Hi, can the lines be clickable?

No, lines are not clickable. As a workaround, you could add multiple transparent clickable markers or sprites along the line.

Could I add a polygon to earth by giving a list of [ lat, lng ] ?

You can add 3D objects (markers, lines), 2D images/sprites and HTML elements (overlays) at lat/lng positions. If you want to display points/dots I recommend you to use sprites.

@hipedcom, thank you so much for your reply. i took your advice to draw a polygon by adding multiple lines. ( => this.addLine( {locations : [...],width: 0.3,} ); ). Is it possible to fill this polygon with color?

Hi, please purchase Miniature Earth to get my support. There is way to display filled polygonal areas. Thank you

Is documentation included in the purchase?

Yes a documentation and many code examples are included!

Pp816

Pp816 Purchased

Hi @hipedcom, kghs03 is in my team, and I have made the purchase a few days ago. Thank you very for your support!

“thank you so much for your reply. i took your advice to draw a polygon by adding multiple lines. ( => this.addLine( {locations : [...],width: 0.3,} ); ). Is it possible to fill this polygon with color?”

Hi, Iv’e just purchased the Miniature Earth plugin. I downloaded the zip file and uploaded in the “Add Plugin” section. I am getting the following error log:

“Unpacking the package…

Installing the plugin…

The package could not be installed. No valid plugins were found.

Plugin installation failed.”

Any idea why the installation is failing?

Hi, the zip is not intended to be used as wordpress plugin. It contains the documentation and all examples. Please extract the zip and upload the directory integrations/wordpress-miniature-earth only.

hi, https://www.covidvisualizer.com/ , I want to do something like this, if you help me I want to buy

Hi, this website uses Miniature Earth, so you can do the same. I give hints and support but can’t do the development for you. You need HTML and JavaScript skills.

ACPass

ACPass Purchased

Great work.

The map is missing the entire Caribbean. Can you please add the missing countries and share the new code?

Thank you.

Very small countries and islands are not included 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. Wikipedia has many maps free to use and modify. https://en.wikipedia.org/wiki/Equirectangular_projection
Dear Developer, I have seen your 3d map. Prior to buying, I want to be sure that I can insert popup with some data to several countries, like this: https://www.covidvisualizer.com/

Second, have you a demo on wp? Best Regards, Luca

There are no admin settings, the configuration and setup has to be done with JavaScript. The Wordpress plugin only simplifies embedding Miniature Earth into a Wordpress website.

And is it possible that you provide to me a simple customization? I need to show 2 pics, 2 names and title on some countries. I will pay for this customization. If you wish, give to me your email and I will explain

Hi, I’m sorry I don’t provide customization services, please hire a web developer for your project. The popups/overlays are made of HTML and can display anything you want (any number of pics and text infos).

I would like to purchase this product. I want to know if this product has below options.

1.Use custom marker 2.create tooltip with links on hover over markers 3.Customizable globe color. 4.Auto rorate 5.Background changes

Yes to all! :) 1. You can have own 3D markers or 2D graphics. 2. You can pin HTML elements with links to the earth and show them as tooltips onmouseover. 3. You can define colors for the land, sea and borders or colorize individual countries. 4. You get serveral options for auto rotation. 5. The canvas around the earth is transparent, you can place any background behind the earth you want.

Great! Can we try it with API before purchasing?

I’m sorry there is no trail version.

Hi,

I have recently purchased miniature earth interactive 3d globe. My purchase order is 960bf0d8-68c0-4a62-ad46-894c73aa7ae0

I am looking particularly for this globe to integrate into my website.

https://preview.codecanyon.net/item/miniature-earth-interactive-3d-globe-for-javascript/full_screen_preview/23390670?_ga=2.157844474.1189060478.1589022068-496204137.1581311638

However, when I try the demos from your provided files, its giving the following error.

This demo doesn’t work with the file protocol due to browser security restrictions.

I am not sure what restrictions they are talking about. Also, I have seen it on other computers as well and getting the same error message. Please let me know how to fix this.

One thing more, I can’t find the required globe from demo files. I have provided you the link upper in this message.

Please let me know how to fix.

Thanks

Hi, some demos use features that can not run locally on a computer, they must be uploaded to a webserver and viewed with the HTTPS protocol. This affects the reading of image data and XMLHttpRequests. Thank you!

Hi, Thanks for the advice. It worked like magic. I have another question, can I resize the globe in my website.

The container element has a width of 100%, so it fits into the parent element. You can use the zoom property to scale the earth in container element.

Hi, I am working on an app based on the globe and I have the nasa-by-day and the nasa-by-night overlay. I want to add the borders above the overlay and I can only get the borders drawn when I dont use these images as overlay. Is there any way to add the borders above the nasa-by-day and nasa-by-night overlay? Thank you.

Hi, you can take the src/map.svg and edit it in a vector app (like Illustrator) or text editor (if you are familiar with SVGs). Remove the SEA, set all paths to the disired stroke and remove their filling, so you get an image of the borders only. if you don’t need to switch the border display on and off, the easiest way would be to add the border-image to nasa textures images with photoshop. But you can also the draw the border-image on top of the nasa texture with Canvas2D functions. Thank you

Loque_k

Loque_k Purchased

Hi there,

I am really enjoying using the globe and have some performance questions to ask (maybe some marker ones in the future), I hope this is ok:

I am working on a concept; https://musing-babbage-33ce5e.netlify.app/ , as you can see it animates lots of little circles (spheres) – this is fine until the globe is rotated and they are occluded, then the performance seems to drop significantly, is there anything you know of that could be done to prevent this performance drop? The spheres are a custom mesh I have created from an obj file, using the obj to string creator in the docs. I can share code and mesh file.

I’m guessing it might be possible to either simplify the circle shape/mesh being animated? Or disable/pause the animation/hide the object when it is occluded and then starting it again when it is visible (maybe 1 circle always stays hidden and moving to detect for occlusion?)

Many thanks!

Loque_k

Loque_k Purchased

That’s awesome, thank you – I adjusted the source a little as I didn’t need tracking on the sprites, code is super clean; looking forward to seeing the fix too, I noticed it had something to do with raycasting… which as a noobie to 3d stuff looks super cool :`D

Cheers!

Loque_k

Loque_k Purchased

I’ve started to add a lot more markers in addition to the animated dots and it would be really neat to have the performance fix, when might you do an updated release?

Cheers!

I’m planning to release it next week. Thank you

Hello, I am trying to get this into a react app. Do you have a react component for this library? I am not having much luck getting it to import to components.

Thanks, Brandon Burns

You can take the basic scene setup and sphere creation from src/Miniature.Earth.js, lines 165 to 262, as a starting point and use the holographic texture for your project.

Thanks, this will likely be all I need

You find the unminified and commented code in the “src” directory (file: Miniature.Earth.js, lines 165 to 262)

Hi, I wanted to know if there are any shortcut features to highlight an entire country by itself.

Oh i got the answer. Thank you.

For others who are looking for it: It is possible with the mapStyles property.

by
by
by
by
by
by