0

I've created the mbtiles file with tilemill and exported it on my ubuntu webfolder with the following command:

 mb-util --scheme=xyz /folder/tile.mbtiles /var/www/html/my-tiles

To get utfgrid information in my leaflet map itself I used danzels utfgrid plugin and the following code which is a nice copy of danzels example:

var tiles = L.tileLayer('http://localhost/my-tiles/{z}/{x}/{y}.png', {
            maxZoom: 9,
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        });

        var utfGrid = new L.UtfGrid('http://localhost/my-tiles/{z}/{x}/{y}.grid.json');

        var map = L.map('map')
                .setView([50,10], 5)
                .addLayer(tiles)
                .addLayer(utfGrid);

A common error is written to the console:

ReferenceError: grid is not defined

So I've checke my grid.json files and they have the following coarse structure:

grid({"keys": ["", "6402"], "data": {"6402": {"namen": "cool name", "attrib 1": 0.123456}}, "grid": [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " !!! ", " !!!!! ", " !!!!!!! ", " !!!!!!!! ", " !!!!!!!!! ", " !!!! !!!! ", " !! !!!!! ", " !!! !!!!! ", " ! ! ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]});

Which looks fine for me. So what am i missing? In the example from milkator he is using:

        var utfGrid = new L.UtfGrid('http://{s}.tiles.mapbox.com/v3/milkator.press_freedom/{z}/{x}/{y}.grid.json?callback={cb}') 

Is there something to keep in mind using mb-util or anything else? My goal is to get the infromation from the UTF grid in a info box...

1

The proper way in this example is to create the tiles with the command

mb-util --grid_callback="" --scheme=xyz /folder/tile.mbtiles /var/www/html/my-tiles

where "--scheme=xyz" is the standard. Furthermore make sure to call both the index.html as well as the utfgrid tiles from the same "server". So make sure to call

http://localhost/index.html 

in your browser when you use

var utfGrid = new L.UtfGrid('http://localhost/my-tiles/{z}/{x}/{y}.grid.json'); 

in your script.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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