Живая карта автобусов и поездов Портленда с 18 строками JavaScript

Фил Ланье, 17 мая 2017 г.

Платформа Satori позволяет смехотворно легко публиковать и подписываться на потоковые данные в реальном времени. Чтобы продемонстрировать, насколько просто мы собираемся построить карту активности Portland Transit в режиме реального времени, используя канал оперативных данных TriMet Portland GTFS и всего 18 строк кода JavaScript.

Шаг 1: библиотеки, которые мы будем использовать

Мы собираемся использовать Leaflet для карты, Angular и отличную библиотеку Angular Leaflet для обработки привязки данных, и, конечно же, Satori предоставит данные. В общем, нам нужно будет включить следующие ссылки на JavaScript:

И одна таблица стилей:

Совет: вы можете использовать аналогичный подход с Google Maps, используя библиотеку Angular Google Maps.

Шаг 2: Базовая карта

Структура HTML, которая нам нужна для этого, чрезвычайно проста:

<div ng-app="app">
  <div ng-controller="appController">
    <leaflet id="map" lf-center="pdx" markers="vehicles" ></leaflet>
  </div>
</div>

Вот и все. Если вы вообще знакомы с Angular, это довольно просто. Мы просто ссылаемся на контроллер, а <leaflet> — это директива, определенная библиотекой Angular Leaflet.

Контроллер Angular такой же простой:

angular.module('app', ['ui-leaflet']).controller('appController', function($scope){
  $scope.pdx = {lat: 45.526477, lng:-122.635928, zoom: 14};
  $scope.vehicles = {};
});

Все, что мы здесь делаем, — это добавляем зависимость к ui-leaflet (Angular Leaflet), а затем определяем две переменные области видимости, на которые ссылается директива. $scope.pdx указывает начальную широту, долготу и уровень масштабирования карты, а $scope.vehicles — это объект с привязкой к данным, который будет содержать все наши маркеры карты.

Наконец, пара строк CSS позволяет карте заполнить окно браузера:

html, body, #map{
  padding: 0;
  margin: 0;
}
#map{
  height: 100vh;
  width: 100%;
}

В этот момент мы должны увидеть карту Портленда, на которой ничего нет.

Шаг 3: Потребляйте поток сатори и визуализируйте его

На последнем шаге мы позволим Satori выполнять тяжелую работу по потоковой передаче нам данных в реальном времени, и мы будем использовать данные для обновления нашего объекта vehicles. Чтобы подписаться на поток данных в реальном времени, мы можем скопировать код JavaScript прямо из канала TriMet Portland на Satori:

var endpoint = "wss://open-data.api.satori.com";
var appKey = "3B24aEDe2d13Feed98bbDC92bbFFbC54";
var channel = "RT-GTFS-TriMet";
var subscription = rtm.subscribe(channel, RTM.SubscriptionMode.SIMPLE);
subscription.on('rtm/subscription/data', function (pdu) {
  pdu.body.messages.forEach(function (msg) {
    console.log(msg);
  });
});
rtm.start();

Страница на Satori отлично объясняет, что все это значит, но резюмируя:

  • Сначала мы указываем Satori Endpoint и Channel для нашего фида, а также Appkey. Satori предоставляет общедоступный ключ приложения для каждого канала, который действует в течение 7 дней, но вы можете зарегистрироваться, чтобы получить постоянный ключ приложения бесплатно.
  • Далее мы создаем подписку и начинаем прослушивать новые сообщения.
  • Наконец, мы используем rtm.start() для включения потока данных Satori.

Поскольку мы считаем строки кода, мы немного упростим. Но мы можем поместить это прямо в наш метод контроллера. Если мы запустим его в этот момент, мы должны увидеть обновления шины и поезда, поступающие в консоль браузера:

Теперь нам просто нужно заполнить наш объект vehicles маркерами, используя данные Satori. Мы заменим цикл forEach в приведенном выше коде следующим:

msg.entity.forEach(u => $scope.vehicles[u.id] = 
       {lat: u.vehicle.position.latitude,
        lng: u.vehicle.position.longitude, 
        message: "Route " + u.vehicle.vehicle.label},
        marker: {type: 'div', iconSize: [16,16], popupAnchor: [0,0], html: '<strong></strong>'} );
});
$scope.$apply()

Angular Leaflet ожидает, что каждый маркер будет парой ключ/значение, где ключ является уникальным идентификатором (мы будем использовать идентификатор транспортного средства), а значение определяет атрибуты маркера. В этом случае мы укажем широту, долготу, сообщение (текст всплывающего окна) и пользовательский стиль маркера. Последняя строка, $scope.$apply(), запускает Angular для повторной визуализации карты после получения каждого пакета сообщений.

Наконец, что не менее важно, мы стилизуем наши пользовательские маркеры карты:

.leaflet-div-icon{
  border-radius: 10px;
  background: #ff284e;
  opacity: .8;
  border-color: black;
}

Собираем все вместе

Перейти в

Карта Portland Transit — лишь один из примеров того, как Satori позволяет легко использовать оперативные данные для создания новых приложений. Всего 18 строк кода с почти бесконечной масштабируемостью и сверхнизкой задержкой. Таким образом, вы можете добавлять не только дополнительные данные о шинах, но и всевозможные разрозненные данные — миллионы сообщений от миллиардов конечных точек. Создавайте приложения, которые используют оперативные данные, как никогда раньше. И лучше всего это бесплатно! И, если у вас есть потоковые данные в реальном времени для перепубликации, вы можете выиграть 500 000 долларов! Просто зайдите на Satori.com, создайте учетную запись и начните.

Свяжитесь с нами в Twitter, Facebook и LinkedIn. И помните, мы набираем!