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.
You can get -- feature.get('any')
-- any geojson property and show in the popup. Take a look at this demo.
You mixed up some points. So, first, get the coordinate to position the popup:
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
Note, there is no coordinate transformation.
Second, prepare the popup content:
var content = '<h3>' + feature.get('property here') + '</h3>';
content += '<h5>' + feature.get('other property') + '</h5>';
And finally, show it. Right?
Best Answer
@ahocevar's answer saved me hours but one thing is missing from the code is to add select interaction to map object: