Multi-segment route map

HTML

<script type="text/javascript" src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/dark.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/dark.js"></script>
<div id="info">Click the country to display it's information</div>
<div id="chartdiv"></div>			
<div id="selector">
    <label style="color:#2196F3;" class="ui-switch ui-switch-success ui-switch-sm ui-switch-system">
      <input type="checkbox" value="system" checked="checked" onclick="toggleGroup(this.value, this.checked);" />        
        <i></i>
        System
    </label>  
    
    <label style="color:#825BF6;" class="ui-switch ui-switch-success ui-switch-sm ui-switch-application">
      <input type="checkbox" value="application" checked="checked" onclick="toggleGroup(this.value, this.checked);" />
      <i></i>
      Application
    </label>   
    <label style="color:#FF5E43;" class="ui-switch ui-switch-success ui-switch-sm ui-switch-identity">
      <input type="checkbox" value="identity" checked="checked" onclick="toggleGroup(this.value, this.checked);" />
      <i></i>
      Identity
    </label>       
</div>
<input type="button" class="clearFilter" value="Clear filter" onclick="centerMapOnSelectedObject();" />

CSS

#chartdiv {
  //background: #e7ebf2;
  //background: white;
	width	: 100%;
	height	:500px;
 
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: rgba(231, 235, 242,.9);
  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%209%209%22%20height%3D%229%22%20width%3D%229%22%3E%3Cellipse%20cx%3D%22.5%22%20cy%3D%22.5%22%20rx%3D%22.5%22%20ry%3D%22.5%22%20fill%3D%22rgba(0,0,0,.2)%22%3E%3C%2Fellipse%3E%3C%2Fsvg%3E');
  background-position: left top;
  background-repeat: repeat;
  background-size: 9px 9px;
}			
#info {
    opacity: 0.9;
    background: #ccc;
    padding: 10px;
}
#selector {
    padding: 10px;
    background: transparent;
    width: 150px;
    position: absolute;
    top: 40px;    
    right: 0px;
}
#selector label {
    display: block;
    padding: 3px 6px;
}

.clearFilter {
    font-size: 15px;
    padding: 5px;
    position: absolute;
    right: 20px;
    bottom: 20%;
}

.ui-select select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000
}

.ui-switch input {
    display: none
}

.ui-switch i {
    display: inline-block;
    cursor: pointer;
    padding-right: 20px;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    transition: all ease .2s;
    border-radius: 25px;
    box-shadow: inset 0 0 1px rgba(0,0,0,.5)
}

.ui-switch i:before {
    display: block;
    content: '';
    width: 25px;
    height: 25px;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.5)
}

.btn-dark.active,.btn-dark:active,.btn-info-alt.active,.btn-info-alt:active,.open>.btn-dark.dropdown-toggle,.open>.btn-info-alt.dropdown-toggle {
    background-image: none
}

.ui-switch :checked+i {
    padding-right: 0;
    padding-left: 20px;
    box-shadow: inset 0 0 1px rgba(0,0,0,.5),inset 0 0 40px #31C0BE
}

.ui-switch.ui-switch-success :checked+i {
    box-shadow: inset 0 0 1px rgba(0,0,0,.5),inset 0 0 40px...

JavaScript

// svg path for target icon
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";
// svg path for plane icon
var planeSVG = "M19.671,8.11l-2.777,2.777l-3.837-0.861c0.362-0.505,0.916-1.683,0.464-2.135c-0.518-0.517-1.979,0.278-2.305,0.604l-0.913,0.913L7.614,8.804l-2.021,2.021l2.232,1.061l-0.082,0.082l1.701,1.701l0.688-0.687l3.164,1.504L9.571,18.21H6.413l-1.137,1.138l3.6,0.948l1.83,1.83l0.947,3.598l1.137-1.137V21.43l3.725-3.725l1.504,3.164l-0.687,0.687l1.702,1.701l0.081-0.081l1.062,2.231l2.02-2.02l-0.604-2.689l0.912-0.912c0.326-0.326,1.121-1.789,0.604-2.306c-0.452-0.452-1.63,0.101-2.135,0.464l-0.861-3.838l2.777-2.777c0.947-0.947,3.599-4.862,2.62-5.839C24.533,4.512,20.618,7.163,19.671,8.11z";
var appSVG = "M26,.19H6a5.89,5.89,0,0,0-6,6v26H32v-26A5.89,5.89,0,0,0,26,.19Zm-22,28v-16h6v16Zm24,0H14v-16H28ZM4,8.19v-2a1.89,1.89,0,0,1,2-2H26a1.89,1.89,0,0,1,2,2v2Z";
var sysSVG = "M4,18.64H28a1.33,1.33,0,0,0,1.33-1.33v-16A1.33,1.33,0,0,0,28,0H4A1.33,1.33,0,0,0,2.72,1.35v16A1.33,1.33,0,0,0,4,18.64ZM6.71,5.34A1.33,1.33,0,0,1,8,4H24a1.33,1.33,0,0,1,1.33,1.33v8A1.33,1.33,0,0,1,24,14.65H8a1.33,1.33,0,0,1-1.33-1.33Zm20,16H5.38A5.33,5.33,0,0,0,.06,26.62v4a1.33,1.33,0,0,0,1.33,1.33H30.66A1.33,1.33,0,0,0,32,30.62v-4A5.33,5.33,0,0,0,26.66,21.3ZM9.37,28h-4V25.3h4Zm16,0H18.68a1.33,1.33,0,1,1,0-2.66h6.65a1.33,1.33,0,1,1,0,2.66Z";
var idSVG =...