3D Maps with Leaflet and eegeo.js

Home / General / 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.

Steps:

  • Write a basic HTML file with a title of your wish.

<!DOCTYPE html>
<html>
<head>
<title>3D Map</title>
</head>
<body>
</body>
</html>

  • 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

<script type=”text/javascript” src=”https://cdn-webgl.eegeo.com/eegeojs/api/v0.1.780/eegeo.js”></script>

  • 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],
zoom:14
});
</script>

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

 

eegeojs

 

 

 

 

 

 

 

 

 

 

 

 

 

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 *******