Feature from Google polyline

Create features from Google encoded polylines.

Create multiple features from Google encoded polylines.

main.js
var map = new cercaliagl.Map({
  target: 'map',
  center: new cercaliagl.LonLat(2.16935, 41.4046),
  zoom: 15,
  maxZoom: 22
});
var polylines = [{
  type: 'line',
  coordinates: 'qkt_GywpPqxIaiFuaL{lBc{LgvAauN~u@icHdoH}~IppC',
  colour: '#253325'
}, {
  type: 'polygon',
  coordinates: '_xk_GiucPmkCw_TvlMofVzeDsd^fdNreTbeIl~QweL`qXykZvtH',
  colour: '#5DA05C'
}, {
  type: 'polygon',
  coordinates: 'ocz~Fei|LutSwe@}fKacZlyCso[f}Q{kRb|OfxAlsE|xUskMbtq@-ikc_GyqwMy{@_yBpjAykCu\\{fDglCqq@lh@q~Ac`CeMpw@qqAx}@rPdg@yc@tx@~]b}@nlDtp@n_Em\\raBws@dmA_B|uB',
  colour: '#434B43'
}, {
  type: 'multipolygon',
  coordinates: ['qrwaGc}hQvEqdO|wMl|Fu~MbgG', 'ozuaGq{rOvEqdO|wMl|Fu~MbgG', 'qvvaGq~pLxEqdO|wMl|Fw~MbgG'],
  colour: '#647565'
}, {
  type: 'multipolygon',
  coordinates: ['}pjbGibmPynYdh@ci@{hdArye@vbE}fA~tPaiG~iHuM|za@-cipbGoiwP_~GkjJuWmfK~`I_[iIxmW', 'cvabGugzJe`TevAqkVcfbClw~@|hW}}P`hl@bpNddo@{{ObeO-uegbGaonKk`KgiBprE{uWxlDb`[-}z~bGsuiM_zA_aUhxPxpMi}MdoF-kl~aGscqMwgK}mT|pPzhGehD`dL'],
  colour: '#54CA52'
}];
map.whenReady(function () {
  var features = [];
  polylines.forEach(function (_ref) {
    var type = _ref.type,
        coordinates = _ref.coordinates,
        colour = _ref.colour;
    var featureOptions = {
      fillColor: colour,
      strokeColor: colour,
      strokeWidth: 3,
      fillOpacity: 0.3,
      outlineColor: '#000000',
      outlineWidth: 1
    };

    if (type === 'line') {
      featureOptions.encodedGoogleLineString = coordinates;
    } else if (type === 'polygon') {
      featureOptions.encodedGooglePolygon = coordinates;
    } else {
      featureOptions.encodedGoogleMultiPolygon = coordinates;
    }

    features.push(new cercaliagl.Feature(featureOptions));
  });
  map.addFeatures(features);
  map.centerToFeatures(features);
});
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Feature from Google polyline</title>
    <style>
      .map {
        width: 100%;
        height: 640px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map">
    </div>
    
    <link rel="stylesheet" type="text/css" href="//maps.cercalia.com/gl/v1.0/cercaliagl.css">
    <script src="//maps.cercalia.com/gl/v1.0/cercaliagl.js?key=YOUR_API_KEY"></script>
    <script src="main.js"></script>
  </body>
</html>