[GIS] How to display UtfGrid info

leafletutfgrid

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:

http://build-failed.blogspot.com/2012/03/custom-map-tiles-part-2-tilemill.html.

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

HTML

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

Java

    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);
        tilesLayer.setOpacity(0.7);
        map.addLayer(tilesLayer);
        var utfGrid = new L.UtfGrid('http:/localhost/GP_Un_Lable/{z}/{x}/{y}.grid.json?callback={cb}');
        map.addLayer(utfGrid);
            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";
            });

Best Answer

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);
Related Question