Достоинства Planetary.js несомненны:
- Awesome interactive globes for the web
- Fully customizable, including colors, rotation, and more
- Display animated "pings" at any location with custom colors and sizes
- Mouse drag + zoom support
- Extremely extensible via a plugin-based architecture
- 100% free and open source, licensed under the MIT license
Открыв страничку проекта - вы, несомненно, сумеете еще раз оценить этот красивый скрипт; при некотором желании вы реализуете на страничке своего сайта даже Seismic Activity Visualization, что очень эффектно:
Более сложный пример того, что вы можете сделать, используя Planetary.js. Глобус работает с использованием ряда пользовательских плагинов (это определяется в нижней части JavaScript), также демонстрирует некоторые неспецифичные для Planetary.js методы - использование Moment.js, D3 scales, DOM manipulation, а также загрузку внешних данных.
Весь дефолтный код приведен на сайте разработчика, к которому я вас и отсылаю... здесь же - для совсем новичков - рассмотрим реализацию именно того глобуса, который вы видите в начале этой страничке. Все, как всегда, совсем несложно:
Загружаем source code со странички проекта (вкладка Download) и распаковываем содержимое архива куда-либо в публичный каталог своего сайта. HTML, размещенный на страничке вашего сайта, может выглядеть примерно так:
<html>
<head>
<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
<script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
<script type='text/javascript' src='пропишите_путь_к/planetaryjs.min.js'></script>
</head>
<body>
<canvas id='rotatingGlobe' width='400' height='400'
style='width: 400px; height: 400px; cursor: move;'></canvas>
<script type='text/javascript' src='пропишите_путь_к/yourApp.js'></script>
</body>
</html>
Первые два js, как видите - внешние (если есть желание, можете по приведенным ссылкам скачать и разместить локально); третий - planetaryjs.min.js - вы найдете в скачанном вами архиве, в каталоге /dist . Еще один js - yourApp.js - вам предстоит создать самостоятельно, разместив в нем строчки кода, которые найдете, в свою очередь, на сайте проекта, на страничке соответствующей демки (несложно догадаться, что для приведенных трех различных демок код js также различен).
Да, это уже почти все. В 11 строчке yourApp.js пропишите путь к файлу world-110m-withlakes.json, он ждет вас в /site/public распакованного архива:
topojson: { file: 'site/public/world-110m-withlakes.json' },
Хм, пожалуй, это все. Надеюсь, заработало?
