OpenLayers 3 – Create a Map with ImageStatic and Add Features

Question

I have an image that I need to create an OL3 map for, so I've done:

var map;

$(function() {
    var imgProjection = new ol.proj.Projection({
        code: 'pixel',
        units: 'pixels',
        extent: [0, 0, 3721, 2631]
    });

    map = new ol.Map({
        target: 'skimap',
        renderer: 'canvas',
        layers: [
            new ol.layer.Image({
                source: new ol.source.ImageStatic({
                    url: 'http://skimondo.swissgeo.ch/mapeditor/config/schwarzsee/data/map.jpg',
                    imageSize: [3721, 2631],
                    imageExtent: [0, 0, 3721, 2631],
                    projection: imgProjection,
                    center: ol.extent.getCenter(imgProjection.getExtent()),
                    extent: imgProjection.getExtent()
                })
            })
        ],
        view: new ol.View2D({
            projection: new ol.proj.EPSG4326(),
            center: ol.extent.getCenter(imgProjection.getExtent()),
            zoom: 2
        })
    });

    var vectorSource = new ol.source.GeoJSON({"type":"LineString","coordinates":[[3.625,-28.952465726],[0.1875,2.235034274],[0.09375,19.578784274],[-1.25,33.922534274]]});
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#FF0000',
                width: 2
            })
        })
    });

    map.addLayer(vectorLayer);

But no feature shows up plotted onto the map? I am not sure if I have correctly made the map / layers / projection ? I have basically been trying to convert the old OL 2.13 code that I had working. It used WKT which was generated from the DB using ST_AsText, for the OL3 code, I have to use geoJSON (which is generated from ST_AsGeoJSON I believe):

$(function() {
    var map = new OpenLayers.Map('skimap', { controls: [] });

    map.addControl(new OpenLayers.Control.PanZoomBar());
    map.addControl(new OpenLayers.Control.KeyboardDefaults());
    map.addControl(new OpenLayers.Control.Navigation());
    map.addControl(new OpenLayers.Control.ArgParser());

    var options = {
        numZoomLevels: 5,
        minResolution: 0.05,
        maxResolution: 0.30,
        projection: new OpenLayers.Projection('EPSG:4326'),
        isBaseLayer: true,
        opacity: 0.8
    };

    var skimap_image = new OpenLayers.Layer.Image(
        'schwarzsee',
        'http://skimondo.swissgeo.ch/mapeditor/config/schwarzsee/data/map.jpg',
        new OpenLayers.Bounds(-180, -127.272238646, 180, 127.272238646),
        new OpenLayers.Size(3721, 2631),
        options
    );

    map.addLayers([skimap_image]);

    var vector_layer = new OpenLayers.Layer.Vector('Points', {
        projection: new OpenLayers.Projection('EPSG:4326')
    });

    var polygonFeature = [];

    var polygonGeom = new OpenLayers.Geometry.fromWKT('LINESTRING(X X, X X)');
    polygonFeature.push( new OpenLayers.Feature.Vector(polygonGeom,
        {
            id: '1'
        },
        {
            pointRadius: 8,
            color: '#FF0000',
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            fillColor: '#FF0000',
            fillOpacity: 0.4
        }
    ) );

    vector_layer.addFeatures(polygonFeature);

    map.addLayer(vector_layer);

    map.zoomToMaxExtent();

    map.zoomTo(10);

});

Any ideas why my OL3 version code isn't working (with added features showing up)?

Answer 1

Ok, I got this working with a work-around. Since WKT isn't yet implemented into OL3 (beta.5), and my GeoJSON calls didn't seem to show up anything, I then tried ol.geom.

I had to parse which function to use for each item in my data, but now it works for LinePoints:

$(function() {
    var epsgProjection = new ol.proj.EPSG4326();

    var imgProjection = new ol.proj.Projection({
        code: 'pixel',
        units: 'pixels',
        extent: [-180, -127.272238646, 180, 127.272238646]
    });

    var vectorSrc = new ol.source.Vector();

    map = new ol.Map({
        ol3Logo: false,
        target: 'skimap',
        renderer: 'canvas', // 'canvas', 'dom', 'webgl'
        layers: [
            new ol.layer.Image({
                source: new ol.source.ImageStatic({
                    url: 'http://skimondo.swissgeo.ch/mapeditor/config/schwarzsee/data/map.jpg',
                    imageSize: [3721, 2631],
                    imageExtent: imgProjection.getExtent(),
                    projection: epsgProjection,
                    extent: imgProjection.getExtent()
                })
            }),
            new ol.layer.Vector({
                projection: epsgProjection,
                source: vectorSrc
            })
        ],
        view: new ol.View2D({
            projection: epsgProjection,
            extent: imgProjection.getExtent(),
            center: [0, 0],
            zoom: 3,
            maxZoom: 5,
            minZoom: 2
        })
    }).on('click', function(evt) {
        var coordinate = evt.coordinate;
        console.info(coordinate);
    });

            var vectorFeature = new ol.Feature({
        geometry: new ol.geom.LineString([[3.625,-28.952465726],[0.1875,2.235034274],[0.09375,19.578784274],[-1.25,33.922534274]]),
        name: 'Vallée de l\'impossible'
    });
    vectorFeature.setStyle(new ol.style.Style({
        fill: new ol.style.Fill({
            color: '#FF0000',
            weight: 10
        }),
        stroke: new ol.style.Stroke({
            color: '#FF0000',
            width: 3
        }),
        text: new ol.style.Text({
            font: '12px Calibri,sans-serif',
            text: 'Vallée de l\'impossible',
            textBaseline: 'middle',
            textAlign: 'center',
            fill: new ol.style.Fill({
                color: '#000'
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 3
            })
        })
    }));

    vectorSrc.addFeature(vectorFeature);

    });

I suppose this will probably change again when OL3 is stable.