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):

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.