Displaying Big Data with Leaflet.js

Will Cadell November 5, 2011

Earlier in this series we pulled together a PostGIS database of US Census Polygons and displayed them on a Google Map. To do this we used the mighty Mapnik via node.js by using the node-mapnik connector. This tutorial will show you a way of displaying all those polygons on a Leaflet.js map instead of a Google Map.

Need some help with a project like this? Get in Touch

Technologies We’ll Use:

Holy smokes that’s a lot, but don’t worry, it’ll be ok…

This is what we are shooting for, its a Leaflet map with the 70,000 or so US Census Tract polygons overlaid on top:

The Node Server is Still Running

So we don’t actually have to change any backend code whatsoever. The Server we built already, is just fine for this tutorial. Yup, this is going to be pretty simple!

The Front End

All we want to do is have the polygons show up on a Leaflet.js map. This is a simple web product so all we need is a place for the map to show up. In this case we have a div tag with the id of “map”. That is actually the only HTML in the Body. The html file looks like this (yeah, this is it):

<html>
<head>
    <link rel='stylesheet' href='http://cdn.leafletjs.com/leaflet-0.6/leaflet.css'/>
    <script src='https://cdn.leafletjs.com/leaflet-0.6/leaflet.js' type='text/javascript'></script>
    <style type="text/css">        html, body {
        height: 100%;
        overflow: hidden;
    }

    #map {
        height: 100%;
    }    </style>
</head>
<body>
    <div id="map"></div>
        <script>
            var map = new L.Map('map', {center: [37.770, -122.41], zoom: 10});
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors'}).addTo(map);
            L.tileLayer('http://census.sparkgeo.com/{z}/{x}/{y}.png').addTo(map);
        </script>
    </body>
</html>

This is simple but there are some critical parts. Firstly, don’t forget to reference Leaflet, nothing will work without that. Secondly, Yup you are right there are inline styles and scripts. Yuk! But its for demo purposes, ok ;)? You will also notice there is only one tag inside the body. The div “map” fills the screen and is populated entirely by the map. The two inline styles ensure that the screen is filled. Point to note, the map above is actually an iFrame of the the actual map, so if you follow these instructions your map will in fact fill the screen, not just the little window that the above might suggest to some 🙂

The inline javascript script is where the magic happens. There are three things happening.

  1. Setting the map variable up with a centre point and zoom level
  2. Setting the background map tiles, in this case vanilla Open Street Map
  3. Setting the tile layer, with the appropriate connection string

Yup, that’s it folks.

Shout Outs

  • PostGIS – The Spatial Database of Choice
  • Mapnik – Toolkit for developing mapping applications
  • Node.js – Server-side JS, not as crazy as it sounds and rocket fast
  • Node-Mapnik – Bindings to Mapnik for Node, particular props go to the prolific Springmeyer
  • Leaflet – Open source mapping library
  • Webfaction – My favourite web host, developer friendly, with amazing support!

I hope this proves useful to the geoweb community. Remember, try and make maps for the web that don’t just look like web maps! 😉

Image: Mathew Schwartz
Image: Mathew Schwartz