Tilemill- Multiple layers, zoom levels and markers

Tile-mill is a great place to design map visualizations. With basic CSS knowledge, you can do all kinds of things from colouring various points to changing sizes of objects to designing cool legends and tooltips. Here’s a tutorial on creating multiple layers at different zoom layers (let us start with just 2 layers) on tile-mill and uploading it to mapbox, while using different png images as markers. But until then let me share some of the best hacks while dealing with situations like this.

Situation: We want to make a map that tells us total centuries that Sachin scored in a country (zoom level = 2). Zooming in more closely should show more details about the city/ ground and details about each cricket match.

https://a.tiles.mapbox.com/v3/socialcops.i26k16eg/page.html?secure=1#2/39.0/62.2

Here are some hacks for beginners:

-  Keep it simple (and if you are using different excel/csv sheets), treat them as 2 different projects. I used only one project because this dataset was rather simple.

-  Ensure you include the zoom levels in your css code (especially if you want the size of the markers to look bigger as you zoom in)

-  Exporting will take longer if you don’t reduce the bounds. Also not including a map background (remove the Map and #countries CSS code) will ensure faster exporting into MBtiles and uploading to Mapbox.

So the steps I followed to get a map like this are as follows:

First, ensure you have the data neatly arranged in an excel spreadsheet with the latitude and longitudes. Save it as a csv file.

Now you have a small marker at every one of those points but to personalise them and change them to a png (like the standing sachin picture I used) you need to use the following functions:

Marker-file: url(“Location”);  This code will retrieve the png and replace the markers

Note that “Total centuries” is a field (number type) on my csv file. So writing a command like the one above, will transform the png size, based on the number at each point.

Now click on the templates icon to create a tooltip. This can be ither on first click or on hover. I prefer hover, so then I would choose the ‘teaser’ tab and craft out whatever you want displayed.

Now that we are done with this layer, block out the background by deleting the code and export only the zoom levels you want (zoom 1-4) and choose the bound carefully to minimise the size of the file. Exporting as MBtiles is a better idea than uploading directly as it ensures that you always have a copy of the file without taking up the limited space available on mapbox.

Now we want cricket balls to be the markers at every stadium in the world in which Sachin scored a century and we want this to show as we zoom in closer (zoom>=5). Follow the same procedures mentioned above. But click on the ‘eye’ in the layers icon on tilemill, to toggle the visibility of the first layer, if you don’t want it to be seen anymore. 

Go to teaser and change the layer as well as the content  to what you want displayed at the individual stadium level.

Once again export as MBtile. Don’t forget to change the bounds and zoom levels (zoom 5-8). For me tilemill automatically told me that the size of the MBtiles should be atleast 10. So choose accordingly. Also if you used the same project for both laers, don’t forget to change the filename (Sachin2) etc. so that you don’t mix up the 2 files.

Now that we have 2 different MBtiles files, at different zoom levels, we can go to mapbox, sign in and choose the data tab on the top. Upload the 2 MBtiles you just created. Now choose the option of creating a new project. Once the map opens up, click on Data, choose layers and select the 2 files you just uploaded. Now select Style and make changes to the look and design of the map.

Zoom in and out and your markers should change. Viola you are done! A beautiful map has been created. 

Infogr.am: A boon or a pain

      image

Infogr.am is one of the easiest infographic making tool available in the web today. Moreover if you are the kind of person who is driven by data and love to make complicated but cute graphs in your infographics then this is the right tool for you. Of course it comes with its own issues. The first time I used Infogr.am I was frustrated by the sheer lack of sophistication in modifying fonts, sizes and colours. But you do tend to get used to it and its simply the best because you don’t need to spend too much time to design. If you have limited time and a great deal of data, it is a brilliant tool.

Personally, one of the things that annoys me the most about infogr.am is that even its pro version has the infogr.am logo in it. Also as far as I know, you cannot hyperlink any of the images or text in the infographic.

Useful hacks when using infogr.am

  • Use pictures and videos if any to illustrate your data
  • Always prepare your data (in excel) before importing it to the infogram
  • For maps and scatter plots where you might want to colour code, it is much easier to just type in the colour code instead of trying to manually choose one for each. It is a cumbersome task no matter what.
  • Resize the pictures to the exact size that you want it to display and then upload it. After that double clicking on the picture and choosing 1:1 will render it to the size you want it to be.
  • Keep it simple
  • Sometimes, the data doesn’t change even in preview. So don’t panic and just refresh the page until it does
  • Centring text is incredibly hard as there is not option so one has to resort to the age old hack of spacing before the text and pushing it to the centre. The problem however is that this is dependent on the size of the post and doesn’t look the same across computers.

What you cannot do on infogr.am:

  • Pictograms are available but there are limited options (only 3). If you want to make an infographic with lots of cute icons then piktochart might be better for you.
  • Arranging text and graphs to your liking might be very hard. First of all you can only place one below the other and adding a new element will place it right at the bottom so shifting it up is a tedious procedure.
  • You cannot remove the infogr.am logo even in the pro version
  • You can only download it as png or pdf in the pro version
  • Its impossible to change text font, size or color. There are limited options for text and you can only choose them
  • You cannot hyperlink text or images

What I love about infogram:

  • Its simple
  • Its easy
  • Its dynamic
  • It has lots of insanely cool graphs that make it impossible for me to stop using infogr.am
  • It looks professional
  • It has an embed link

Overall its a great tool but I really hope they upgrade it soon so that there are more features  to edit the infographics. On the plus side, they are coming up with the World’s first video infographic creator soon (https://infogr.am/video/). That should be pretty exciting!

Meanwhile here’s a look at my latest infogr.am infographic.