First off sorry if this question have been asked, I have been looking for an answer for some time now but can't find any solution.

I have created a .mbtiles file with Tilemill, extracted the .png and the .grid.json files using mbutil. I used IIS to display the PNG tiles using Leaflet. All that works great, except for the utfgrid(.grid.json)info isn't showing.

Do I need Wax?

I have tried Wax but with no success. Any suggestions will be immensely helpful.

Most of the info I have comes from:


My map code is shown below, the info for each grid comes from the key "Un"


<h2 id="UtfGridTextHere">.....<h2/>


    var map = L.map('map').setView([-28.7640911,24.302625], 6)//Load my tile layer
        var tilesUrl = 'http:/localhost/GP_Un_Lable/{z}/{x}/{y}.png',
        tilesLayer = new L.TileLayer(tilesUrl);
        var utfGrid = new L.UtfGrid('http:/localhost/GP_Un_Lable/{z}/{x}/{y}.grid.json?callback={cb}');
            utfGrid.on('mouseover', function (e) {
                if (e.data) {
                    document.getElementById("UtfGridTextHere").innerHTML = e.data.Un;
                } else {
                    document.getElementById("UtfGridTextHere").innerHTML = "nothing";
                //console.log('mouseover: ' + e.data);
            utfGrid.on('mouseout', function (e) {
                document.getElementById("UtfGridTextHere").innerHTML = "nothing";

1 Answer 1


You may need to look at the second step. The tutorial started you out with just creating the tiles. Then tutorial added support for the "hit grid" created by the "Teaser" tab in TileMill. The teaser step created another part of the .mbtile spec.

The mbutil utility is used to extract either the grid or tiles. In the second run, it extracts both. In the change to the second code, he shows where he added both references to the .png files and the .grid.json files. The other thing that his path shows me is the 1.0.0 reference. This means that you are using the TMS directory path to display the data.

The other part of the code that you are missing is the formatter section that formats how the .json file will be displayed.

The glue that you are missing from his explanation is that TMS is used to display information without a web server. At least that's how I have used the TMS format before. You say that you have an IIS web server. The .mbtiles format is just a sqlite3 database if you did not know this. Look up some of the existing tile servers. Hook up a version of a mbtiles server that works for you in your web server environment. Then just use the .mbtiles database. That way you do not have to haul around a bizzlion files.

var tilejson = {
    tilejson: '1.0.0',
    tiles: ['http://localhost/tiles/freguesias/1.0.0/Freguesias/{z}/{x}/{y}.png'],
    grids: ['http://localhost/tiles/freguesias/1.0.0/Freguesias/{z}/{x}/{y}.grid.json'],
    formatter: function (options, data) { return "CODE: " + data.DICOFRE }

map = new L.Map('map');
map.addLayer(new wax.leaf.connector(tilejson));
map.setView(new L.LatLng(39.5,-5.0), 6);

wax.leaf.interaction(map, tilejson);
  • Wow thanks, I had a look at the last section in the blog but because I'm new to java and web mapping, I didn't quite understand every thing 100%. But your explanation is great, thanks for the help I really appreciate it.
    – Jcstay
    Nov 10, 2014 at 5:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.