Trying to show an OSM/Nominatim relation on an OpenLayers 3 map - openstreetmap

Question

I am trying to show the boundary of relation 4569(Brugge, West Flanders, Flanders, Knokke-Heist) on an OpenLayers 3 type map, like http://nominatim.openstreetmap.org . But I don't know how to proceed.
These are the things I am doing:
I am querying Overpass API with the following parameters:
data=[output:json];relation(4569); out geom; out center;
This query gives me back the information about the relation with the id of 4569 from OpenStreetMaps.
The result set from this query is multiple ways, which have their role set as outer. I am combinining these ways to create a polygon, and storing them in an array.
foreach ($geom['members'] as $_poly) {
if ($_poly['role'] != 'outer' && $_poly['role'] != 'inner') continue;
if ($_poly['role'] == 'outer') {
foreach ($_poly['geometry'] as $latlon) $poly['outer'][]=array($latlon['lon'], $latlon['lat']);
} else {
$poly['inner'][]=array();
foreach ($_poly['geometry'] as $latlon) $poly['inner'][count($poly['inner'])-1][]=array($latlon['lon'], $latlon['lat']);
}
}
if ($poly['outer'][0] != $poly['outer'][count($poly['outer'])-1]) $poly['outer'][]=$poly['outer'][0];
$out['polygons']=$poly;
Afterwards, this array is sent to javascript, where I process it, and try to add a Polygon object to an OpenLayers 3 map. This is the javascript code I use. (It is wrapped in a JS prototype made by me)
Map.prototype.addPolygon = function(name, data) {
var _coordinates=[], i;
for (i=0; i<data.outer.length; i++ ) {
console.log(data.outer[i]);
_coordinates.push(ol.proj.transform(data.outer[i], 'EPSG:4326', 'EPSG:3857'));
}
console.log("Creating polygon", _coordinates);
var Polygon = new ol.geom.Polygon([_coordinates]);
var feature = new ol.Feature({
name: name+"-outer",
geometry: Polygon
});
this.polygons[name]=Polygon;
var polyStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: [121, 115, 251, .2]
}),
stroke: new ol.style.Stroke({
color: '#051165',
width: 2
})
});
this.vectorSource.addFeature(feature);
feature.setStyle(polyStyle);
this.map.getView().fit(Polygon, this.map.getSize());
}
Below you will find two images, the first is the end result which I get, and the second is the end result which Nominatim gets(my desired result). If you observe, you will see that the borders of my polygon are all messy, and there are additional lines in my polygon.
My end result
Nominatim result - the desired result
What am I doing wrong? If I am doing the same thing with boundaries which are represented by a single WAY, everyting works as expected.