MasterMaps

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

Three.js is a very promising tool if you want to add a third dimension to your web maps. In my last blog post , I showed how easy it was to create a WebGL Earth in the browser. Today, I'm starting a new blog series about terrain building with three.js. Last year, I wrote a blog series about all the fun you can do with digital terrain data: Digital terrain modelling and mapping Creating hillshades with gdaldem Creating color relief and slope shading with gdaldem Terrain mapping with Mapnik Land cover mapping with Mapnik Using custom projections with TileCache, Mapnik and Leaflet Creating contour lines with GDAL and Mapnik Showing GPS tracks with Leaflet I will continue using map data from Jotunheimen , a mountainous area of Norway. The 29 highest mountains in Norway are all in Jotunheimen, as well as the deepest valley, Utladalen . It's a great spot for 3D terrain mapping. But the same techniques applies to all terrains, - you only need some terrain data. Inst...

This blog post will show you how to create a WebGL Earth with three.js , a great JavaScript library which helps you to go 3D in the browser. I was surprised how easy it seemed when reading a blog post  by Jerome Etienne . So I decided to give it a try using earth textures  from one of my favourite cartographers, Tom Patterson . WebGL is a JavaScript API for rendering interactive 3D graphics in modern web browsers without the use of plug-ins. Three.js is built on top of WebGL, and allows you to create complex 3D scenes with a few lines of JavaScript. If your browser supports WebGL you should see a rotating Earth below: [ Fullscreen ] To be able to display something with three.js, you need three things: a scene, a camera and a renderer. var width  = window.innerWidth,     height = window.innerHeight; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000); camera.position.z = 1.5; var rende...