MultiString feature not showing up on openlayers map?

Question

I have a map with circle features on it plus a multistring (here), when I check if the feature is there I find it, the style chosen is taken from this example so I don't think the problem is with that.

var stringStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 10,
    }),
});

Any idea on what I'm doing wrong?

PS: to check the coordinates of the multiline string, set vector2's visibility to true in the example above

code snippet (from linked fiddle):

var i;
var circle;
var multiline;

var points = [
  [-284417.875175471, 6701738.296759888],
  [-284284.110375972, 6700467.531164646],
  [-283815.93357772526, 6701738.296759888],
  [-283190.1054086404, 6701766.960645495],
  [-283383.6952122001, 6701764.579775712],
  [-283284.2197027642, 6701589.0347590605],
  [-288756.07994830405, 6701766.960645495]
];

var multiline_points = [
  [-287570.90259223455, 6701938.9439591365],
  [-287083.6165369166, 6701317.893104319],
  [-286577.2212245273, 6702024.935615957],
  [-286137.7083118875, 6700840.161677537],
  [-285421.111171714, 6702607.767956631]
];

var concat_points = [];
concat_points = multiline_points;

var raster = new ol.layer.Tile({
  source: new ol.source.OSM(),
});

var source = new ol.source.Vector({
  wrapX: false
});
var source2 = new ol.source.Vector({
  wrapX: false
});

var vector = new ol.layer.Vector({
  source: source,
  /*style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(0, 255,0, 0.9)'
        }),
        stroke: new ol.style.Stroke({
            color: '#737373',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
                color: '#ffcc33'
            })
        })
    }),*/
  visible: true
});

var vector2 = new ol.layer.Vector({
  source: source2,
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(0, 255,0, 0.9)'
    }),
    stroke: new ol.style.Stroke({
      color: '#737373',
      width: 2
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: '#ffcc33'
      })
    })
  }),
  visible: false //true
});

var map = new ol.Map({
  layers: [raster, vector, vector2],
  target: 'map',
  view: new ol.View({
    center: points[0],
    zoom: 14,
  }),
});
var stringStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: '#ffcc33',
    width: 10,
  }),
});
for (i = 0; i < points.length; i++) {
  circle = new ol.geom.Circle(points[i], 100);
  feature = new ol.Feature({
    geometry: circle
  });
  source.addFeature(feature);
}
multiline = new ol.geom.MultiLineString(multiline_points);
feature = new ol.Feature({
  geometry: multiline
});
feature.setStyle(stringStyle);
source.addFeature(feature);

for (i = 0; i < concat_points.length; i++) {
  circle = new ol.geom.Circle(concat_points[i], 100);
  feature = new ol.Feature({
    geometry: circle
  });
  source2.addFeature(feature);
}

.map {
  width: 100%;
  height: 300px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<div id="map" class="map"></div>

Answer 1

Your multiline_points array is the coordinates for a single LineString. Either use LineString geometry or wrap with an extra pair of [ ] to create coordinates for a MultiLineString geometry.