Encode/Decode Polyline

Convert WKT to encoded polylines and back.

Encodes and decodes WKT for lines, polygons, and multipolygons, supporting extra-pass encoding and a live map preview. It initializes the map and demonstrates how to convert WKT to encoded polylines and back using Cercalia GL APIs. The workflow showcases key configuration options, UI interactions, and the resulting map output.

const map = new cercaliagl.Map({
  target: 'map',
  controls: []
});
let extrapass;
let polygonType;
let input;
let output;
function stringToArray(value) {
  const arrayValues = value.split(',');
  return arrayValues.map(arrayValue => arrayValue.trim());
}
function createFeature(mode) {
  const inputValue = input.value.trim();
  if (inputValue.length === 0) return;
  output.value = '';
  map.removeAllFeatures();
  const featureOptions = {
    fillColor: '#54CA52',
    strokeColor: '#54CA52',
    strokeWidth: 3,
    fillOpacity: 0.3,
    outlineColor: '#000000',
    outlineWidth: 1
  };
  if (mode === 'encode') featureOptions.wkt = inputValue;else if (polygonType.value === 'line' && extrapass.checked) featureOptions.encodedLineString = inputValue;else if (polygonType.value === 'line') featureOptions.encodedGoogleLineString = inputValue;else if (polygonType.value === 'polygon' && extrapass.checked) featureOptions.encodedPolygon = inputValue;else if (polygonType.value === 'polygon') featureOptions.encodedGooglePolygon = inputValue;else if (polygonType.value === 'multipolygon' && extrapass.checked) featureOptions.encodedMultiPolygon = stringToArray(inputValue);else if (polygonType.value === 'multipolygon') featureOptions.encodedGoogleMultiPolygon = stringToArray(inputValue);
  const feature = new cercaliagl.Feature(featureOptions);
  if (mode === 'decode') output.value = feature.getWKT();else {
    const encoded = cercaliagl.BaseFeature.encodeWkt_(inputValue, extrapass.checked);
    if (typeof encoded === 'string') output.value = encoded;else {
      let stringArray = '';
      encoded.forEach((encodedElement, index) => {
        stringArray += `${index === 0 ? '' : ','}${encodedElement}`;
      });
      output.value = stringArray;
    }
  }
  map.addFeature(feature);
  map.centerToFeatures([feature]);
}
map.whenReady(() => {
  extrapass = document.getElementById('extrapass');
  polygonType = document.getElementById('type');
  input = document.getElementById('input');
  output = document.getElementById('output');
  const encodeBtn = document.getElementById('encodeBtn');
  const decodeBtn = document.getElementById('decodeBtn');
  encodeBtn.addEventListener('click', () => {
    createFeature('encode');
  });
  decodeBtn.addEventListener('click', () => {
    createFeature('decode');
  });
  input.addEventListener('input', () => {
    const newValue = input.value;
    if (newValue.trim().length > 0) {
      encodeBtn.disabled = false;
      decodeBtn.disabled = false;
    } else {
      encodeBtn.disabled = true;
      decodeBtn.disabled = true;
    }
  });
  extrapass.disabled = false;
  polygonType.disabled = false;
  input.disabled = false;
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Encode/Decode Polyline</title>
    <style>
      .map {
        width: 100%;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <form class="demo-form" id="boundsOptionsForm">
      
      <div class="demo-form-row">
        <label>
          Extra encoding:
          <input disabled type="checkbox" id="extrapass" />
        </label>

        <select disabled class="form-control" id="type" style="max-width: 150px;">
          <option value="line" selected>Line</option>
          <option value="polygon">Polygon</option>
          <option value="multipolygon">Multipolygon</option>
        </select>
      </div>

      <div class="demo-form-row">
        <label>
          <textarea disabled class="form-control" id="input" rows="5" cols="100"></textarea>
        </label>
      </div>

      <div>
        <button id="encodeBtn" class="btn demo-button" type="button" disabled>Encode</button>
        <button id="decodeBtn" class="btn demo-button" type="button" disabled>Decode</button>
      </div>

      <span class="demo-title ">Output</span>

      <div class="demo-form-row">
        <label>
          <textarea readonly class="form-control" id="output" rows="5" cols="100"></textarea>
        </label>
      </div>
    </form>
    <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>