1

I'm trying to create a little demo to show the data from our API into a map but I cannot see my layer

Here my code, is just basic for the moment, we just need to display the data:

const projection = new ol.proj.Projection({
  code: 'EPSG:27700',
  getPointResolution: (r) => {
    return r
  },
  units: 'm'
})

var view = new ol.View({
  projection: projection,
  center: [383000, 398000],
  extent: [0, 0, 700000, 1250000],
  resolution: 28,
  resolutions: [140, 70, 28, 14, 7, 2.8, 1.4, 0.7],
})

var maplayer = new ol.layer.Tile({
  extent: [0, 0, 700000, 1250000],
  preload: Infinity,
  source: new ol.source.TileWMS({
    url: 'https://www.buchananmapping.co.uk/mapcache/?',
    params: {
      'LAYERS': 'bccache2',
      'TILED': true
    },
    ratio: 1,
    projection: 'EPSG:27700',
    tileGrid: new ol.tilegrid.TileGrid({
      resolutions: [140, 70, 28, 14, 7, 2.8, 1.4, 0.7],
      extent: [0, 0, 700000, 1250000],
      tileSize: [128, 128]
    })
  })
})

var appSource = new ol.source.Vector({
  projection: 'EPSG:27700',
  format: new ol.format.GeoJSON()
})

var appLayer = new ol.layer.Vector({
  source: appSource,
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.1)'
    }),
    stroke: new ol.style.Stroke({
      color: 'rgb(85, 172, 238)',
      width: 2
    })
  })
})

var map = new ol.Map({
  target: 'map',
  layers: [
    appLayer,
    maplayer
  ],
  view: view
})

  $.ajax({
    type: 'GET',
    url: 'https://www.traffwebdev.uk/tro/v1/restrictions?epsg=&x=383666+&y=398197&area=&radius=500&output=',
    dataType: 'json',
    success: function (data) {
      // reads and converts GeoJSon to Feature Object
      var features = (new ol.format.GeoJSON()).readFeatures(data.geometry)
      appSource.addFeatures(features)
    }
  })

Both my map and GeoJSON use EPSG:27700 but I cannot see any features in the map, I can see that the call to the API is made.

Sorry I don't have a demo but if you copy the whole code is working, there is no other code a part from that.

1

If you take a look at actual GeoJSON data, you'll see that it's coded in EPSG:4326, so reading features statement should be:

var features = (new ol.format.GeoJSON()).readFeatures(data.geometry, {dataProjection: 'EPSG:4326', featureProjection: 'EPSG:27700'});

You'll also have to change order of layers in map declaration, otherwise features will be covered by base map:

var map = new ol.Map({
  target: 'map',
  layers: [
    maplayer,
    appLayer
  ],
  view: view
});
  • thanks, we didn't realise that we actually store the feature in the DB in EPSG:4326, now it works properly. – Sebastiano Sep 25 at 15:20

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.