MasterMaps

In my last blog post , we projected an equirectangular photograph on a sphere using three.js. Today, we'll use the same panorama to create a wee (miniature) planet. A wee planet is a panorama projected to look like small planets using a stereographic projection . There is a great collection of wee planets from Alexandre Duret-Lutz on Flickr . There are image software you can use to create wee planets, but why not be a real map nerd and use GDAL instead? We already have a 360°x180° panorama in an equirectangular projection . The only difference from a world map is that the panorama is not georeferenced. Let's do it with gdal_translate : gdal_translate -of GTiff -a_ullr -180 90 180 -90 -a_srs EPSG:4326 bergsjostolen.jpg bergsjostolen.tif We pretend our new GeoTIFF to be the world, and use gdalwarp to create a wee planet using the stereographic projection: gdalwarp -wo SOURCE_EXTRA=10000 -r bilinear -te -22500000 -22500000 22500000 22500000 -ts 1000 1000 -s_srs EPSG:...

Ever wanted to create those fancy-looking 360° panoramas? If you mix a mobile phone with three.js and some knowledge about (map) projections, it's quite easy.  I love travelling, especially to mountainous areas of our planet. Taking photos of vast landscapes can be challenging. This drew my interest in spherical panoramas,  photographs that captures everything around you - up, down and all around - 360 x 180 degrees.  Google calls it a photo sphere , and if you own a mobile phone with Android 4.2 or higher, you can easily create one yourself . I captured this winter scene with my phone a few days ago. But what if you want to get rid of the Google wrapping and show your panorama in your own viewer? Let's try to do it with three.js. If you download the image from your phone it looks like this: This is called an equirectangular photograph , which will be entirely seamless when wrapped around a sphere. It has the same projection as most of the world m...

I've just started a 3 months study leave from the Norwegian Broadcasting Corporation where I'm spending my savings to acquire new mapping skills. Originally, my plan was to spend the time in South America but I had to postpone this adventure. Instead, I'll spend some time in Norway, Turkey, the Dolomites/Alps - and where?!? Do you know of any interesting mapping events going on before 10th March? Would you like some help on an exciting mapping project? Please notify me .  My study plan is to improve my cartography skills, learn how to map with D3.js and to continue my 3D experiments with three.js.  Winter in Norway

How can you visualize a GPS track with three.js? The tricky part was the get the projection right so the GPS track would line up with my terrain map of Jotunheimen . With the help of D3.js , I was able to do what I wanted. I'm going to use the same GPS track that I've used previously with Leaflet . My plan was to convert this track to GeoJSON, but all the tools I tried didn't include the elevation values for my track. Instead of building my own converter, I decided to parse the GPX file directly in JavaScript.  GPX is an XML format , and D3.js supports reading XML files with the d3.xml method : d3.xml('jotunheimen-track.gpx', 'application/xml', gpxParser); The gpxParser function (shown below) is called when the GPX file is loaded, passing in the root element of the XML document. You can parse this document with the JavaScript XML/DOM access facilities. My GPS track is in geographic coordinates (latitude and longitude) and I need to pro...

My good colleague, Harald K. Jansson , owns an Oculus Rift headset , and he couldn’t resist creating a virtual reality version of my 3D map of Jotunheimen . It’s very impressive, especially when you know that everything runs in the browser. If you’re lucky enough to own a Oculus Rift headset you can try yourself by clicking on the image below. The demo is built using two Oculus plugins: THREE.OculusRiftEffect  by troffmo5 used to render the scene in stereo 3D side by side with lens distortion. THREE.OculusControls  by possan to allow head tracking. You need to fire up a HTTP server yourself to get head movement data from the headset.    We’ve also switched from TrackballControls to FirstPersonControls which allows you to fly through the landscape. Mouse navigation is disabled as it didn`t work well with the Oculus control, but you can move around with your keyboard: A / “arrow left”: Move left D / “arrow right”: Move right W / “arrow up”: Move fo...

This is the third blog post in my "terrain mapping with three.js" series. With the terrain geometry in place , it's time to create a texture and drape it over the terrain. In  the first blog post in this series, we created a digital elevation model (DEM) for Jotunheimen. We can use this DEM to create color relief and hillshade that will enhance the view of our terrain ( this blog post explains the details). gdaldem color-relief jotunheimen.tif color-relief.txt jotunheimen-relief.tif Creating nice-looking hillshades got easier with GDAL 1.10. By adding the "combined" option to gdaldem  you get a slope-enhanced shaded relief: gdaldem hillshade -combined jotunheimen.tif jotunheimen-hillshade.tif I'm combining color relief and hillshade with Mapnik , and at the same time adding colors for lakes, glaciers and trees using open data from the Norwegian Mapping Authority ( this blog post explains the details). nik2img.py jotunheimen-textur...

In my last blog post , we converted a digital elevation model (DEM) to a WebGL-friendly format ( i.e. easy to transfer and parse by JavaScript in the browser). In this blog post, we'll use the elevation data to build a terrain mesh with three.js .  First we need to transfer the terrain data to the browser. The elevation values are stored in a binary file as 16-bit unsigned integers. This page explains how you can send and receive binary data using JavaScript typed arrays. I've created a TerrainLoader by adapting the  XHRLoader . You can also use this function: function loadTerrain(file, callback) {   var xhr = new XMLHttpRequest();   xhr.responseType = 'arraybuffer';   xhr.open('GET', file, true);   xhr.onload = function(evt) {         if (xhr.response) {       callback(new Uint16Array(xhr.response));     }   };     xhr.send(null); } Loading elevation data with the Terrai...