M3D (Maps-3D)



Maps3D is a web-app to calculate the 3D-model of *any* place on earth. It allows you to define a rectangular area on a Google Map. The topography is then calculated and rendered as a rotateable, zoomable wireframe model. The model can also be printed out on a 3D printer.

Github repository Demo

Why is it awesome?

Because it uses your computer’s graphic card to render the 3D-Model. And of course because I made it :-).

What can I do with it?

A lot of things, amongst others you can…

  • … define a rectangular map extract to calculate the profile for
  • … set the precision of the profile (i.e. how many points the elevation will be retrieved)
  • … rotate/zoom the profile
  • … define ground shapes other than rectangular to define the map extract (e.g. polygons or community boundaries)
  • … generate an inverted version of the model to use as a mold
  • … export the model as an STL file for 3D-printing

What can’t I do with it?

Unfortunately, there are some things you cannot do with M3D, awesome as it may be. For example, you cannot…

  • … export the model as VRML
  • … generate the height profile for a non-rectangular shape (only ground shape can be specified)
  • … use the app as a flight simulator

Why this project?

Counter question: Why not? Well, the original reason I made this was that I had to do SOMETHING as a school project. Since I was free to choose and I wanted to learn WebGL, I invented my own project topic.

What technologies did you use?

Here’s the tech-stack:

  • Framework: AngularJS
  • Dependency Management: Require.js
  • Testing: QUnit, Sinon.js, Protractor
  • WebGL: Three.js
  • UI: jQuery, jQuery UI, Twitter Bootstrap

Wouldn’t it be even more awesome, if… ?

There are a lot of extensions to add, for example:

  • Allowing the user to define areas with various shapes (circle, triangle, free-form, …)
  • Caching the elevation data on some sort of backend (to reduce the calls made to the API. If the app gets used heavily enough, I might eventually end up with the full elevation data from Google 🙂 )
  • Exporting the Data to other formats
  • Saving the meshes
  • Allowing elevation data input other than Google
  • Texturing with Satellite images
  • Simulating avalanches or having a 3D-Model of Godzilla walk over the area and destroy things 🙂

Feel free to fork from my repo 🙂

OK enough dirty details! I agree it’s awesome!

Told you so! 🙂

Leave a Reply

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