Живая карта автобусов и поездов Портленда с 18 строками JavaScript
Фил Ланье, 17 мая 2017 г.
Платформа Satori позволяет смехотворно легко публиковать и подписываться на потоковые данные в реальном времени. Чтобы продемонстрировать, насколько просто мы собираемся построить карту активности Portland Transit в режиме реального времени, используя канал оперативных данных TriMet Portland GTFS и всего 18 строк кода JavaScript.
Шаг 1: библиотеки, которые мы будем использовать
Мы собираемся использовать Leaflet для карты, Angular и отличную библиотеку Angular Leaflet для обработки привязки данных, и, конечно же, Satori предоставит данные. В общем, нам нужно будет включить следующие ссылки на JavaScript:
- https://satori-a.akamaihd.net/...
- https://ajax.googleapis.com/aj...
- https://unpkg.com/[email protected]....
- https://cdn.rawgit.com/angular...
- https://cdn.rawgit.com/nmccrea... (это зависимость Angular Leaflet)
И одна таблица стилей:
Совет: вы можете использовать аналогичный подход с 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. И помните, мы набираем!