Excuse the typical tech-blogness of this post; it essentially consists of
specific, technical advice to specific technical things. Ideally it’s helpful
to specific people, and if this doesn’t look like your kind of thing, just
keep on movin on.
Use TileMill Maps in Development
The design cycle for TileMill and sites based
on mapbox.js can seem kinked and slow if you’re
tabbing between site & map, or even exporting and uploading ‘test’ maps to
see what they look like.
You can use TileMill as a map server, and when you make changes, they quickly
propagate to your site. Let’s say you have a map setup like:
A lot of sites have a certain pattern as far as how they use markers - you’ll
load a lot of markers, and then filter them by property in GeoJSON.
You end up with code like
This isn’t terrible, but it’s repetitive and has a clear pattern. To clean
this up, you can use a by function:
This uses a closure,
It’s also handy to have around these two functions:
Removing the Attribution Prefix from Leaflet
This one’s simple, a one-liner. It’s documented,
too. But people either don’t realize this, assume that Leaflet
‘requires attribution’, or they do just want to throw a shout-out to the
library in there.
While this isn’t evil, it’s a little obtrusive and there’s no requirement
to keep it there.
Downsampling Tiles For Performance
MapBox’s tiles are, by default, made to be pretty,
and the infrastructure is meant to deliver them crazy fast. If you need
them even faster or don’t have bandwidth to spare, you can switch to downsampled
versions. Full deets are in the image quality section of the developer docs.
Using Maps in the DOM
Maps are not too far from the DOM. Read my article on how web maps work
for the full story. But, the short of it, is that in mapbox.js (and in
Modest Maps), when you have a layer, you always have
access to layer.parent, a direct reference to the layer’s parent DOM element.
Thus it’s pretty simple to do stuff with this. You can, for instance, do
Or you can do slightly more advanced stuff like this example, where your
mouse position left to right on the map changes the layer’s opacity. (useless,
but you get the idea)
Simple as that. The only thing to watch out here is automatic compositing in
mapbox.js, which you can easily turn off by calling .composite(false) on
a layer object.