Goodbye Map Tiles, Hello MapBox GL!

Map tiles have been the norm when it comes to online maps for a very long time. MapBox aims to change that with the new MapBox GL library.

MapBox GL is a library that aims to unleash the full power of vector data by harnessing the capabilities of OpenGL. OpenGL is an API for rendering vector graphics using the GPU. What this means is that instead of map tiles being served on the web map, vector graphics will be rendered client side by making good use of the device hardware.

The implications are tremendous; by reducing the reliance on the server, very complex and fluid maps can be generated on the device itself. The data can be played around with and everything is dynamic.

MapBox GL has support for web-based applications as well as native applications on IOS, OS X and Linux, thus being good news for web and platform developers alike.

Go check out MapBox GL here: https://www.mapbox.com/mapbox-gl/

Advertisements

Maps are vectors, treat them with respect!

Maps are representations of spatial data. They are bunch of symbols that fit together to make sense of the world. Then why oh why do we still use bitmaps and raster images to render these maps, when they are vector shapes and not imagery? Even if you use tiles to render scalable maps, that still involves raster images that need to be loaded every time you zoom in and out of an area, or pan to a different view. The result is that the server that serves these images is being put under undue stress.

SVG renders shapes and visualizations in the browser, and hence completely scalable. The advantage of using SVG is that you don’t have to serve map tiles from a server and then load these tiles on a client screen. You can just render the map on the client screen itself, making the page and map load faster, and reducing the amount of data transfer required. What you get is a vector shape that looks equally sharp on the small screen as it does on a large one. SVG is quick to load and most of the browsers today (except IE 8 and below) and mobile devices already have SVG support. Moreover, there is NO pixelation, no blurred edges and you can style your maps very easily using CSS3, which in itself kills off the need for pre-designed map tiles.

As a developer, you can always incorporate fallback techniques to your SVG maps to load them on a browser without SVG support. What you get is a win-win situation where modern browsers can render the map in a vector format, while those who still use ancient browsers can still see your maps as PNGs.

Great minds have already gone ahead and built libraries to help you easily render your maps in SVG.

JQVMAP

JQVMAP is a jQuery based plugin that allows you to render SVG maps, also providing legacy support for older browsers.

Polymaps

The folks over at Stamen Design and SimpleGeo have built Polymaps, a very nice JavaScript library that helps you develop SVG based mapping applications.

Kartograph

Kartograph is a framework to build interactive mapping applications, rendering maps in SVG. Where Kartograph is unique is that  it provides libraries in Python and JavaScript to help you create interactive mapping applications off the bat.

D3 (Data Driven Documents)

D3 is more of a JavaScript library for visualization than rendering maps, but you can render maps using the library, if you are so inclined.

SVG is here to stay, and it does a better job of rendering maps than images do. Treat your maps with respect and start rendering them in SVG.