The problem with your overlay MIGHT be able to be solved by using 2 or more absolutely positioned divisions as a sort of frame around where the canvas action is taking place. No one of these need be directly over the canvas, each could contain as a background image or as a contained image a part of the framing decoration/image.
As to the coding, in the demo.js, before anything was done, for the locations only example we see:
Code:
examples['locations'] = function() {
/* defining locations to display.
Each position must have a key, an alpha and delta position (or x and y if you want to display a static location).
Any additional key can be reached via callbacks functions.
*/
var locations = {
obj1: {
alpha: Math.PI / 4,
delta: 0,
name: 'location 1'
},
obj2: {
alpha: 1 * Math.PI / 4,
delta: -2 * Math.PI / 4,
name: 'location 2'
},
obj3: {
alpha: 2 * Math.PI / 4,
delta: 0,
name: 'location 3'
},
obj4: {
alpha: 3 * Math.PI / 4,
delta: 3 * Math.PI / 4,
name: 'location 4'
},
obj5: {
alpha: 2.2 * Math.PI / 4,
delta: -1.1 * Math.PI / 4,
name: 'location 5'
}
};
$('#sphere').earth3d({
locationsElement: $('#locations'),
dragElement: $('#locations'), // where do we catch the mouse drag
locations: locations
});
};
The highlighted is what is known as a javascript object. It's a construct like a string or an array that can be used to hold data in a particular format for later retrieval. Each individual location (in the above, I've made the second one red) is itself also an object. Each of these locations currently has defined an alpha and a delta, these are their coordinates on the sphere, like longitude and latitude, and are required to tell the main code where to put each one. They each also have a name, like 'location 3'. That's arbitrary, and is used by the other code just to alert the name, perhaps something else, but in any case, it could be 'Bob' or 'xlax', anything you like, but probably should be unique to that set of alpha and delta coordinates. Now, each time one of these is clicked on, it sets off the click handler which was an alert, but which we can change to be any legal javascript command or set of such commands. We had already edited that to change to a page instead of alert. The click handler has available to it the information in the object for that location and can use any of those values for anything it is going to do. There are already 5 locations in the object, we can give them each pages and/or change their names. Now location 1 looks like it's actually in Texas, maybe Houston, 2 is in North Africa, maybe Oran in Algeria, so we could do:
Code:
var locations = {
obj1: {
alpha: Math.PI / 4,
delta: 0,
page: 'houston.htm',
name: 'location 1'
},
obj2: {
alpha: 1 * Math.PI / 4,
delta: -2 * Math.PI / 4,
page: 'oran.htm',
name: 'location 2'
},
obj3: {
alpha: 2 * Math.PI / 4,
delta: 0,
name: 'location 3'
},
obj4: {
alpha: 3 * Math.PI / 4,
delta: 3 * Math.PI / 4,
name: 'location 4'
},
obj5: {
alpha: 2.2 * Math.PI / 4,
delta: -1.1 * Math.PI / 4,
name: 'location 5'
}
};
This should be done with each of the other locations, or else they should be removed from the object, or altered to be geographically somewhere else (by changing their alpha and delta), and given a page that corresponds to that locale. Once you have all five defined (did my best, just quickly from mind or a glance at a map):
Code:
var locations = {
obj1: {
alpha: Math.PI / 4,
delta: 0,
page: 'houston.htm',
name: 'location 1'
},
obj2: {
alpha: 1 * Math.PI / 4,
delta: -2 * Math.PI / 4,
page: 'oran.htm',
name: 'location 2'
},
obj3: {
alpha: 2 * Math.PI / 4,
delta: 0,
page: 'santacruz.htm',
name: 'location 3'
},
obj4: {
alpha: 3 * Math.PI / 4,
delta: 3 * Math.PI / 4,
page: 'melborne.htm',
name: 'location 4'
},
obj5: {
alpha: 2.2 * Math.PI / 4,
delta: -1.1 * Math.PI / 4,
page: 'natal.htm',
name: 'location 5'
}
};
If you want more, you will have to add them using the same format:
Code:
var locations = {
obj1: {
alpha: Math.PI / 4,
delta: 0,
page: 'houston.htm',
name: 'location 1'
},
obj2: {
alpha: 1 * Math.PI / 4,
delta: -2 * Math.PI / 4,
page: 'oran.htm',
name: 'location 2'
},
obj3: {
alpha: 2 * Math.PI / 4,
delta: 0,
page: 'santacruz.htm',
name: 'location 3'
},
obj4: {
alpha: 3 * Math.PI / 4,
delta: 3 * Math.PI / 4,
page: 'melborne.htm',
name: 'location 4'
},
obj5: {
alpha: 2.2 * Math.PI / 4,
delta: -1.1 * Math.PI / 4,
page: 'natal.htm',
name: 'location 5'
},
obj6: {
alpha: 1 * Math.PI / 4,
delta: -1.1 * Math.PI / 4,
page: 'midatlantic.htm',
name: 'location 6'
}
};
That ended up in the middle of the Atlantic, some trial and error may be required to learn the coordinate system, but I think you get the idea.
make a link on element click
Reply With Quote
Bookmarks