MasterMaps

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

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

My setup for the population density map of New Zealand made it easy to create new choropleth maps with New Zealand census data. This blog post explains how you can use Leaflet to switch between multiple interactive layers created with TileMill. I wanted to create a map of the social geography of New Zealand, using the Index of Deprivation from the Department of Public Health, University of Otago. I downloaded a Excel sheet containing data for the 2006 census area units, which I also used for my population density map. I simply added the data to the same SQLite database, and created the map using the same techniques described in two previous blog posts ( 1 , 2 ). The Index of Deprivation is constructed from nine Census 2006 variables, and provides a summary deprivation score from 1 to 10. A score of 1 is allocated to the least deprived 10 percent of areas, and 10 is allocated to the most deprived 10 percent of areas. You'll find more information about the index in the Atla...

In my last blog post , we created a population density map of New Zealand using QGIS, SQLite and TileMill. Today, we’re going to publish this map to the web using various MapBox inventions. I'll also show you how to publish an interactive TileMill map on your own web server using some PHP and JavaScript wizardry.  I love MapBox . The team behind this platform has created a series of new specifications, allowing us to create fast, good looking and interactive maps. The downside is the limited support for other map projections than Web Mercator. TileMill allows you to add legends and tooltips to your maps. I’ve added a legend to my population density map with a HTML snippet describing the map and the color scale. The tooltip shows when the user hovers over or clicks on the map. It allows us to show dynamic content - additional data, images, charts - for each map feature. I want to show the name, total population, area and population density for each feature: The d...

There are 16 regions of New Zealand , and during my trip I’ll be visiting 15 of them (I’m saving the Taranaki region for my next visit). This blog post shows how you can download and simplify region boundaries, and add them to a map as an interactive layer. The region is the top tier of local government in New Zealand. Eleven are governed by an elected regional council, while five are governed by territorial authorities (the second tier of local government) which also perform the functions of a regional council. The current regions came about in 1989, when they replaced more than 700 boards which had been formed in the preceding century. The geographic extents of the regions are largely based on drainage basins , following drainage divides such as the Southern Alps.  The dataset I’m using is from Statistics New Zealand , the national statistical office. Koordinates.com has made life easier by collecting geographic data from Statistics New Zealand on their portal. I’v...

I’ve travelled around New Zealand by bus, car, boat, and by foot. In a previous blog post , I created a “Where I’ve Been Map” using markers for each of the places I’ve stayed. Let’s add some lines showing the route between the markers. I've destroyed my National Geographic map while travelling around the New Zealand. How can I add the roads travelled to my digital map? Travelling around New Zealand can be quite an experience. This is a well known sight. I’ll concentrate on the roads in this post, and deal with boat and foot tracks later. As I didn’t carry a GPS when travelling by bus or car, I had to find the road lines from a different source. I’m using road data from LINZ for my map, but I’m sure you can achieve the same with OpenStreetMap data. First, I created an empty shapefile in QGIS for my road data. Then I marked and copied the roads I’ve travelled from the LINZ shapefile, and pasted the road segments into my own shapefile. I also had to cut road lines ...

In New Zealand, long distance walking or hiking for at least one overnight stay is known as tramping . There is a great network of over 950 huts throughout New Zealand operated by the Department of Conservation (DOC). I’ve just stayed in four of the huts while tramping the Abel Tasman Coast Track , and you need a lifetime to reach them all. It’s much quicker to map them. DOC huts in the Abel Tasman National Park . Awaroa Hut I was fortunate to visit the geospatial unit at the DOC office in Wellington. They have a lot of ineresting conservation projects going on, and it seemed to be a great place to work in New Zealand, especially when you can combine digital work with practical field work. You can download DOC's geospatial data for free on their data portal . Unfortunately, the datasets are not available as shapefiles, so it might require some wizardry to extract the data from KML. Luckily, the Koordinates guys have done this already, and you can download the shape...

New Zealand has a large number of cold and hot springs , where water flows to the surface of the earth from underground. Where can you find these springs? This blog post will show you can visualise a spring point dataset on a Leaflet map.  You can find spring point dataset at LINZ Data Service , which contains 147 significant springs either by size or location. I downloaded the dataset as a shapefile, and converted it to GeoJSON using ogr2ogr : ogr2ogr -f "GeoJSON" -lco COORDINATE_PRECISION=4 nz-spring-points.json nz-spring-points-topo-150.shp  The resulting GeoJSON FeatureCollection can be assigned to a JavaScript variable: var springs = {"type":"FeatureCollection","features":[{... ... and visualised with Leaflet's GeoJSON layer and L.circleMarker : Here is the result: Fullscreen map Te Waikoropupū Springs in Golden Bay, discharging 14,000 litres of water per second , - the largest freshwater springs in New...

I needed a way to control the appearance for my Leaflet map of New Zealand , especially when embedding a map with an iframe. Leaflet have no native support for URL parameters for, like the Permalink control for OpenLayers ( there is a plugin + Leaflet-hash ). This blog post will show you how you can add support for URL parameters for map position (latitude/longitude), zoom level and active layers. First, I'm defining my layers in an JavaScript object: var layers = {   'Seafloor': L.tileLayer('tiles/nz-seafloor/{z}/{x}/{y}.png'),   'Topographic': L.tileLayer('tiles/nz-topo/{z}/{x}/{y}.png'),   'Tour': L.cartoDB('http://thematicmapping.cartodb.com/api/v2/sql?q=SELECT * FROM new_zealand_tour') }; You can use the same object to populate the Leaflet layers control . Next, I'm extracting the URL parameters with a regular expression ( from Papermashup ): var params = {}; window.location.href.replace(/[?&]+([^=&]...

I wanted to create a "Where I've Been" map of my trip around New Zealand. The map should be easy to update through a simple web interface. Previously, I've used Google Fusion Tables for tasks like this. Now, I want to try CartoDB , which is Google Fusion Tables on steroids . I used the CartoDB free plan to create a simple table containg the name and location of the places I've been: You can easily query your data with the HTTP-based SQL API : http://thematicmapping.cartodb.com/api/v2/sql?q=SELECT * FROM nz_tour This request will return all the data in the default CartoDB JSON-format. Add format=geojson , if you want the data in the GeoJSON format supported by Leaflet : http://thematicmapping.cartodb.com/api/v2/sql?q=SELECT * FROM nz_tour&format=geojson The SQL API also supports JSONP , allowing you to query your data directly from JavaScript in the web browser. Just add a callback parameter: http://thematicmapping.cartodb.com/api/v2/sq...

Last week I had a great 5 day trek through Jotunheimen in Norway, the same area featured on this blog in a number of posts  ( 1 ,  2 ,  3 ,  4 ,  5 , 6 , 7 )  . The trek included the Norway’s highest mountain, Galdhøpiggen (2,469 m), and the deepest valley, Utladalen . A foggy day on Galdhøpiggen (2,469 m). Visdalen close to Spiterstulen (1,100 m). The view from Kyrkja (2,032 m) Storutla river Avdalen farm in Utladalen. I used my Garmin GPSmap 60CSx to track the route, which allows me to save the tracklogs  on the memory card. After the trek I had 5 GPX  files, one for each day. I used GPSBabel to merge the files into one GPX, jotunheimen_track.gpx . Leaflet don't have native support for rendering GPX files ( there is a plugin though ), so I decided to convert the GPX track to GeoJSON . This can easily be done with ogr2ogr program (part of the great GDAL library ): ogr2ogr -f GeoJSON jotunhei...

After five blog posts ( 1 , 2 , 3 , 4 , 5 ) we finally have a terrain map of Jotunheimen , a mountainous area in Norway with beautiful lakes and glaciers. It’s time to publish the map on the web. In this blog post I’ll show how you can use TileCache and Mapnik to render map tiles, and how to load these tiles into Leaflet using the UTM coordinate system . To make a slippy map - a zoomable and draggable map - we need to serve map tiles instead of the large map image we created in the last blog post . The original Digital Elevation Model (DEM) is 3134 x 3134 pixels, and with a bit of upscaling we can using this tiling scheme: Zoom Map size Tiles Resolution 0 256 x 256 px 1 x 1 = 1 234.375 1 512 x 512 px 2 x 2 = 4 117.1875 2 1024 x 1024 px 4 x 4 = 16 58.59375 3 2048 x 2048 px 8 x 8 = 64 29.296875 4 4096 x 4096 px 16 x 16 = 256 14.6484375 Each map tile is 256 x 256 pixels. We need one map tile to cover the first zoom level a...