After looking in the API docs at http://openlayers.org/en/v3.0.0/apidoc/ol.source.GeoJSON.html and unchecking the checkbox Stable Only on the top right of the banner, I see a projection option for the source.
It's here you have to set the projection to say to OpenLayers 3 to transform the data coordinates.
Trying changing your fiddle with below part, it works
var montanaSource = new ol.source.GeoJSON({
object: ......................................,
projection: 'EPSG:3857'
});
Feature creation can be kind of tricky in OpenLayers 3. There aren't any official examples for ol.source.Vector
layers, most of them are working with GeoJSON, or some other data exchange format.
I have managed to create a working fiddle.
Let me explain some of the key aspects of achieving your task.
var layerLines = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.LineString(markers, 'XY'),
name: 'Line'
})]
})
});
The vector layer takes a vector source, that is usual. The features property of the source, however takes an array of features, so if you don't want to add them with the addFeature()
method, you have to provide an array with one element.
The geometry
property of the feature handles the type of the feature. In this case, you only need one single line, so the ol.geom.LineString
type is the proper one. For multidimensional classes (lines, polygons), you have to provide an array of coordinates, or two-dimensional arrays for multi-features. The 'XY'
property is an optional one, called layout. With this property, you can define if a Z or a measure (M) coordinate is provided in the array. The name
property is optional, too.
The last trick is the coordinate transformation in the AddMarkers()
function. To create proper lines, you have to pass a transformed array of coordinates in the marker
array.
markers[i]= ol.proj.transform([x,y], 'EPSG:4326', 'EPSG:3857');
Best Answer
You need to change the scope of your view so it's available to those listener events. Just make a the view global by declaring it outside the Map definition.
See http://jsfiddle.net/4gjhwbne/
i.e. change
to
P.S. try using some browser developer tools, like Firebug or Chrome's developer tools to see what's going on