Code

Discussion on Miniature Earth | 3D Globe for JavaScript

Discussion on Miniature Earth | 3D Globe for JavaScript

Cart 898 sales

Hyper-Components supports this item

Supported

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

229 comments found.

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?”

Is documentation included in the purchase?

Yes a documentation and many code examples are included!

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

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.

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!

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!

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

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

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

Yes! This website uses Miniature Earth! :)

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

Hi Where is the documentation for this theme?

Hi! Miniature Earth is JavaScript code, not a theme. A developer can integrate it in any website or theme. Thank you

When I zoom into the earth the image quality is very low, even if a supply a large image as the texture – anything i can do to improve it?

Hi. Please define a higher quality level in your earth properties like ” quality : 5 “

Hi! Thank you for this awesome script.

I am a beginner with javascript but understand enough to get a similar result as the trip demo, but with dynamic content coming from a cms.

Iam able to set the markers and now trying to make the globe rotate to the right location when the user scrolls a list of corresponding articles.

I have a JSON array that looks like this

0: address: “mongolei” lat: “46.619263” lng: “103.095703”

1: address: “kasachstan” lat: “47.989922” lng: “67.324219”

etc.

I have seen you post with this lerp function with two markers, and try to addapt it to my needs (first a test with just two markers). However I don’t really understand how that works. And I get an Unexpected identifier error in my debug console. I can see a value when I print these to console locations0.lng and locations1.lng. So thats not the problem.

function lerp (start, end, amt) { return (1-amt)start+amtend; }

if (getScrollProgress() < 0.5) { // way there var lng = lerp(locations0.lng, locations1.lng, getScrollProgress() * 2); } else { // way back var lng = lerp(locations1.lng, locations0.lng, (getScrollProgress() – 0.5) * 2); }

Please note, the lat/lng values in your array are enclosed in quotes, so they are treated like strings. Remove the quotes or convert the values to numbers with Number( locations0.lat ) before using them with the lerp function.

I would do it like this: 1. Go through your list of articles and add their page y position to your address array. 2. Get the current scroll position. Look at your address array and find the previous and next address by comparing the position values. 3. Calculate a factor of the relative scroll position between the previous and next address. (0= at the previous address, 0.5=between the adresses, 1=at the next address) 4. Now you can: myearth.location = Earth.lerp( previous_address, next_address, factor );

If you need further assistance please email to support@miniature.earth

Hello, was curious if the hologram globe would have the ability to funciton like the white news globe demo—where as when you click a link like ” Storm warning from the caribbean” it shifts or when you click like ufo sightings over mongolia it shifts. Does the tealish blue/hologram earth have that ability to shift like that if that coding is dropped into place from the other earth? Thank you greatly!! Cheers

Hi, yes it is possible to combine or completly rewrite demos. The links call the earth’s goTo method to shift to a defined location. Thank you

Hi, Great product to sell! Very useful… The demos are great but I have seen none with a hamburger menu drop down and have done a little research and seems they break the coding or stop the initial JavaScript on page startup as I have contacted several developers already and they inform me it takes major modification? Not sure if this is correct or incorrect? Anyhow if you can address this or add a demo with a hamburger menu drop down that would be a great asset to your sales

Hi, the demos focus on the features of the library. Of course you can add Miniature Earth to any kind of website, it should not interfere with other page elements like menus!

Excellent news! It was probably something in the wordpress integration. You got a sale from me :) I do have one more question though- Will this globe work where you can add a bump map ? Like so the earth looks textured? I’ve seen those on other globes

you can use an image as world map. 3D bump or displacement mapping is no builtin/documented feature. It is possible to add these 3D maps through THREE.js, the library that renders Miniature Earth.

Hello, does this library supports Internet Explorer, at least v.11 ?

IE11 is basically supported but it requires some extra work. To support IE11 you need to provide a map image (instead of using the integrated SVG map). In the documentation you will find an example of how you can support IE11 and a fallback map image. Also note that IE11 does not allow you to determine which country was clicked, like in the news demo. Let me know if you need any help.

There is no evidence of Wordpress integrations even though they advertised as such. Would like full refund. Thanks.

Hi. You find a integration example for Wordpress in the directory examples/integrations/wordpress-miniature-earth

If you still want a refund you must request it through CodeCanyon/Envato. Thank you

Hello, a client of mine bought your library and it’s working good on almost every device, but we’re having troubles on iPhones/iPads with Safari, the globe doesn’t load and this error is triggered: “canvas area exceeds the maximum limit (width * height > 16777216)”

the canvas size is actually about 350×350 px on android devices, does this have to do with the size and position attributes of the canvas container ? in our case the canvas is inside a grid colum (col-lg-6) with relative position You can see a test environment here http://beta2.grimaldilex.com/it/grimaldi-alliance/

Could you please give me a hint on how to solve this ? thanks in advance Best regards, Marco

Hi! You are using a earth quality level of 5 (which draws very large world map texture on a hidden canvas). Please use a lower quality level or omit the quality property so it is auto set based on screen size. (It is on line 96 in your script)

I’m planing to reduce the quality on low end devices automatically in a future release. Thank you!

thanks, it worked. I used the default quality at first but it scaled poorly (grained pixels) when zooming in on a marker, now set to 4 it’s working

How do you use this? Im on a wordpress site and i just purchased this

Hi! Please take a look at examples/integrations/wordpress-miniature-earth/readme.txt

Thank you for this amazing plugin. Is it possible to tie a mouseover event to a SVG PATH, so that a tooltip can be displayed when hovering over a specific country?

Hi there, would it be possible to email me this code? Thank you.

Hi, this example is included in the current version 2.5. Please redownload the library from your account. Thank you

Wonderful – found the code in the updated version. This is one of the best plugins on Code Canyon by far. All the best with the sales. Thank you once again.

by
by
by
by
by
by

Tell us what you think!

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

Sure, take me to the survey