Bookmark/Search this post with:
Friday, June 10, 2011
Lightweight library for map interaction and widgets that works with Modest Maps, Google, and OpenLayers
Wax is a set of tools aimed to make it easier to put custom maps onto the web with interactivity and other useful UI elements. Since the maps that TileMill creates and TileStream serves are a standard web tile format, it’s possible to use them with practically any web mapping API – Google Maps, Modest Maps, OpenLayers, and so on. Wax includes ‘connectors’ for Modest Maps and Google Maps that make the addition of MapBox-created layers much easier. But even more than that, Wax is what enables maps in all of these APIs to be interactive and to include legends from the tilesets themselves.
Wax is what powers the new version of TileStream that we will be launching later this month. By switching from OpenLayers to Modest Maps and Wax, we are able to reduce file size tremendously – in many cases more than 70%.
The Wax Manual: http://mapbox.github.com/wax/manual/index.html
This small file size is due to Modest Maps’ extremely minimal framework and that it requires very little legacy code, and Wax was rewritten to use no dependencies – it doesn’t require jQuery or any external framework to run. That said, it includes a static version of reqwest, which is a great replacement for the AJAX library in jQuery.
It’s simple to add interaction to a map using these tools:
But there’s a lot more to be done with the library. It’s what we use on projects, so there are many places where you can add deep customization to make maps behave and look completely differently – custom to any use case. For even more complex use cases, Wax contains the concept of records – ways to store and serve map configurations as data. For configuring hundreds of maps, records can cut down on the level of hacks and templating significantly.
You also get tools to bridge the gap between the extremely minimal Modest Maps API and map controls like those that users have come to expect with Google Maps and OpenLayers. Wax provides good looking zoom controls for a start – and for your app, you can tweak the style thoroughly with CSS. It also adds the familiar zoombox control originated by Schuyler Erle in OpenLayers. We expect to add more to Wax as we move along and possibly create companion libraries that push other aspects of map interaction. We’re also planning to add Leaflet support soon to keep pushing fast, lightweight map integration on the web.