Multi-segment route map

by samur3

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script type="text/javascript" src="http://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="http://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:black;"><input type="checkbox" value="system" checked="checked" onclick="toggleGroup(this.value, this.checked);" /> System</label>   
    <label style="color:black;"><input type="checkbox" value="application" checked="checked" onclick="toggleGroup(this.value, this.checked);" /> Application</label>   
    <label style="color:black;"><input type="checkbox" value="identity" checked="checked" onclick="toggleGroup(this.value, this.checked);" /> Identity</label>   
</div>

CSS

#chartdiv {
  background: #e7ebf2;
	width	: 100%;
	height	: 700px;
}			
#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;
}

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 = "M19,18.76H27V16.12H19Zm0,5.3H27V21.41H19Zm-5.65-4.5a3.27,3.27,0,0,0,.35-1.45V16.78a3.31,3.31,0,1,0-6.62,0V18.1a3.27,3.27,0,0,0,.35,1.45,6,6,0,0,0-3,5.16v2H16.38v-2A6,6,0,0,0,13.38,19.56ZM9.76,16.78a.66.66,0,0,1,1.32,0V18.1a.66.66,0,0,1-1.32,0ZM7.18,24.06a3.31,3.31,0,0,1,6.49,0ZM24.33,5.53V6.85a1.32,1.32,0,0,1-2.65,0V5.53H11.09V6.85a1.32,1.32,0,0,1-2.65,0V5.53H.5V32H32.27V5.53Zm5.29,23.83H3.15V8.17H6a4,4,0,0,0,7.49,0h5.75a4,4,0,0,0,7.49,0h2.87Z";
...