Generating Interactive Tiles using Nodejs, Mapnik, and PostGIS for Leaflet

Question

I am looking to do something like this but where I have all the data on the same server.

I've been following through the set of tutorials @ sparkgeo.com/labs/big/ and I'm having some difficulty. Ultimately I'd like to get it working with Leaflet like the tutorial @ sparkgeo.com/labs/bigleaflet/ but I can't get the version on the prior tutorial to work either. So the final version will be generating R Shiny interactive maps and layers from tiles accessed through Leaflet generated by Postgis by means of node.js using mapnik and mapbox.

The Wax libraries used in that tutorial have been removed so I installed this. I pointed the tiles in the HTML file to http://localhost:8000/{z}/{x}/{y}.png and pointed to my location of wax.g.min.js. No census tracts are showing up with I run the cencon.js code. Similarly with the Leaflet version of the HTML file, I pointed to the localhost for the layers and they are not displaying. They are successfully loaded to the PostGIS database and changing the database login info.

OK, so I'm new to all of this and I'm wondering if I'm missing something obvious. I did not alter the code other than what I previously mentioned. Is there something else I needed to do to generate the tiles @ http://localhost:8000/{z}/{x}/{y}.png? Also, now that Wax is superseded, do you have any links for more suitable tutorials using mapbox?

Answer 1

It's a bit high time I answered, but here goes:

• Since the use of Wax is deprecated as you mentioned, here are some Mapbox examples to get you started. Bear in mind that the Leaflet API is embedded into Mapbox.js and can be used hand in hand with Mapbox code.

• Using http://localhost:8000/{z}/{x}/{y}.png means to store the tiles in your own folder. This is good provided you don't want too many zoom levels. Otherwise, it gets really hard to manage so many tiles on your computer. You may want to clarify that for yourself first.

• If you get the ERR_CONNECTION_REFUSED on a Windows localhost to access these tiles declared by http://localhost:8000/{z}/{x}/{y}.png, the problem may be that your js source is on a remote server, and not within the localhost folder. Naturally, the computer does not allow some untrusted js code on the internet to access the contents of your computer.

In other words, instead of adding the js library as this:

<script src="http://mapbox.com/foo/bar/mapbox.js"></script>

...download the js into your localhost folder and use this:

<script src="/mapbox.js"></script>

If this does not solve your problem, make sure your localhost server (XAMPP or whatever) has the permissions to access your filesystem.

• I believe you're using a bit too much of libraries at the same time for a simple web map. TileMill is a great tool to create interactive maps with minimum effort. Combine that with Mapbox.js and your JavaScript skills so that you can create a map like in the first example you provided.

If you have the data you wish to display in CSV or some similar format, I suggest you get started with TileMill immediately.