Generate UTFGrid Tiles

#!/bin/bash
rm -r utf
mkdir utf

geoc tile generate -l "type=utfgrid file=utf" \
    -m "layertype=layer file=naturalearth.gpkg layername=countries style=countries.sld" \
    -f "NAME" \
    -s 0 \
    -e 4 \
    -v

rm -r tms
mkdir tms

geoc tile generate -l "type=tms file=tms format=jpeg" \
    -m "layertype=layer file=naturalearth.gpkg layername=ocean style=ocean.sld" \
    -m "layertype=layer file=naturalearth.gpkg layername=countries style=countries.sld" \
    -s 0 \
    -e 4 \
    -v \
    -t "4,4"

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" type="text/javascript"></script>
    <title>geoc UTFGrid Example</title>
  </head>
  <body>
    <h2>geoc UTFGrid Example</h2>
    <div id="map" class="map"></div>
    <div style="display: none;">
      <!-- Overlay with the country info -->
      <div id="country-info">
        <div id="country-name">&nbsp;</div>
      </div>
    </div>
    <script type="text/javascript">

      var tms = new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: 'http://localhost:8000/tms/{z}/{x}/{-y}.jpeg',
          wrapX: false,
          noWrap: true
        })
      });

      var gridSource = new ol.source.UTFGrid({
        tileJSON: {
          tilejson: "2.2.0",
          grids: [ 'http://localhost:8000/utf/{z}/{x}/{y}.grid.json' ]
        }
      });

      var utfGrid = new ol.layer.Tile({
        source: gridSource
      });

      var view = new ol.View({
        center: [0, 0],
        zoom: 1
      });

      var mapElement =  document.getElementById('map');
      var map = new ol.Map({
          target: mapElement,
          layers: [
            tms,
            utfGrid
          ],
          view: view
      });

      var infoElement = document.getElementById('country-info');
      var nameElement = document.getElementById('country-name');

      var infoOverlay = new ol.Overlay({
        element: infoElement,
        offset: [15, 15],
        stopEvent: false
      });
      map.addOverlay(infoOverlay);

      var displayCountryInfo = function(coordinate) {
        var viewResolution = view.getResolution();
        gridSource.forDataAtCoordinateAndResolution(coordinate, viewResolution, function(data) {
          mapElement.style.cursor = data ? 'pointer' : '';
          if (data) {
            nameElement.innerHTML = data['NAME'];
          }
          infoOverlay.setPosition(data ? coordinate : undefined);
        });
      };

      map.on('pointermove', function(evt) {
        if (evt.dragging) {
          return;
        }
        var coordinate = map.getEventCoordinate(evt.originalEvent);
        displayCountryInfo(coordinate);
      });

      map.on('click', function(evt) {
        displayCountryInfo(evt.coordinate);
      });

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