first published week of: 03/04/2013
Recently we published a blog post on 3D Elevation Models with Bing Maps WPF. In this blog post we will show you how to create a tool for generating a 3D model of elevation data from the Bing Maps REST Elevation Service using HTML5 and Bing Maps. There are a couple of different ways to create 3D models in HTML5. The method we are going to use to is to project 3D data onto a 2D canvas. There are several JavaScript libraries available online that can do this. You can also find an in-depth article on how to do the math required for this projection here if you want to write your own library. For this blog post we will use the second method and make use of a JavaScript library called K3D.
In this blog post we will create a web page that uses Bing Maps to select an area on the map. We will then use the elevation service to get the elevation data for the selected area on the map. We will then generate a 3D model using the HTML5 canvas and the K3D library. We will also make use of sliders from the jQuery UI library and add functionality for rotating and translating the model. Note that by using a helper library called ExplorerCanvas you can add HTML5 canvas support to Internet Explorer 7 and 8 which represent 13.8% of the current web browser market share.