5

I run GeoServer 2.10.0 powered by a vector tiles plugin (geoserver-2.10-SNAPSHOT-vectortiles-plugin.zip) on Ubuntu Server 16.04.

Following this official tutorial I tried to visualize a simple map in MapBox Vector (MVT) format by OpenLayers 3. I used countries shapefile as input and I can check it works fine in the GeoServer layer preview (as a wms-layer).

GeoWebCache is serving this layer in application/x-protobuf;type=mapbox-vector format: enter image description here

If I preview the layer in GWC as mapbox-vector, I get 'broken' tiles. Nonetheless I can click by mouse somewhere on an empty tile and it gives me attributes of a feature: enter image description here

I decided to move on and continued with the tutorial. When I open the resulting html page from the tutorial in Chrome I see no map, however if I look in Chrome DevTools panel, I see that tiles are actually loaded and there are no error messages in the console: enter image description here

I guess something is wrong with rendering the layer but it looks correct in the JavaScript.

<!DOCTYPE html -->
<html>
<head>
  <title>Vector tiles</title>
  <script src="ol.js"></script
  <link rel="stylesheet" href="ol.css">
  <style>
    html, body {
      font-family: sans-serif;
      width: 100%;
    }
    .map {
      height: 500px;
      width: 100%;
    }
  </style>
</head>
<body>
  <h3>Mapbox Protobuf - vector tiles</h3>
  <div id="map" class="map"></div>
  <script>

  var style_simple = new ol.style.Style({
    fill: new ol.style.Fill({color: '#add8e6'}),
    stroke: new ol.style.Stroke({color: '#880000', width: 2})
  });

  function simpleStyle(feature) {
    return style_simple;
  }

  var layer = 'opengeo:countries';
  var projection_epsg_no = '900913';
  var map = new ol.Map({
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    }),
    layers: [new ol.layer.VectorTile({
      style: simpleStyle,
      source: new ol.source.VectorTile({
        tilePixelRatio: 1, // oversampling when > 1
        tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
        format: new ol.format.MVT(),
        url: '/geoserver/gwc/service/tms/1.0.0/' + layer +
            '@EPSG%3A'+projection_epsg_no+'@pbf/{z}/{x}/{-y}.pbf'
      })
    })]
  });
  </script>
</body>
</html>

I looked in the GeoServer log and I found a mention of the GetMap request:

2017-01-26 14:12:46,505 INFO [geoserver.wms] - 
Request: getMap
    BgColor = java.awt.Color[r=255,g=255,b=255]
    Transparent = true
    StartIndex = null
    FormatOptions = {}
    StyleFormat = sld
    RemoteOwsType = null
    RemoteOwsURL = null
    SldBody = null
    ValidateSchema = false
    Sld = null
    StyleUrl = null
    CQLFilter = null
    FeatureId = null
    Env = {}
    Layers = [org.geoserver.wms.MapLayerInfo@ef7f0020]
    MaxFeatures = null
    Interpolations = []
    Tiled = false
    Palette = null
    TilesOrigin = null
    Width = 256
    Height = 256
    Crs = PROJCS["WGS84 / Google Mercator", 
  GEOGCS["WGS 84", 
    DATUM["World Geodetic System 1984", 
      SPHEROID["WGS 84", 6378137.0, 298.257223563, AUTHORITY["EPSG","7030"]], 
      AUTHORITY["EPSG","6326"]], 
    PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], 
    UNIT["degree", 0.017453292519943295], 
    AXIS["Longitude", EAST], 
    AXIS["Latitude", NORTH], 
    AUTHORITY["EPSG","4326"]], 
  PROJECTION["Mercator_1SP"], 
  PARAMETER["semi_minor", 6378137.0], 
  PARAMETER["latitude_of_origin", 0.0], 
  PARAMETER["central_meridian", 0.0], 
  PARAMETER["scale_factor", 1.0], 
  PARAMETER["false_easting", 0.0], 
  PARAMETER["false_northing", 0.0], 
  UNIT["m", 1.0], 
  AXIS["x", EAST], 
  AXIS["y", NORTH], 
  AUTHORITY["EPSG","900913"]]
    StyleBody = null
    SldVersion = null
    StyleVersion = null
    ScaleMethod = null
    Exceptions = SE_XML
    FeatureVersion = null
    SRS = EPSG:900913
    Elevation = []
    Bbox = SRSEnvelope[1.0018754169999998E7 : 1.2523442712499999E7, 1.0018754169999998E7 : 1.2523442712499999E7]
    ViewParams = null
    Angle = 0.0
    Styles = [StyleImpl[ name=polygon_vectortile]]
    Time = []
    Filter = null
    Buffer = 0
    Format = application/x-protobuf;type=mapbox-vector
    Filters = null
    BaseUrl = http://localhost:8080/geoserver/
    RequestCharset = UTF-8
    RawKvp = {FORMAT=application/x-protobuf;type=mapbox-vector, STYLES=polygon_vectortile, WIDTH=256, HEIGHT=256, LAYERS=opengeo:countries, EXCEPTIONS=SE_XML, GWC_SEED_INTERCEPT=true, REQUEST=GetMap, SRS=EPSG:900913, BBOX=10018754.169999998,10018754.169999998,12523442.712499999,12523442.712499999, VERSION=1.1.1, SERVICE=WMS, TRANSPARENT=true}
    Get = true
    Version = 1.1.1
    Request = GetMap

How can I make my map visible?

  • 1
    Not sure about the main part of the question, but support for displaying vector tiles on the GWC demo page was added in GWC 1.11 (GeoServer 2.11). There was also an ambiguity in the MB VT spec that led to GeoServer tiles not working right in MapBox client software. This was just fixed recently so it's only available in the nightly builds of GeoServer but it will be available in future releases (2.14.1 should be out in a little over a week from this comment) – smithkm Nov 9 '18 at 4:22

Your Answer

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

Browse other questions tagged or ask your own question.