Воскресенье, 26 января 2014 00:00

Planetary.js. Интерактивный глобус для вашего сайта

Оцените материал
(0 голосов)

На редкость красивый глобус; причем ни малейших признаков, прошу убедиться, уже практически почившего в бозе флэша.

 

 

Достоинства 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
Dev banner 3

Открыв страничку проекта  - вы, несомненно, сумеете еще раз оценить этот красивый скрипт; при некотором желании вы реализуете на страничке своего сайта даже 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' },

 

Хм, пожалуй, это все. Надеюсь, заработало?

Последнее изменениеСреда, 15 февраля 2017 04:52

2 комментарии

  • Комментировать Aleksej Вторник, 30 сентября 2014 22:58 написал Aleksej

    хм.... даже и не знаю, что ответить. :)

  • Комментировать Анна_Анна Вторник, 30 сентября 2014 13:28 написал Анна_Анна

    можно ли на такой глобус "натянуть" карту (png), чтобы цвета были натуральными?

Оставить комментарий

Добавьте ваш комментарий

SEO-оптимизация. SEO-услуги

Заказать сайт

Веб-разработка. Заказать сайт

Вы можете заказать сайт-визитку, блог, корпоративный сайт, интернет-магазин или коммерческий web-портал.