encom-globe icon indicating copy to clipboard operation
encom-globe copied to clipboard

How to modify some of the advanced points?

Open geekkid1 opened this issue 7 years ago • 7 comments

I know it's been a while since you committed here, but I hope someone else is looking here. I want to have a straightforward (relatively speaking) guide to editing the advanced points (yellow connected points, satellites). I just want to know what the variables do.

geekkid1 avatar Nov 22 '17 16:11 geekkid1

Yellow connected things are markers (the ones saying Vancouver/Tokyo here https://www.robscanlon.com/encom-globe/).

You add them using the globe.addMarker function (like globe.addMarker(-34.6037, -58.3816, 'Buenos Aires');). And connect a new marker with the previous one by passing true as a fourth argument: globe.addMarker(37.7749, -122.4194, 'San Francisco', true);

jjant avatar Nov 22 '17 16:11 jjant

Ok I know I’m bad at this, but do I put this in encom_globe.js or what?

geekkid1 avatar Nov 22 '17 17:11 geekkid1

I really should have a minimal example.. the demo page turned into something far more complicated than necessary for most uses. And now that I look at this a few years later, the API could be a lot better. But it works.

At a minimum you need to do the following:

  1. Include grid.js, which contains the geometry of the sphere: https://github.com/arscan/encom-globe/blob/master/index.html#L23
  2. include the encom globe library: https://github.com/arscan/encom-globe/blob/master/index.html#L26
  3. create a new globe instance, passing height, width, and {tiles: grid.tiles} at a minimum (grid.tiles is created by the grid.js javascript file): https://github.com/arscan/encom-globe/blob/master/index.html#L26
  4. attach the canvas generated by the globe to the dom (uses jquery here, but you can do it with plain javascript): https://github.com/arscan/encom-globe/blob/master/index.html#L59
  5. run the init function (not sure why that isn't in the constructor), which accepts a callback that you should point to your animate function: https://github.com/arscan/encom-globe/blob/master/index.html#L60
  6. have the animate function run globe.tick() https://github.com/arscan/encom-globe/blob/master/index.html#L83
  7. At some point in the future, you can add markers or pins to the globe using globe.addMarker and globe.addPin, which will be animated into existance.

Does that make sense? I believe how this is set up. See index.html for details.

The fact that I look back on this and am embarrassed by how complicated it is means I'm growing as a programmer, right? :)

arscan avatar Nov 22 '17 17:11 arscan

OK, that still doesn't explain which file I should put the addPin and addMarker calls.

geekkid1 avatar Nov 22 '17 17:11 geekkid1

You don't need to edit encom-globe.js. You put it wherever you have created your reference to the globe. See https://github.com/arscan/encom-globe/blob/master/index.html, which is an example.

arscan avatar Nov 22 '17 17:11 arscan

I'm interested in contributing to this project if you need a hand. I've been using this lib for a few days and also been modifying parts of the source to get it to do what I wanted (this is what I've got so far: https://puu.sh/yrrhi/bd74fe71e8.png).

So if you are interested in improving this project, I could help out in a few weeks.

jjant avatar Nov 22 '17 17:11 jjant

@jjant -- I'm happy to take any contributions, as long as are things other developers might find useful, and that they still allow me to to configure the globe to look like what is on https://www.robscanlon.com/encom-boardroom. Thanks!

arscan avatar Nov 22 '17 18:11 arscan