TfL API using leaflet.js and eegeo.js

Surfacing real-time, useful geospatial data is hugely useful in maps. This example will show you how to use the TfL API (Transport for London), leaflet.js and eegeo.js to visualise real-time London Underground tube times for the Central Line in London, UK. It’s as simple as a few lines of Leaflet for the mapping and a few lines of Javascript to model the interactions with the TfL API:

Hover over one of the tube stations to see when the next trains depart. This jsfiddle shows the full integration.

eegeo.js

We’ve built first-class Javascript support into eeGeo maps. In the summer we quietly released the beta version of eegeo.js - a javascript library that brings our dynamic, interactive 3D maps to browser. eegeo.js is now out of beta and ready for production use. It’s free to use up to 1000 MAU and is open source under BSD-2.

eegeo.js is based on Leaflet.js v1.0.1 so all of your favourite Leaflet.js features are available on eeGeo maps. This allows javascript developers familiar with Leaflet to rapidly use eeGeo maps by changing one or two lines of their existing code.

Getting Started - Embedding

You can now embed eegeo.js in a site within seconds, signup for an API key, and embed the following code snippet:

    <script src="https://cdn-webgl.eegeo.com/eegeojs/early_access/latest/eegeo.js"></script>

Under the Hood

Our maps are driven by libeegeo, a high-performance, cross-platform C++11 library using OpenGLES and OpenGL. This cross-platform library powers all of our platforms from a single codebase. This means reduced inventory, allowing us to stay quick and lean - we only have a very small core engineering team of 10.

To power our WebGL build we have taken the same approach. How much of our cross-platform C++11 library could we re-use? We turned to Emscripten. Emscripten lets us use our cross-platform libeegeo in C++, compile to LLVM, then convert to javascript for use in the browser. It also provides standard library implementations and a shim between OpenGL ES and WebGL, allowing us to run our at near-native speed targeting only OpenGL ES.

This can run with some, but minimal overhead in browser thanks javascript engines that compile to native code JIT, such as V8 and V8 extensions such as TurboFan

Enabling Rapid Development

eeGeo maps have started gaming first, mobile second, browser third. This means 3D and performance have been at the front of our minds and allows us to create the best looking, most dynamic and interactive maps on the market.

It does mean that eeGeo maps have been harder to develop for. Our iOS API is thin Objective-C, and our example app is C++ - it has been alien to some developers who are familiar with Java on Android or Swift on iOS.

eegeo.js changes this. It’s now possible to use and deploy eeGeo maps just like any other leaflet.js base-layered map. You can now very rapidly develop on our maps using javascript and leaflet, without having to worry about C++.

Using Leaflet

The above example makes use of stock leaflet.js and eegeo.js - whether you’re familiar with leaflet.js or not, it’s extremely simple to add features:

Adding a marker:

    <script>// <![CDATA[var map = L.eeGeo.map("map", "your_api_key_here", { center: [37.7858, -122.401], zoom: 12 }); var marker = L.eeGeo.marker([37.7858, -122.401], { title: "My marker" }).addTo(map); // ]]></script>

Adding a polygon:

    <script>// <![CDATA[var map = L.eeGeo.map("map", "your_api_key_here", { center: [37.7858, -122.401], zoom: 12 }); var polygonPoints = [[37.786617, -122.404654], [37.797843, -122.407057], [37.798962, -122.398260], [37.794299, -122.395234]]; var poly = L.polygon(polygonPoints).addTo(map); // ]]></script>

A full set of examples can be explored in our eegeo.js documentation

To the future: a Leaflet Base Layer

Leaflet provides the notion of ‘base layer’ - ideally we’d like eeGeo to be provided as a Leaflet base layer so that you can just swap eegeo maps into your existing Leaflet project.

This isn’t quite possible with leaflet as the baselayer infrastructure is highly 2D-opinionated. In the mean time, we provide some shims that allow eegeo.js to work seamlessly as a leaflet.js map by creating L.eeGeo.map rather than L.map.

We’re really looking forward to using eegeo.js more - it’s already been used to form the basis of eeGeo ‘MyMaps’. eeGeo ‘MyMaps’ allow you to create, manage and publish 3D maps without developer involvement. You can access ‘MyMaps’ by registering and logging in to eegeo.com.

More information about the TfL API can be found via Transport for London (TfL).