20

I'm trying to add a layer manually to a vector layer with javascript. I can't seem to determine why this is failing:

http://jsfiddle.net/Kieveli/f4t6n6v1/4/

I've tried sane coordinates like 16,22, and big ones to match the view's xy values. I get a javascript error from ol3 : TypeError: b.Q is not a function.

HTML:

<div id="map" class="map"></div>

Javascript:

var vectorSource = new ol.source.Vector({});

var map = new ol.Map({
  layers: [
      new ol.layer.Tile({
          source: new ol.source.MapQuest({layer: 'sat'})
      }),
      new ol.layer.Vector({
          source: vectorSource
      })
  ],
  target: 'map',
  view: new ol.View({
    center: [-11000000, 4600000],
    zoom: 4
  })
});

var thing = new ol.geom.Polygon( [ [16000000,22000000],[44000000,55000000],[88000000,90000000] ] );
vectorSource.addFeature( thing );
3
  • With ol3-debug.js, I get "AssertionError: Failure: unsupported stride: undefined"
    – Kieveli
    Commented Jul 2, 2015 at 13:41
  • 2
    You're trying to add a geometry to the source. Wrap it in an ol.Feature first. Commented Jul 2, 2015 at 14:04
  • 1
    Nice! I was also missing the conversion from lat/long to y/x. Updating the fiddle: jsfiddle.net/Kieveli/f4t6n6v1/7
    – Kieveli
    Commented Jul 2, 2015 at 14:47

1 Answer 1

31

As Gabor Farkas said, I was adding the geometry and not a feature to the source. I was also missing [] on the coordinates to the geometry, and wasn't converting properly. Outside of here, I was using lat/long as x/y instead of y/x. Updated fiddle:

http://jsfiddle.net/Kieveli/f4t6n6v1/7/

HTML:

<div id="map" class="map"></div>

JAVASCRIPT:

var vectorSource = new ol.source.Vector({});

var map = new ol.Map({
  layers: [
      new ol.layer.Tile({
          source: new ol.source.MapQuest({layer: 'sat'})
      }),
      new ol.layer.Vector({
          source: vectorSource
      })
  ],
  target: 'map',
  view: new ol.View({
    center: [-11000000, 4600000],
    zoom: 4
  })
});

var thing = new ol.geom.Polygon( [[
    ol.proj.transform([-16,-22], 'EPSG:4326', 'EPSG:3857'),
    ol.proj.transform([-44,-55], 'EPSG:4326', 'EPSG:3857'),
    ol.proj.transform([-88,75], 'EPSG:4326', 'EPSG:3857')
]]);
var featurething = new ol.Feature({
    name: "Thing",
    geometry: thing
});
vectorSource.addFeature( featurething );

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.