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.

81 comments found.

Hi nice work, is it possible to implement it in a WordPress site? thanks

Hi sidale, thank you! Yes, an integration example for Wordpress is included. However, JavaScript skills are required to customize the behavior and styles to your needs.

Hi, Is it possible to see the example included? thanks.

Hi, the demos from https://miniature.earth/ are inlcuded. And this demo: https://miniature.earth/demo/environment.htm

The examples from the documentation show how to use specific features and best practices. Here you can see a screenshot of the documentation index: https://miniature.earth/support/me-1.3-docs-index.png

Hi there, I tried to put your code in this way but I did something wrong. When scrolling the world is not moving counterclockwise to reach the China city of Hangzhou. Secondly if I change this line: var lng = getScrollProgress() * -320 - 4; into this one: var lng = getScrollProgress() * +320 - 4;

The globe is moving correctly but after reaching Chine it will not come back to west as expected:

function getScrollProgress() { if ( document.body.scrollTop ) { return document.body.scrollTop / ( document.body.scrollHeight - window.innerHeight ); } else if (document.documentElement.scrollTop) { return document.documentElement.scrollTop / ( document.documentElement.scrollHeight - window.innerHeight ); } else { return 1; } } function syncScroll() { var lng = getScrollProgress() * +320 - 4; myearth.location = { lat: 12, lng: lng }; var places = [ ven, han, rom ]; var newActiveMarker = false; for ( var i in places ) { if ( isNear( lng, places[i] ) ) { newActiveMarker = places[i]; break; } } if ( newActiveMarker ) { if (newActiveMarker != activeMarker) { if ( activeMarker ) { activeMarker.deactivate(); } newActiveMarker.activate(); } } else if ( activeMarker ) { activeMarker.deactivate(); } activeMarker = newActiveMarker; } function isNear( lng, marker ) { if ( ! marker ) return false; if ( Math.abs( lng - marker.location.lng ) > 180 ) { lng = ( lng < 0 ) ? lng + 360 : lng - 360; } return ( lng > marker.location.lng - nearDistance && lng < marker.location.lng + nearDistance ); } function showTip() { this.tip.visible = true; } function hideTip() { this.tip.visible = false; } function stopAllAnimations( marker ) { for ( var i = 0; i < marker.animations; i++ ) { marker.animations[i].stop(); } marker.animations = []; } //Turn back to Venice function lerp (start, end, amt) { return (1-amt)*start+amt*end; } if ( getScrollProgress() < 0.5 ) { // way there earth_longitude = lerp( ven.location.lng, han.location.lng, getScrollProgress() * 2 ); } else { // way back earth_longitude = lerp( han.location.lng, rom.location.lng, (getScrollProgress()-0.5) * 2 ); }

Hi, please send your files to support@miniature.earth – that’s too much to anwser with codecanyon comments.

ok you’re right. Just sent an email. Sorry…

Hello, I’m intereseted in your miniature earth, however wish it was just refined a bit more. Do you plan to update soon, or create a new one? Or perhaps I could contract a private one.

thanks

Hello!

I am planning several feature updates, improvements and new demos that will be released in the coming months.

Miniture Earth is very flexible, so you can customize any aspect you don’t like.

I’m sorry, at the moment I don’t offer customization and integration services. Please hire a web developer with JavaScript skills.

Need IE11 support (I know its 2019…) Codecanyon says its compatible, but the demos do not work. So does it work under our old enemy?

Hi Jörg! The demos are not prepared for IE11, but IE11 is basically supported. To support IE11 you need to provide a map texture (instead of using the integrated SVG map). In the documentation you will find an example of how you can support IE11 and a fallback texture. 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. Thank you

thanks for the fast reply Ulf. Will take a look.

I have problems getting the plugin to work Can you tell me how to install it correctly?

Hi, do you want to install it as Wordpress plugin? Please see the instructions in integration-examples/wordpress-miniature-earth/_README.TXT

For an integration in a website see docs/examples/earth-minimal-example.htm

Hi I am using the Markers and star mesh Miniature Earth Plugin. I am a developer and am familar with customizing JS. I was wondering how I can change/replace the stars into another Icon.

Hi. Please take a look at the code oft the docs/examples/marker-default-meshes.htm or marker-custom-meshes.htm examples. The second example shows you how to use 3D meshes in .OBJ format. Thank you

So instead of using the WordPress Plugin is it possible to use two of the maps on a wordpress site by displaying the code in the templates? I currently have 2 of the globes on two separate templates. It seems when I enqueue the script and styles that they seem like one seems to overwrite the other. Any options or trouble shooting suggestions? I attempted to create a function that will only load the scripts and styles for one specific template, but didn’t receive any luck.

Yes, you can also embed Miniature Earth directly in the template code! You don’t have to enqueue scripts/styles in the head. Simply insert your code in the template where you want the earth to be. You need: The code snippet to load miniature.earth.js asynchronously, your configuration code and styles and the -tag where the earth is placed. Take the code from this example: docs/examples/earth-asynchronous.htm and modify it to your needs.

Hi, I just bought the library. Amazing work. Thanks you. How can i use Miniature Earth with Vue 2.0? A small snippet is more than sufficient to move forward. Thank you. AJ

Sir, what’s the most effective way to import the library using npm?

Miniature Earth is not prepared for package managers like npm, but I consider it for the future. Please include it like in the example example “Asynchronous Integration”.

Okay, I’ll complete the integration and email the snippet and maybe a vue component. Thanks for the swift support. Amazing work

hello, I am getting this on both safari and chrome : This demo does not work with the file protocol due to browser security restrictions.

never mind, figured It out

Dear Sir/Madam,

Does Miniature Earth plugin support zoomin-zoomout features ?

Regards

Hi, zooming is supported as in the demos.

Zoom by mousewheel: https://miniature.earth/demo/habitats.htm Zoom by click: https://miniature.earth/demo/european-union.htm

Please note: The map does not get more detailed when zooming in, it is not Google Earth ;-)

Thank you

dec71

dec71 Purchased

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?

dec71

dec71 Purchased

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

dec71

dec71 Purchased

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.

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

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

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, 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.

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.

Tango33

Tango33 Purchased

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

jploch

jploch Purchased

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

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

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