I've got a large dataset comprised of about 10k points representing gas stations. Some of these gas stations sell diesel fuel, others do not.

In my web map, I want to let the user switch between viewing all gas stations and just the ones that sell diesel fuel. Moreover, I need the points to be interactive (i.e. popups with individual data).

I am trying to find a suitable technique for accomplishing this with Leaflet and Mapbox. But I can't seem to find a method with an acceptable loading time. I just need someone to point me in the right direction here. Any help is greatly appreciated!


This map from NPR is kind of what I'm striving for, but with the added ability to switch between states. That is, removing and adding points based on their attributes.

  • 1
    The NPR map bins points into grid cells to make them interactive, but otherwise, they are just tiled images. – blah238 Oct 6 '13 at 23:42
  • The library providing the interactivity in the NPR map is modestmaps-js. – blah238 Oct 6 '13 at 23:54

How interactive?

You can do it easily using MapBox, and then you could set up several layers that hold your subsets. That way each one is optimised and popups are seamless and fast (this also scales to millions of points).

You could do it yourself, using TileJSON, but it's not super easy. This also needs to be crunched server-side at the least, so isn't really dynamic, in terms of subsets.

Another method is using something like GeoServer. You could display one layer, but different styles in layers that subset the data, and then you fire off a WFS request on click. This is fast, and scales to big maps (I use this here), and could be dynamic, but it doesn't give you an interactive vector.

Finally, you could bite the bullet and just load your data as geoJSON or topoJSON, which is a good potential way to compress data, and this will give you the most flexibility to do all your data wrangling on the client side (d3 is a nice framework for some of that, though it is pretty complex).

What would I do? I'd try topoJSON, see how big the resulting file is, and if it's less than 1 MB use that in Leaflet with some custom javascript. If that failed, I'd set up multiple layers in MapBox using TileMill, since it's straight forward, provides great interactivity and is fast to get set up.

Any questions?

  • Great answer! This is just what I needed, a general overview of the options. – user20712 Oct 7 '13 at 11:43
  • One minor point here: topoJSON is great, but in this case I doubt it would add any advantage compared to plain geoJSON. topoJSON has been developed with topology relations in mind, but for points this does not make sense. – Decio Oct 8 '13 at 9:52
  • Hi @Decio that's true, but it does compress coordinates too. – Alex Leith Oct 8 '13 at 21:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy