2

I'm having troubles using utfgrid module with openlayers. The implementation on Mapserver's side is quite simple, even if i have doubts about the imagetype :

MAP
    IMAGETYPE   UTFGRID
    SIZE        2000 2000
    CONFIG "MS_ERRORFILE" "/ms4w/tmp/ms_error.txt"
    #DEBUG 4
    EXTENT -176.197 -31.0869 181.47 81.8381
    NAME "allexmaple"

    PROJECTION
        "init=epsg:4326"
    END 
    QUERYMAP
        STATUS ON
    END
    OUTPUTFORMAT
        NAME "utfgrid"
        DRIVER UTFGRID
        MIMETYPE "application/json"
        EXTENSION "json"
        FORMATOPTION "UTFRESOLUTION=4"
        FORMATOPTION "DUPLICATES=false"
    END
    WEB
        IMAGEPATH "tmp/"
        IMAGEURL "tmp/"
    END
    SYMBOL
        NAME "mysymbol"
        TYPE pixmap
        ANCHORPOINT 0.5 0.5
        IMAGE  "icons/mysymbol.png"
    END 

    LAYER
        TOLERANCE 10
        CONNECTIONTYPE postgis 
        NAME "example"
        CONNECTION "host=127.0.0.1 dbname=ais_data user=postgres password=admin port=5432"
        DATA "geom from mytable using srid=4326"
        STATUS ON
        TYPE POINT
        UTFITEM   "id"
        UTFDATA   "{\"id\":\"[id]\",\"name\":\"[name]\"}"
        TEMPLATE 'query.html'
        HEADER 'header.html'
        FOOTER 'footer.html'
        CLASSITEM "ct"

        CLASS
            EXPRESSION "mysymbol"
            STYLE
                ANGLE [angle]
                SYMBOL 'mysymbol' 
            END # style 
        END # class 
    END
END

Openlayers, on the other hand, doesn't have an efficient example. I don't know what to provide in my URL. Here's what I tried:

var gridSource = new ol.source.TileUTFGrid({
       url: 'http://localhost:5000/cgi-bin/mapserv.exe?map=/ms4w/apps/tutorial/htdocs/essai.map&layers=example&tiled=true&mode=map&type=utfgrid&format=application/json'
      });
 var mySuperLayer = new ol.layer.Tile({
           source: gridSource
      });

But nothing appears and my URL stays in pending until timeout

2
  • have you checked the log file for mapserver ?
    – Shiko
    Commented Nov 1, 2016 at 2:16
  • @Shiko Actually I thought the tileJson was generated by mapserver. Now I have a tileJson but still doesn't work
    – So4ne
    Commented Nov 2, 2016 at 13:53

2 Answers 2

3
+100

ol.source.TileUTFGrid is layer source for UTFGrid interaction data loaded from TileJSON format. url option of TileUTFGrid should point to json with data in TileJSON format. In your case it can be simple tile.json file created manually:

{
    "version": "2.1.0",
    "tiles": [
        "http://localhost:5000/cgi-bin/mapserv.exe?map=/ms4w/apps/tutorial/htdocs/essai.map&layers=example&mode=tile&tile={x}+{y}+{z}&tilemode=gmap&map.imagetype=png"
    ],
    "grids": [
        "http://localhost:5000/cgi-bin/mapserv.exe?map=/ms4w/apps/tutorial/htdocs/essai.map&layers=example&mode=tile&tile={x}+{y}+{z}&tilemode=gmap&map.imagetype=utfgrid"
     ]
}

Don't forget add to mapfile the following section:

OUTPUTFORMAT
    NAME          "png"
    EXTENSION     "png"
    MIMETYPE      "image/png"
    DRIVER         AGG/PNG
    IMAGEMODE      RGBA
    FORMATOPTION  "INTERLACE=OFF"
END

Connect it to OpenLayers (don't forget to modify view options and path to json file):

var mapLayer = new ol.layer.Tile({
    source: new ol.source.TileJSON({
        url: "http://localhost:5000/tile.json"
    })
});

var gridSource = new ol.source.TileUTFGrid({
    url: "http://localhost:5000/tile.json"
});

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

var map = new ol.Map({
    layers: [mapLayer, gridLayer],
    target: "map",
    view: new ol.View({
        center: [9449777.3, 6914882.51],
        zoom: 7
    });
});

map.on("click", function(evt) {
    var viewResolution = map.getView().getResolution();

    gridSource.forDataAtCoordinateAndResolution(evt.coordinate, viewResolution,
        function (data) { console.log(data); }
    );
});

It looks like UTFGrid doesn't work in Windows, see #5432. In Linux all works fine in my case.

7
  • I could start by creating the tileJSON first... haha thank you for your answer, as soon as #5432 is solved I'll give it a try
    – So4ne
    Commented Nov 2, 2016 at 8:22
  • Are you faced with the same issue?
    – drnextgis
    Commented Nov 2, 2016 at 9:25
  • I can't tell as I have to create a tile JSON first. At the time I'm trying to finish my version without utfgrid, but requests to the server via getGetFeatureInfoUrl are not as quick as expected (like 2 seconds) so that's why I'll go to utfGrid after.
    – So4ne
    Commented Nov 2, 2016 at 9:54
  • Ok so if I had what you wrote, it gives me "Unable to select IMAGETYPE `utfgrid'." . If I change the output format like it's specified in mapserver I get a strange utfgrid imgur.com/a/MxGGD
    – So4ne
    Commented Nov 2, 2016 at 13:34
  • 1
    Here is my mapfile (PostGIS instance is public accessible so you can to try it): pastebin.com/8UrvL0w8
    – drnextgis
    Commented Nov 2, 2016 at 16:52
2

More an addition to @drnextgis than a complete answer to your question.

To avoid creating a tile.json file, you can replace the:

var gridSource = new ol.source.TileUTFGrid({
  url: "http://localhost:5000/tile.json"
});

with:

var gridSource = new ol.source.TileUTFGrid({
  tileJSON: {
    "version": "2.1.0",
    "grids": [
      "http://localhost:5000/cgi-bin/mapserv.exe?map=/ms4w/apps/tutorial/htdocs/essai.map&layers=example&mode=tile&tile={x}+{y}+{z}&tilemode=gmap&map.imagetype=utfgrid"
    ]
  }
});

It's due to addition for supporting GeoServer more easily, without an intermediate file (See this PR for details https://github.com/openlayers/ol3/pull/5120)

1
  • Thanks for that, I'm kind of new in Mapserver's world, it's nice to have good habits from the start :) actually I can't make my utfgrid due to #5432 like @drnextgis said. So... another time !
    – So4ne
    Commented Nov 3, 2016 at 20:47

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.