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 );
PolyGeo
  • 65,136
  • 29
  • 109
  • 338
Kieveli
  • 620
  • 1
  • 5
  • 12

1 Answers1

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 );
Kieveli
  • 620
  • 1
  • 5
  • 12