Monday, June 3, 2013

Creating a zoomable map of tweets with R

Languages tweeted around Germany: red, blue, green, 
yellow, grey are for German, French, English, Dutch and 
other  respectively. See here for a zoomable version.
Motivated by the project twitter languages of New York I wanted to do map of tweets too.
For a different purpose (sentiment analysis) I am collecting tweets around Germany anyway. In another blog entry I describe how I collected the data.

With the package openmap, it is easy to create a map of the languages tweeted. Such a map is shown on the left. However, in post-google-map times if the user sees a map, he just starts to spin his mouse wheel to zoom into the map. Lets see how one can create such a map.

Creating the map

I assume that the data is in the following format, I need coordinates and colors. See the blog how to extract the data from the json-files and do the color coding.

>head( lat/long data approx. 300k
       long      lat  lang
1  4.901844 52.37762    en
2  6.255914 52.51602    nl
3 13.736128 51.04736    en


> head(cols)#The colors (appox. 300k)

[1] "#FF000080" "#00FF0080" "#0000FF80" ...

Zoomable maps are created with socalled tiles. You start with one resolution (zoomlevel), say zoomlevel 4. You create one tile. In the next zoom level this tile is split in 4 tiles and so on. These tiles are have to be placed in a certain directory structure. To create a zoomable map you simply have to create this directory structure with those tiles. There are plenty of javascript libraries with take all those tiles and create a map. I use one called leaflet (see below). Usually these libraries require 256x256 png images.

So lets see how this works. The region of the above figure and zoom-level 4 corresponds to the path 4/8/5.png. For the next zoom level 5 one has to create the 4 files 5/16/10.png, 5/16/11.png, 5/17/10.png and 5/17/12.png. The directory corresponds to x-axis (longitude) and the file name to the y-axis (latitude), the figure below shows how the split is done.

The tile on the left is split into 4 tiles shown on the right.
In the next zoom level we would have to render 16 images starting with 6\32\20.png.

The script below starts with the tile 4\8\5.png and recursively creates the images up to the desired zoom levels. To get the bounding boxes in terms of longitude and latitude the function tile2boundingBox is used. The maps are obtained using the map function of the OpenStreetMap package. The points have to be transformed  using projectMercator(lat = sd$lat, lon = sd$lon)and can then be drawn using e.g. the points function.

Once you have created the tiles, its just a few lines of javascript to have the maps ready. See below for the index.html file using leaftlet library.

The main file creating the tile

The java script part


  1. I just see the post i am so happy the post of information's.So I have really enjoyed and reading your blogs for these posts.Any way I’ll be subscribing to your feed and I hope you post again soon.
    AWS Training in Chennai

  2. This comment has been removed by the author.

  3. Thanks for your great and helpful presentation I like your good service.I always appreciate your post.That is very interesting I love reading and I am always searching for informative information like this.Well written article Thank You for Sharing with Us project management courses in chennai |pmp training class in chennai | pmp training fee | project management training certification | project management training in chennai | project management certification online

  4. I have read your blog its very attractive and impressive. I like it your blog.

  5. Welcome to Protect your data, devices, and your family With the development of the digital world, online protection is crucial. It is extremely important to protect your PCs, Mac, computers as well as mobile devices and tablets with This can be done with the help of effective internet security and anti-virus products from that safeguards all devices used on digital platforms.

    For more information:

    When you buy a new HP printer, you try to connect it using the user manual. The manual provided by the manufacturer may not be in detail. Hence, our technical experts have given simple instructions that guide you through the HP Printer setup and troubleshooting issues if any.

    For more information:

  6. Great Post with lots of useful informations. Excellent blog very much interesting...
    SAP Training in Chennai | AWS Training in Chennai | SAP Training | AWS Training

  7. Great Explanation with lots of useful information about aws and great explanation in this blog.

    AWS Training in Chennai | SAP Training in Chennai

  8. Best Corporate Video Production Company in Bangalore and top Explainer Video Company in Bangalore , 3d, 2d Animation Video Makers in Chennai

    Some excellent tips in here

  9. Really an awesome article,
    love reading this as it was very attractive and helpful.
    Please keep posting such a nice article.
    Top College in Meerut

  10. Thank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very useful for me.
    Reactjs Training in Chennai |
    Best Reactjs Training Institute in Chennai |
    Reactjs course in Chennai

  11. Hire ReactJS Developers from CronJ to leverage 9+ years of React handling and 15+ industrial experience at just $8 per hour!

    hire reactjs developers
    hire react developer