Making maps with d3.js and leaflet.js combined: Intro

The following post is a portion of the D3 Tips and Tricks book which is free to download. To use this post in context, consider it with the others in the blog or just download the the book as a pdf / epub or mobi .

----------------------------------------------------------

You may be aware that I have written two books (there are big pictures of them at the top of this web page :-)) ‘D3 Tips and Tricks’ and 'Leaflet Tips and Tricks'. I haven’t written both books because they are integrated with each other or because they seem made to compliment each other. I wrote them because both libraries are the best of breed (IMHO) at what they do. It should come as little surprise that they can have a lot to offer users who want to combine the incredible scope of d3.js’s data manipulation functions and the elegance of leaflet.js’s tile map presentation capabilities.

Why use d3.js when leaflet.js can include objects on maps too?

There is a difference in the scope of flexibility between how d3.js and leaflet.js can manipulate added objects (think markers and ploygons). D3.js predominantly focusses on vector based graphics when drawing maps and leaflet.js leverages the huge range of bitmap based map tiles that are available for use around the world. Both bitmap and vector based solutions have strengths and weaknesses depending on the application. Combining both allows the use of the best of both worlds.

Why use leaflet.js when d3.js does maps too?

There is a significant difference between the underlying way that d3.js and leaflet.js presents mapping data. D3.js predominantly focusses on vector based graphics when drawing maps and leaflet.js leverages the huge range of bitmap based map tiles that are available for use around the world. Both bitmap and vector based solutions have strengths and weaknesses depending on the application. Combining both allows the use of the best of both worlds.

I will place post two follow up posts showing different approaches to combining d3.js and leaflet.js. One aimed at drawing d3.js objects that scale with leaflet.js maps and the other where the d3.js objects are set at a specified geographic location, but their scale and attributes are controlled by d3.

The description above (and heaps of other stuff) is in the D3 Tips and Tricks book that can be downloaded for free (or donate if you really want to :-)).