Mr Branding: Building Gorgeous 3D Maps with eegeo.js and Leaflet

Wednesday, March 8, 2017

Building Gorgeous 3D Maps with eegeo.js and Leaflet

eegeo.js is an open source 3D maps API built on top of Leaflet, the popular mapping library.

There are many mapping libraries that allow you to embed or build simple, 2D maps. Notably Google Maps, Bing Maps, HERE, Mapbox and OpenStreetMap. Popular mapping abstraction libraries such as OpenLayers and Leaflet also allow you to change the map 'base layer' without having to change your application logic.

With the usage of the Google Earth API falling to NPAPI security deprecation, the choice of 3D map APIs is limited. Alternatives do exist, such as the popular Cesium library. eegeo.js is another, providing a dynamic, truly seamless 3D map of the world, from space to a desk in an indoor map. Right in the browser using WebGL.

eeGeo 3D Maps Space to Desk

Getting Started

In this article, I'll show you how simple it is to embed a gorgeous 3D map of London and add some basic functionality using the Transport for London API.

Spoiler: 3D maps are as simple as using 2D maps.

Disclaimer: I am SVP Software Development at eeGeo, and I have oversight of the development of eegeo.js

There are plenty of tutorials on how to use Leaflet. eeGeo.js was consciously built on top of Leaflet so that developers already familiar with Leaflet can get up and running immediately. I thoroughly recommend the Leaflet examples and documentation.

This article will cover basic HTML, CSS, JavaScript and simple mapping concepts.

What You'll Need

This article will cover a few key components:

Leaflet (documentation, examples)
eeGeo.js (documentation, examples)
Transport for London (TfL) API
Python, or somewhere to upload your HTML, CSS and JavaScript

Displaying a 2D Map of London

First, let's create a 2D map of London, using Leafet and Open Street Map. Leaflet is super simple. All you need is a tiny bit of HTML to setup the page, a <div> to contain your map, and a few lines of JavaScript to create and set the initial position.

Create the HTML

Let's create a HTML file with the following markup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Building Gorgeous 3D maps with eegeo.js and Leaflet</title>
  </head>
  <body>
    <div id="map" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Include Leaflet

To include Leaflet it's as simple as adding the Leaflet JavaScript library and CSS. Include these within the <head> tag:

<link rel="stylesheet" href="http://ift.tt/2kub1LW" />
<script src="http://ift.tt/2kXH4AK"></script>

Add the Leaflet JavaScript

The following lines of JavaScript initialize Leaflet, and use OpenStreetMap as a tile layer. You can add this as an external JavaScript file, or for simplicity in a <script></script> block below <div id="map"/>:

var map = L.map('map', {
  center: [51.517327, -0.120005],
  zoom: 15
});
L.tileLayer('http://ift.tt/1lSj3Er', {
  attribution: '&copy; <a href="http://ift.tt/VGR6Z6">OpenStreetMap</a> contributors'
}).addTo(map);

The code initializes the map centered on Holborn Tube Station at the WGS84, decimal degrees latitude, longitude of 51.517327, -0.120005. You can obtain these coordinates by right clicking and selecting 'What's here' on digital maps like maps.eegeo.com or Google Maps. You'll see later that most geospatial APIs return positions in standard WGS84 decimal degrees latitude and longitude, including the TfL API.

Fire up the 2D Map

Upload your HTML somewhere, or view it locally. I recommend not loading directly from the file system but using a local loopback web server. Save your HTML as index.html, and in the same folder, run: python -m SimpleHTTPServer 8000 You can then visit http://localhost:8000/ in your browser.

You'll see the following map, centered on Holborn Tube Station in London:

2D map of London centered on Holborn Tube Station

Displaying a 3D Map of London

As eeGeo.js is built on top of Leaflet there are very few changes to make to turn the 2D map of London into a gorgeous 3D map.

Change the JavaScript we added above which read var map = L.map ... to the following. A free eeGeo API key is required. You should also delete the JavaScript that calls L.tileLayer as it is no longer required.

The JavaScript should now read:

var map = L.eeGeo.map('map', '<your_api_key>', {
  center: [51.517327, -0.120005],
  zoom: 15
});

Change the <script> include we added to <head> to include eegeo.js rather than Leaflet. The eegeo.js file already contains Leaflet, so don't include both:

<script src="http://ift.tt/2m06i1v"></script>

And that's it! By changing just a couple of lines, you'll now see the exact same view of Holborn Tube Station but in gorgeous 3D:

eeGeo.js 3D Map of London centered around Holborn Tube Station

Changing zoom, tilt & orientation

As eeGeo.js is completely 3D, it's possible to rotate and tilt the map. The Leaflet setView function is supported, with optional tilt and heading arguments to support the 3D behavior of the map.

Add the following JavaScript and after 10 seconds the map will seamlessly animate in 3D from Holborn Tube Station to the Gherkin in London:

Continue reading %Building Gorgeous 3D Maps with eegeo.js and Leaflet%

by TIm Jenks via SitePoint

Mr Branding