0

I have a layer group (mapLayers) which contains multiple layers. I want to add a VectorLayer to the map so I will be able to draw features on the map. I am able to add my layers into the map perfectly fine, but when I include the variable of VectorLayer (vector) into the new map, everything disappears. I have also attempted to include the VectorLayer inside the layer group but this also makes the map disappear.

Any idea why this might be happening and how I can include the VectorLayer in the map without everything disappearing?

const mapLayers = [
  new TileLayer({
    source: new OSM(),
  }),
    new ImageLayer({
    source: new ImageWMS({
      url: 'http://localhost:8085/geoserver/ny/wms',
      params: {'LAYERS': 'ny:buildings'},
      ratio: 1,
      serverType: 'geoserver',
    }),
  }), 
      new ImageLayer({
    source: new ImageWMS({
      url: 'http://localhost:8085/geoserver/ny/wms',
      params: {'LAYERS': 'ny:streets'},
      ratio: 1,
      serverType: 'geoserver',
    }),
];

const source = new VectorSource();
const vector = new VectorLayer({
  source: source,
  style: {
    'fill-color': 'rgba(255, 255, 255, 0.2)',
    'stroke-color': '#ffcc33',
    'stroke-width': 2,
    'circle-radius': 7,
    'circle-fill-color': '#ffcc33',
  },
});

const map = new Map({
  layers: [mapLayers, vector],
  target: 'map',
  view: new View({
    center: [1468661, 7500078],
    zoom: 12,
  }),
});

In the example code above, everything disappears. However, if I just remove the vector from const map layers (example below), everything shows up fine, but I am not consequently able to retain/save the drawn vector features on a map.

const map = new Map({
  layers: mapLayers,
  target: 'map',
1
  • @TomazicM this worked perfectly! If you post this comment into a post, I can approve it as a solution. Thank you very much.
    – HSF
    Jan 4 at 20:41

1 Answer 1

0

mapLayers is an array of layers, so you cannot combine it with single layer vector in expression [mapLayers, vector]. To get combined array of layers, you can for example use mapLayers.concat([vector]).

So relevant part of the code would then look like this:

const map = new Map({
  layers: mapLayers.concat([vector]),
  target: 'map',
  view: new View({
    center: [1468661, 7500078],
    zoom: 12,
  }),
});

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.