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

A graticule is a grid of latitude and longitude lines on which a map is draw. This blog post will show you how to create a graticule with Leaflet . Mercator is very bad for for thematic world maps, as it greatly distorts areas towards the poles. Instead, you should use an an equal area projection  which correctly shows the relative sizes of Earth's landmasses. Leaflet has limited support for different projections, as it assumes all coordinates to be geographic (latitude and longitude). Luckily, the Mollweide equal area projection works quite well with Leaflet. I've previously used the Universal Transverse Mercator (UTM) projection with Leaflet. My map is combining Leaflet with Proj4js using the Proj4Leaflet bridge provided by Kartena. The World shown in the Mollweide projection. By just projecting the country borders from Natural Earth , I'm not able to show the oval-shaped world. A graticule will improve the view of this map, so I'ce created a g...

I've just started to learn about the mapping capabilities of D3.js , and this is my first-ever D3.js visualization. I'm very impressed by the work on map projections by Jason Davies and Mike Bostock . It makes me believe that the Mercator renaissance will come to an end. Mainland Norway is usually depicted in the Universal Transverse Mercator (UTM) projection. As the name implies, it's based on the cylindrical Transverse Mercator projection, which is supported by D3.js . UTM is often used to show regions or countries with a greater north-south extent, like mainland Norway, which is usually depicted in UTM 33. The UTM system divides the Earth between 80°S and 84°N latitude into 60 zones, each 6° of longitude in width. The zones are numbered from 1 to 60 proceeding east from the anitmeridian (180°). The projection has constant scale along the changing central meridian, and regions near it are mapped with low distortion. Just like on the regular Mercator proj...

This blog post will show you how to convert shapefiles to TopoJSON . We'll convert the two shapefiles we created in my previous blog post , containing all counties and municipalities of Norway. In a blog post from November last year I looked at various strategies to minify GeoJSON files . TopoJSON is an extension of GeoJSON that encodes topolog (e.g. shared borders between counties and municipalities). Polygons and lines in TopoJSON are represented by stiching together shared line segments. The shared boundary between two municipalities are represented only once, reducing the file size. Counties and municipalities are also sharing the same borders, and TileJSON are capeable of keeping both features in a single file. I won't go into detail, as the format is  very well explained on this page . Our shapefiles are using the Universal Transverse Mercator (UTM) 33N projection , a common projection for maps covering mainland Norway. If you want to keep this coordinate system in ...

In my last blog post , we improved a dataset containing all municipalities of Norway by merging polygons in QGIS. The municipality polygons include the sea areas, which makes it harder for people to recognize the shapes, as we're used to see Norway with all its fjords and islands. So let's use QGIS to remove the sea from all municipalities. This is a two-step process. First we need to create a shapefile containing only sea areas. Let's open "NO_Arealdekke_pol.shp" in QGIS. This file contains land cover data, where one of the categories is sea areas ("Havflate").   Open the attribute table and select all sea areas (OBJTYPE = Havflate).   While the areas are selected, right-click on the layer name in the left column and select "Save Selection As...". Save the shapefile with a new name ("NO_Havflate_pol.shp").  Open the new shapefile and click the "Toggle Editing" button. Mark all sea areas with "Select Fea...