example/leaflet.html

<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <title></title>
        <link rel="stylesheet" type="text/css" href="http://service.ihned.cz/js/tooltip/v1.1.2.css" />
        <link rel="stylesheet" href="http://service.ihned.cz/js/leaflet/v0.6.4.css" />
        <script src='http://service.ihned.cz/js/jquery.min.js'></script>
        <script src='http://service.ihned.cz/js/leaflet/v0.6.4.js'></script>
        <script src='http://service.ihned.cz/js/leaflet/utfgrid.min.js'></script>
        <script src="http://service.ihned.cz/js/tooltip/v1.1.2.min.js"></script>
        <style>
            #map {
                position: absolute;
                top: 0px;
                left: 0px;
                bottom: 0px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map">
        </div>
        <script>
            var tooltip = new Tooltip();
            var map = L.map('map', {
                minZoom: 6,
                maxZoom: 6,
                zoom: 6,
                center: [49.7, 15.5]
            });
            var svgMapper = L.tileLayer('./output/{z}/{x}/{y}.png').addTo(map);
            var utfGrid = new L.UtfGrid('./output/{z}/{x}/{y}.json', {
                useJsonP: false
            });
            map.addLayer(utfGrid);
            var osmImagery = L.tileLayer("http://ihned-mapy.s3.amazonaws.com/desaturized/{z}/{x}/{y}.png", {opacity: 0.3, attribution: 'map data &copy; OpenStreetMap contributors, imagery <a target="_blank" href="http://ihned.cz">IHNED.cz</a>'}).addTo(map);
            L.control.layers(null, {
                "SVG Mapper output": svgMapper,
                "OSM Imagery": osmImagery
            }).addTo(map);
            utfGrid.on('mouseover', function (e) {
                var str = e.data;
                tooltip.display(str);
            });
            utfGrid.on('mouseout', function (e) {
                tooltip.hide();
            });

        </script>
    </body>
</html>