MasterMaps

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

I'm going to play with the mapping capabilitites of D3.js in my new blog series from Foldøy island. I would like to use data from my own country, Norway. This dataset needs some improvements, and this blog post will show you how to do merge polygons in QGIS . As announced in an earlier blog post, Norway will open it's topographic datasets to the public . This week we got some details about the launch: The data will be released on October 1st this year, The licence will be CC BY 3.0 . Vector- and rasterdata at various scales up to 1:50,000 will be available.  This includes administrative borders for counties and municipalities  and driveable roads longer that 50 meters.  Digital elevation data at 10x10 meter resolution, which is great news! Before October 1st, I'm stuck with a dataset at 1:2,000,000 scale, but it will be suitable for country-wide mapping with D3.js. You can download the shapefiles from the Norwegian Mapping Authority on this page ....

In my last blog post , we created a Leaflet plugin capable of showing zoomable high-resolution images with Leaflet. Now, I need to compare two images side-by-side, and I've decided to create a generic plugin which can be used for maps as well. The Leaflet.Sync plugin is just a few lines of code , but it took some time to figure out the inner workings of Leaflet. Here is a synchronized view of two maps of Foldøy island where I'm currently staying: Fullscreen This is the JavaScript code needed to create this map: var layer1 = L.tileLayer('http://opencache.statkart.no/gatekeeper/gk/...');  var layer2 = L.tileLayer('http://opencache.statkart.no/gatekeeper/gk/...', {     attribution: '© Kartverket' }); var map1 = L.map('map1', {     layers: [layer1],     center: [59.336, 5.967],     zoom: 14             }); var map2 = L.map('map2', {     layers: [layer2],     center: [...

Today, I'm starting a new blog series written from Foldøy, a tiny island in south west Norway which will be my home for two months. In this first post, I'll show you how to deliver zoomable high-resolution images with Leaflet . I've brought along 17 kg of mapping and visualization books to keep me occupied: Fullscreen Zoom in if you want to see the details! The photo is broken into tiles and then displayed as required. You don't really need Leaflet to create images like this, as Zoomify provides both Flash and HTML5 viewers. I decided to use Leaflet to create an open source alternative, and to learn more about tiling schemes. This is the JavaScript code needed to show this image: var map = L.map('photo').setView(new L.LatLng(0,0), 0); L.tileLayer.zoomify('http://thematicmapping.org/playground/zoomify/books/', {     width: 5472,     height: 3648,     tolerance: 0.8,     attribution: 'Photo: Bjørn Sandvik' }).addTo(map); ...