Create features from Google encoded polylines.
Create multiple features from Google encoded polylines.
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);
});
<!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>