5

I have GeoJSON that happily displays on GeoJson.IO that I am trying to display on a vector layer in an OpenLayers 3 map.

The GeoJSON is in EPSG:4326, the map is in EPSG:3857.

My code is:

view = new ol.View(
{
    // make sure the view doesn't go beyond the 19 zoom levels
    maxZoom: 10,
    projection: "EPSG:3857"
});
map = new ol.Map(
{
    layers: layers,
    controls: ol.control.defaults(),
    interactions: ol.interaction.defaults(
        {
            altShiftDragRotate: false,
            dragPan: true,
            rotate: false
        })
        .extend([new ol.interaction.DragPan(
        {
            kinetic: null
        })]),
    // renderer: CANVAS,
    // Improve user experience by loading tiles while dragging/zooming. Will make
    // zooming choppy on mobile or slow devices.
    loadTilesWhileInteracting: true,
    target: 'map',
    view: view
});
    activationvectorSource = new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            projection: "EPSG:4326"
            });
    activationLayer = new ol.layer.Vector(
    {
        title: 'Activation Boundary',
        source: activationvectorSource,
        style: new ol.style.Style(
        {
          stroke: new ol.style.Stroke(
            {
            color: 'red', width: 2
            })
         })
    });
    map.addLayer(activationLayer);
    activationvectorSource.addFeatures(data);

I know I am missing something obvious, but I simply cannot get it to display

What am I missing?

GeoJSON (if needed):

    {
       "type":"FeatureCollection",
       "features":[
          {
             "type":"Feature",
             "geometry":{
                "type":"Polygon",
                "coordinates":[
                   [
                      [
                         34.628906243797,
                         -3.3379539608193
                      ],
                      [
                         -69.477539050055,
                         -1.4061088351833
                      ],
                      [
                         -70.00488279996,
                         -1.3182430566259
                      ],
                      [
                         -71.191406237248,
                         0.043945308183483
                      ],
                      [
                         -71.191406237248,
                         0.30761570958881
                      ],
                      [
                         44.824218741971,
                         34.813803311646
                      ],
                      [
                         45.527343741845,
                         34.813803311646
                      ],
                      [
                         90.354309065846,
                         23.762723177664
                      ],
                      [
                         125.3814697041,
                         12.280966403201
                      ],
                      [
                         125.51330564158,
                         12.189703801854
                      ],
                      [
                         125.51879880564,
                         12.184334433131
                      ],
                      [
                         125.51879880564,
                         12.17359536978
                      ],
                      [
                         125.4968261494,
                         12.033948161512
                      ],
                      [
                         125.45837400096,
                         11.990965148066
                      ],
                      [
                         34.980468743734,
                         -3.3379539608193
                      ],
                      [
                         34.628906243797,
                         -3.3379539608193
                      ]
                   ]
                ]
             },
             "properties":{
                "extent":"POLYGON((-71.28123776566 -3.42762895713832,-71.28123776566 34.8875230280736,125.608630334052 34.8875230280736,125.608630334052 -3.42762895713832,-71.28123776566 -3.42762895713832))",
                "activationid":"HOT-0013"
             }
          }
       ]
    }
Improve this question

1 Answer 1

Reset to default
6

I think you need to read features using format. 

data=' your GeoJSON goes here ';
var activationLayer = new ol.layer.Vector(
    {
        title: 'Activation Boundary',
        source: new ol.source.GeoJSON(),
        style: new ol.style.Style(
        {
          stroke: new ol.style.Stroke(
            {
            color: 'red', width: 2
            })
         })
    });

map.addLayer(activationLayer);   
var format = new ol.format.GeoJSON(); 
activationLayer.getSource().addFeatures( format.readFeatures( data, {
    featureProjection: 'EPSG:3857'
} ) );

Additionally, I had to set center and zoom for the view. See this JSFiddle, which displays your sample data.

Improve this answer
5
  • Thanks Just tried it, no joy, I am obviously missing something obvious, but I cannot see it .. I also tried projection: "EPSG:3857", defaultProjection: "EPSG: 4326"
    – Mark Cupitt
    Mar 3, 2015 at 16:21
  • Close, but I need to be able to add data to the layer after it is created, I tried vS.addFeatures(data) but so far no result.
    – Mark Cupitt
    Mar 3, 2015 at 17:13
  • Edited the answer.
    – Germán Carrillo
    Mar 3, 2015 at 17:53
  • Where did you find that?? That did the trick. Have never seen getSource(). Well done ..
    – Mark Cupitt
    Mar 3, 2015 at 17:58
  • I extracted it from a project I worked on few months ago, I guess it's in OL3 docs.
    – Germán Carrillo
    Mar 3, 2015 at 18:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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