3D Maps with Leaflet and eegeo.js


We like maps and will continue like them more. Every day, there are changes in the libraries used for mapping. With most maps being 2D, exploring 3D maps is so much fun and better.

In this post, I describe a procedure to display 3D maps for your web mapping project.

First, we will have a HTML file that will handle our map page.


  • Write a basic HTML file with a title of your wish.
<!DOCTYPE html>
<title> 3D maps</title>
  • Add the Leaflet CSS inside the <head></head> section
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">

You can also load this from your local computer

  • Add the eegeo JS library inside the <head></head> section
  • Add the section in which the map will be displayed
<div id="map" style="height: 700px; width: 1200px;></div>

Adjust the width and height as per your needs

  • Add the script to load the map(3D map)
<script type="text/javascript">
var map = L.eeGeo.map('map','ee8527b388ebd47db75a67d7caf519e6',{
center: [40.689091, -73.951526],

Note the use of Leaflet and eegeo for the map section.

The ee8527b388ebd47db75a67d7caf519e6 represent the API Token from eegeo . To get this token, Visit  eegeo developer section, you must register an account. Under My Apps > New App, enter a name of an app and click Create new app












The app will be listed below, copy the API Token and replace it with the one in the code above.

The center: [40.689091, -73.951526] represent a point on the ground. In this case, it’s a point in New York.

The zoom: 14 indicates the initial zoom level (Zoom at load of the map)

It’s time to visualize the 3D map. The eegeo map does not run when loaded directly from the file system. Use a web server to load the map on a browser(Such as WampServer, Xampp). If the web servers ar not installed, make a quick web server on your system. Run python -m SimpleHTTPServer 3000. Then on the browser, load the map using localhost:3000 . Your 3D map should be loaded on the browser.

3D map








That’s it. A video of the same can be found on my Youtube Channel

******* Happy Hacking *******


Recommended For You

About the Author: Wanjohi Kibui

A GIS user with interests in web and desktop systems development, FOSS advocate, trainer and mentor. Lives in Nairobi but finds adventure in travelling. The "Life in GIS" phrase is as a result of the many told and untold stories in the Geospatial realm. Drop a message today for more details and projects!!

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: