0

I'm trying to publish Mapbox vector tiles from my GeoServer using OpenLayers. I'm a total novice when it comes to everything around web mapping, web design etc. I'm using GeoServer deployed locally on my Windows 10 machine through Tomcat. I´ve gone through this official tutorial, but pointing to my own data, code looking this this:

<!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: 1
    })
  });

  function simpleStyle(feature) {
    return style_simple;
  }

  var layer = 'SKS:sksbiotopskydd';
  var projection_epsg_no = '3006';
  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>

When I try to open the map, the data does not display, and inspecting the page shows the error message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///geoserver/gwc/service/tms/1.0.0/SKS:sksbiotopskydd@EPSG%3A3006@pbf/2/0/2.pbf. (Reason: CORS request not http).

I´ve tried to read up on CORS, but not sure I totally grasp the concept. I've also tried activating CORS in Tomcat (by uncommenting the filters in the web.xml), but that doesn´t help (gives the same error message). What do I need to do to get this working?

1 Answer 1

1

If you read the error message there is a clue "Reason: CORS request not http" - you are accessing a file not a web page so the Same Origin Policy disallows the request.

Make sure your web request starts with http://localhost (or other host).

4
  • I tried that (think I did that before too while bashing my head on this), now I instead get the error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/geoserver/gwc/service/tms/1.0.0/SKS:sksbiotopskydd@EPSG%3A3006@pbf/2/3/1.pbf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). I just realised too, I only activated CORS in the Geoserver XML, do I need to do it in Tomcat in some way too? Do I even need CORS activated to accomplish this?
    – Emanuelv
    Commented Dec 17, 2020 at 14:11
  • are you setting the CORS header 'Access-Control-Allow-Origin'? because Tomcat thinks it is missing.
    – Ian Turton
    Commented Dec 17, 2020 at 14:35
  • Is this something I'm supposed to do in the Tomcat web.xml or in the Geoserver web.xml? I´ve uncommented both cors-related filters I could find mentioned in the Geoserver web.xml. Sorry if these are trivial questions, but I found it´s kind of hard to get over the first threshold on this without much previous knowledge on the topic...
    – Emanuelv
    Commented Dec 17, 2020 at 14:45
  • NVM, I got rid id of the CORS error now by modifying the web.xml. However, now I get a 400: Bad request error instead, which I guess would have to do with the url to my data? I'm starting to feel I just won´t be able to solve this myself...
    – Emanuelv
    Commented Dec 17, 2020 at 15:20

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.