Simplifying Closed SVG Path

by Ea Bangalore

HTML

<div class="original">
  <svg id="OriginalMap" viewBox="324.55999755859375 0 126.44989013671875 111.65999603271484" class="map" xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap">
    <g>
      <path id="OriginalJP-01" title="Hokkaido" class="land"...

CSS

div {
  width: 50%;
}

.original {
  float: left;
}

.simplified {
  float: right;
}

.map {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem;
  text-shadow: 1px 1px white;
  cursor: grab;
}

.land {
  fill: lightgreen;
  fill-opacity: 1;
  stroke: white;
  stroke-opacity: 1;
  stroke-width: 0.5;
  cursor: pointer;
}

JavaScript

var coords;
var newCoords = [];
var newPath;
var coordsObject;

// get the coordinates from a given path
function pathToCoords(path) {
  // save each path individually (.i.e islands are stored separately)
  var data = path.match(/(?<=m).*?(?=z)/igs);
  console.log(data);
  var coordsArray = [];
  var objectArray = [];
  var objectArrayA = [];
  var objectArrayB = [];
  var objectContainer = [];

  // split each pair of coordinates into their own arrays
  for (var i = 0; i < data.length; i++) {
    // should remove anything between h or v and l instead?
    data[i] = data[i].split(/[LlHhVv]/);
    coordsArray[i] = [];

    for (var j = 0; j < data[i].length; j++) {
      coordsArray[i].push(data[i][j].split(",").map(Number));
    }
  }

  // convert each pair of coordinates into an object of x and y
  for (var i = 0; i < coordsArray.length; i++) {
    objectArray[i] = [];

    for (var j = 0; j < coordsArray[i].length; j++) {
      objectArray[i].push({
        x: coordsArray[i][j][0],
        y: coordsArray[i][j][1]
      });
    }

    // split each array of coordinates in half
    var halfway = Math.floor(objectArray[i].length / 2);

    objectArrayB[i] = JSON.parse(JSON.stringify(objectArray[i]));;
    objectArrayA[i] = objectArrayB[i].splice(0, halfway);
  }

  objectContainer = [objectArrayA, objectArrayB];

  return objectContainer;
}

// convert the coordinates back into a string for the path
function coordsToPath(objectContainer) {
  var objectArray = [];
  var coordsArray = [];
  var data;

  // recombine the two objectArrays
  for (var i = 0; i < objectContainer[0].length; i++) {
    objectArray[i] = objectContainer[0][i].concat(objectContainer[1][i])
  }

  for (var i = 0; i < objectArray.length; i++) {
    coordsArray[i] = [];

    // take the X and Y values from the objectArray and strip the unwanted information
    for (var j = 0; j < objectArray[i].length; j++) {
      if (j == 0) {
        // add 'M' in front of the first entry
       ...