Guidance when to style your features in Tilemill vs. Leaflet?

Question

I've found this generally to be dependent on each project's goals (or what the client wants), but when you have the options, what any rules of thumb or guidelines do use you in a project to determine whether to:

• use/style a base map in Tilemill/tilemill2; create a separate layer within TM of your unique data that you're intending to overlay the basemap; style the data within TM2.

• use a base map in Tilemill/tilemill2, load it in leaflet, add the features from a geojson file in leaflet with the features' styles in the geojson file itself.

• use a base map in Tilemill/tilemill2, load it in leaflet, add the features from a geojson file in leaflet and then style the features in the javascript on the page.

In cases where you're styling a lot of features (more than a few hundred?), I would add all of it within Tilemill since you're not dealing with the client side rendering..

In cases where your features are than 10 or so, I'd style them within the html file, I'd assume.

What other factors should I keep in mind when I'm weighing these approaches?

(I'm using TM and tm2 interchangeably here; I'm aware they're separate programs)

Answer 1

There's a lot of subjectivity still in play, but I think a broad answer to your question is that it's getting easier every day to use GeoJSON directly in a leaflet map without tiling, and this is ultimately a good direction for interactive maps to be going.

As such I tend to build maps using your third option above.

That comes with a few caveats. You mentioned file size already. I've found a hard limit of about 6MB on geojson files loaded directly into leaflet before the browser shudders to a halt, so anything larger than that usually needs to be tiled.

Also - and maybe the bigger consideration - is that Mapnik styles and SVG styles are two fairly distinct beasts, though there's increasing gray area between them. Tilemill brings Mapnik into the mix (Actually CartoDB does as well), along with its attendant functions for filtering, compositing, blending, and a partridge in a pear tree. SVG styles are basic by comparison, meant to scalably render stuff throughout the web page, not just in your fanciful cartography. I usually find SVG styles (as built into Leaflet) limiting when I really want to get complex on a map. That said, it's hard to argue with the level of interaction you can get when each geojson feature is available as a DOM element on the page.

I recently put together an interactive that required I juggle all of these considerations, and you can see I went with vector geojson for most layers. However, the "Soil Types" layer was just too detailed and required too much styling to bring in that way, so I tiled it.

Awesome question, anyway. This space is changing quickly.

Answer 2

Echoing Bill: it depends.

I would say never/rarely do the second option. Keep your data and styling separate.

The first and third options might be rephrased as "when should I use a service to render map features?" and "when should I use Leaflet to render map features in-browser?"

For me, I try to do the third option whenever I can. Rendering features in the browser gives you extra flexibility when filtering and styling features dynamically. And you're less dependent on another service, which can simplify logistics (another login, how does the data get there, what if the service goes down), financials, and space limitations.

That said, I end up doing the first option often (but usually CartoDB). Why? Sometimes there is simply too much data to render in-browser. I feel like I notice this when I get over 1000 features, but I haven't done any exhaustive experimentation on that front.

Answer 3

It does really depend on the project and what type of data you're using (and what you know how to use) but Tom Macwright made this handy simple Map Makers cheat sheet: https://github.com/tmcw/mapmakers-cheatsheet