Cannot get drawn polygons and lines in openlayers 3 vector layer - openlayers-3

Question

I wrote a code that supposed to get the feature that is just created on a vector layer.
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
//is actually empty
var sourceVector = new ol.source.Vector({});
layerVector = new ol.layer.Vector({
id: 'myLayer',
source: sourceVector,
style:cStyle // I set a style, I just dont iclude it for brevity
});
var draw;
var typeSelect = document.getElementById('type');
function addInteraction() {
draw = new ol.interaction.Draw({
source: sourceVector,
type: typeSelect.value
});
map.addInteraction(draw);
}
//when something is selected by the dropdown
//remove the previous interaction and reset it
typeSelect.onchange = function(e) {
map.removeInteraction(draw);
addInteraction();
};
addInteraction();
//when drawing is finished, get coords and print them
draw.on('drawend',
function(evt) {
var justNowFeature = evt.feature;
var featureGeom = justNowFeature.getGeometry().getCoordinates();
console.log("FEATURESGEOJSON "+featureGeom );
}
);
This also works for getting the geometry type
var featureGeom = justNowFeature.getGeometry().getType();
And actually all I want to save is the type and the coordinates, so I am fine.
Except, this only works for Points. If I choose Polygon or LineString, it does not print anything in the console, and I dont get any errors, it just not work.
Any solutions?
Thank you

Answer 1

you need to place 'drawend' event initilisation within the addInteraction function. Check the fiddle here. fiddle here
When initialising 'drawend' event no draw interaction exist. Firebug though should inform you that "draw" is undefined
this is your code. I have made some comments in CAPITALS to explain.
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
//is actually empty
var sourceVector = new ol.source.Vector({});
layerVector = new ol.layer.Vector({
id: 'myLayer',
source: sourceVector,
style:cStyle // I set a style, I just dont iclude it for brevity
});
var draw;
var typeSelect = document.getElementById('type');
function addInteraction() {
draw = new ol.interaction.Draw({
source: sourceVector,
type: typeSelect.value
});
map.addInteraction(draw);
}
//when something is selected by the dropdown
//remove the previous interaction and reset it
typeSelect.onchange = function(e) {
//HERE YOU REMOVE THE INTERCATION AND THUS ALL LISTENERS
//ASIGNED TO IT REMOVED
// SO YOU NEED TO REASIGN THE LISTENERS AS THIS IS A BRAND NEW INTERACTION
map.removeInteraction(draw);
addInteraction();
};
addInteraction();
//when drawing is finished, get coords and print them
//HERE YOU JUST ASIGN THE LISTENER AT STARTUP.
//THIS HAPPENS ONCE AND NOT EACH TIME YOU
// ADD BACK THE INTERACTION
draw.on('drawend',
function(evt) {
var justNowFeature = evt.feature;
var featureGeom = justNowFeature.getGeometry().getCoordinates();
console.log("FEATURESGEOJSON "+featureGeom );
}
);