Generic placeholder image

Earth Maps

Put your own fully interactive 3D Earth map on your pages or apps. Our pure javascript software is a copy-and-paste into your service and lets you map your own points.

View details »

Generic placeholder image

View a Demo

The live demo below shows the API at work, and in this example, you can search for any business around the world by name.

More demos »

Generic placeholder image

Platform Agnostic

For the first time, an Earth API supports 99% of your users. This includes people using: iPads, Androids, iPhones, IE7+, Chrome, Firefox, Safari, or Opera.

View details »


Demos.

Try any one of these demos that highlight different features of the AtomJump Earth API.

Hello World!
Customized Logo and Skin - Bathymetric
Overlaid photos from Instagram
Loading a KML file
Loading a GeoJSON file
Twitter Search (Beta)
Javascript Developer's API start
Tall Proportion Window
Wide Proportion Window
Mobile Fullscreen

You are welcome to 'View Source' in your browser for any of these demos to learn how they work.

Generic placeholder image

Instant Maps. Get one now.

Create your own Earth map and share it on Facebook, Twitter or your own site.


This option produces a live 3D map for your chosen keyword from recently added Instagram photos. The resulting map can be viewed on mobiles, tablets or desktops.

You've got 10GB of free map data downloadable per month.



This lets you upload your spreadsheet of location points, and share them on desktop, tablet or mobiles.

Export as a comma-delimited .csv file from your spreadsheet package, e.g. Excel, Google Docs or Open Office. The file ideally has some or all of the following column headings:

Address, Title, Image, Description, URL, Icon. Sample

Tech Note: To speed up the process, and if you have the information available you can optionally include Latitude and Longitude columns, in decimal degrees.


Browse..


Select from your photos on Dropbox, and create an Earth map with them. Beta


Generic placeholder image

Getting Started.

So, you've seen the demo and want it on your page?

You can try an instant personal map if you don't want to get into any coding. Or get started with the API and try out a 'Hello World'. Copy and paste the following code into the Head section of your page:

<link rel="StyleSheet" href="http://earth.cloudcontrolled.com/css/earthspin-0.1.css">
<link rel="stylesheet" href="http://earth.cloudcontrolled.com/css/leaflet.css" />

<script>
var earthOptions = {
	"earthDiv": "earth3d",	//div that holds the earth search
	"earthSiteID" : 4,	//this will work for localhost. Live sites need an ID - contact atomjump.com
	"searchOff": true,	//this hides the search box
	"displayTitleText" : true, //this shows titles above marker
	"width": 700,	//Dimensions of window, best results 700x525pixels, but any size possible	
	"height": 525,
	"markerLat" : -30.0,			//Marker latitude
	"markerLon" : 140.0,			//Marker longitude
	"markerTitle" : "Hello World!",		//Title of marker
	"markerURL" : "http://atomjump.com",	//Link in popup
	"markerImage" : "http://earth.cloudcontrolled.com/images/logo_printable.png",	//Image in popup
	"markerText" : "It is working!",		//Body text for marker
	"markerIcon" : "http://earth.cloudcontrolled.com/images/mapicons/atomjump_map.png"	//Icon on map
	// Note for IE7/8 support you will need a server-side conditional include of 3 other headers
};
</script>
<script src="http://earth.cloudcontrolled.com/js/earthspin-0.1.js" type="text/javascript"></script>

And then create a holding div in your body section:

<div id="earth3d"></div>

You can see in this in action and view the source in this complete example.

Now you can modify any of the text, links or coordinates in the code above to match your needs.

Or you can load existing mapping files.

Generic placeholder image

Simple API Options.

If you can copy and paste HTML, you can use any of these options directly.

Include any of the following lines in the earthOptions array:


<script>
var earthOptions = {
"earthDiv": "earth3d",	//div that holds the earth search
"earthSiteID" : 4,	//this will work for localhost. Live sites need an ID - contact atomjump.com
"searchOff": true,	//this hides the search box
"prompt" : "Search",	//text appears in the main search box
"displayTitleText" : true, //this shows titles above marker
"width": 700,	//Dimensions of window, best results 700x525pixels, but any size possible	
"height": 525,
"markerLat" : -30.0,			//Marker latitude
"markerLon" : 140.0,			//Marker longitude
"markerTitle" : "Hello World!",		//Title of marker
"markerURL" : "http://atomjump.com",	//Link in popup
"markerImage" : "http://earth.cloudcontrolled.com/images/logo_printable.png",	//Image in popup
"markerText" : "It is working!",		//Body text for marker
"markerIcon" : "http://earth.cloudcontrolled.com/images/mapicons/atomjump_map.png",	//Icon on map
"searchAPI" : "sotonfreight/search.php?callback=?", //static or dynamic data file on your server
	//Resulting format for api endpoint should be GeoJSON, KML or a plain json array:
	// results[0]
	//   latitude
	//   longitude
	//   title
	//   text
	//   url
	//   image
	// results[1]
	//   latitude
	//       ..
"searchParam" : "search", //searchapi endpoint search term param
"jsonp" : true,	//search api uses jsonp for cross domain call
"showSuggestion" : true,
	//true: show each suggestion on map individually (1st result per suggestion)
	//false (default): show first suggestion's (multiple) results
"caching" : true,  //cache the user entered terms for next user to find
"logo" : "http://earth.cloudcontrolled.com/images/logo_printable.png", //appears bottom left
"skin" : "images/skins/undersea/",	//path to different earth skins
"myStart" : false			//start our own earth object, which ensures we have js access
};
</script>
Generic placeholder image

Loading your own map points.

You can load a geographic file directly in KML or GeoJSON format.

Or you can output the results from a script in these same formats. Note KMZ is not yet supported. AtomJump Earth supports groups of feature markers with a latitude/longitude, images, description, title, icon and link. Here's the code:

<script>
var earthOptions = {
	//... any other options go here ...
	"searchAPI" : "http://yourdomain/yourfile.geojson",	//path to your KML/GeoJSON generating script or KML/GeoJSON data file  
};
</script>

You can try these two demo files:

Loading a KML file
Loading a GeoJSON file

Alternatively, there is a direct JSON array format that can be used:

[
	{ 
	 	latitude: 30, 
	 	longitude: 40,
		title: "Hi",
		text: "Hi text",
		image: "http://earth.cloudcontrolled.com/images/logo_printable.png",
		url: "http://google.com",
		icon: "http://earth.cloudcontrolled.com/images/mapicons/atomjump_map.png" 
	},
	{ 
	 	latitude: 50,
	 	longitude: 30,
		title: "Hi again",
		text: "Hi text again",
		image: "http://earth.cloudcontrolled.com/images/logo_printable.png",
		url: "http://google.com",
		icon: "http://earth.cloudcontrolled.com/images/mapicons/test-icon.png" 
	}		//make sure last has no comma
]

You may need to return JSONP, if you are calling a different domain to your own. Ensure your searchAPI ends with 'callback=?'. Also use the option


<script>
var earthOptions = {
	//... any other options go here ...
	"jsonp" : true,	//allows cross domain call  
};
</script>

When reading a data file directly, we recommend displaying less than 200 markers to avoid a performance drop on the client. However, there is no limit to the number of markers stored on your server if you use the search approach. Remember, the point data is served from your servers, and can be generated dynamically. When generated dynamically, and with a search box enabled, you should also tell the API what the name of the free text search parameter is:


<script>
var earthOptions = {
	//... any other options go here ...
	"searchParam" : "search",	//search parameter 
};
</script>

When returning results from a search, we recommend about 10-20 results at a time. These results can optionally be cached on our server for fast retrieval on each keypress, without having to resort to a full geographic search on your server.


You can also have direct control at a Javascript array level, interacting with the rest of your page using the Javascript API.

Generic placeholder image

Customization.

You can change the logo in the bottom left-hand corner, or the map marker graphic with:

<script>
var earthOptions = {
	//... any other options go here ...
	"logo" : "http://yourdomain/yourfile.png",	//path to your logo image
	"markerIcon": "http://yourdomain/youricon.png",  //path to your map marker image 
};
</script>

Or for more advanced changes, customize the look and feel by downloading and modifying the css in

http://earth.cloudcontrolled.com/css/earthspin-0.1.css

For software customizations and different earth skins, please contact us. We're always happy to see how we can fit into your project.

Generic placeholder image

Javascript API calls.

If you're a Javascript developer, we provide a more advanced API for dynamic access to the Earth interface.

Include the following line in your header options array:

<script>
var earthOptions = {
	//... any other options go here ...
	"myStart" : true  //start your own earth object, which ensures you have js access
};
</script>

Then wait for earth readiness anywhere in your body and initialize the earth object:

<script>
//Wait for earth to be ready
earthReady(function() {

	//Initialise the earth map
	var earth = new earthStart("earth3d", earthOptions);
		//earth3d is the div container name

	//Show a single marker
	earth.showSingleMarker(10.4,70.2, //lat,lon decimal degs
	     "Hello", //title
	     "text", //body text
	     "http://earth.cloudcontrolled.com/images/logo_printable.png" , //image
	     "http://google.com"); //url of title in popup
	     
	//Or alternatively with an array  
	var results = [
		{ 
		 	lat: 30, 
		 	lon: 40,
			title: "Hi",
			text: "Hi text",
			image: "http://earth.cloudcontrolled.com/images/logo_printable.png",
			url: "http://google.com",
			icon: "http://earth.cloudcontrolled.com/images/mapicons/atomjump_map.png"
		},
		{ 
		 	lat: 50,
		 	lon: 30,
			title: "Hi again",
			text: "Hi text again",
			image: "http://earth.cloudcontrolled.com/images/logo_printable.png",
			url: "http://google.com",
			icon: "http://earth.cloudcontrolled.com/images/mapicons/test-icon.png"
		}		//make sure last has no comma
	];						
	earth.showMarkers(results, "immediate");

	//Do a spin to lat,lon
	earth.viewTo(70,-80);	//immediate spin
	earth.spinTo(30,100);	//slow spin

	//Uncomment to display current longitude of view
	//alert(earth.currentLon());

	//To load a file
	earth.loadFile("http://earth.cloudcontrolled.com/connect/geojson/StantecOfficLocations.geojson");


});		//end of earthReady
</script>

View source in this complete example.

Generic placeholder image

IE7/8.

That's right, AtomJump Earth works in these browsers.

Although you need to add three more js files in a conditional server-side include if you want to support them. Place a regular expression before the earth Javascript earthspin-0.1.js line. E.g. in PHP: use the following.

<?php 
// Optional inclusion - only include if you want to support ie8/ie7
//Note ie11 testing mode for ie7/8 does not include "msie". Only way to test this is in virtual machine 
if(preg_match("/(?i)msie [7-8]/", $_SERVER["HTTP_USER_AGENT"])) { ?>
<script src="http://earth.cloudcontrolled.com/js/excanvas.compiled.js"></script>	 
<script src="http://earth.cloudcontrolled.com/js/canvas.text.js"></script>
<script src="http://earth.cloudcontrolled.com/js/faces/optimer-normal-normal.js"></script>
<?php } ?>

This does a regular expression on the user agent, and if it detects IE7/8 it will include the three additional Javascript libraries in the header. For other platforms, you should be able to find an equivalent regular expression function.

Generic placeholder image

Pricing. It's free.

We follow a straightforward and fair model. For most sites the 3D maps are free.

We are hosting and serving the 3D maps, and while they will appear on your site, users will stream the visual map data from our servers. If your site is accessing more than 10GB of data per month, then we carry over the cost we have of hosting your maps for you at 25p per GB data downloaded.

We currently use mapbox.com as our 2D map supplier (shown after clicking on a point of interest in the 3D view), and their hosting prices are 50c per 1000 map views (when above 3000 map views in a month). If you would like to use a different set of 2D maps, we can accommodate this also. We make use of the Leaflet library so any tile set is possible.

Generic placeholder image

Going Live. Congratulations.

Are you happy with the maps on your local page?

To go live, you will need an API ID which is matched to your site domain. Please contact us with a message including your intended domain. We will aim to get back to you as soon as possible.

Generic placeholder image

Support & Questions.

Please contact us and we will endeavour to answer your questions.

Or alternatively, see our FAQ below.

Generic placeholder image

About Us.

We were the developers of the original online 3D mapping browser, 'Mobile Maps' in 1997.

We then developed the world's first scalable keyword local search engine, which is now available as an open source engine from LightRod.org.

Generic placeholder image

FAQ.

  • Is it possible to zoom in the 3D view?

    It will be soon. This feature is in development, so watch this space, and be the first to hear about it.

  • Can you have multiple layers overlaid on the surface of the Earth?

    You can have any number of layers of point data. Layers of surface data are not currently supported by the API, however. We can provide different skins, and switch between these. Get in touch if you want this feature.

  • Why haven't I heard of AtomJump before?

    Because as an Earth API, we're new. However, we did develop the original 3D Earth browser 'Mobile Maps' in 1997, which you may have tried all those years ago.

  • Why is it called AtomJump?

    Our 3D view will almost literally store every atom in the planet, once it is complete. We've developed a way of displaying these in a web browser that, while not quite splitting the atom, involves jumping through atoms!

  • Can I add my own 3D models/cities?

    This feature is in development, so watch this space, and be the first to hear about it.

Generic placeholder image

Standards Compliant.

AtomJump Earth is currently the only Earth API that is completely HTML5 standards compliant, and capable of running on 99% of user's browsers, including mobiles and tablets.

This includes: iPads, Androids, iPhones, IE7+, Chrome, Firefox, Safari, and Opera. It is written in plain Javascript, the web's language.

Other tools on the market use a mixture of the following:

  • WebGL, which is still crash-prone and works in only 35% of browsers [Source]. We cannot recommend this technology on a high traffic website.
  • Flash, which is not supported natively by iOS or Android devices. The Flash technology is proprietary, and the developers, Adobe, are not considering it as a viable platform on the Web moving forwards.
  • Plugins, such as Google Earth, which require a download, and then a 10 second start on your page. Most users won't download plugins.
Generic placeholder image