igMap add and insert series

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://igniteui.com/js-data/world-cities"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<script id="tooltipTemplate" type="text/x-jquery-tmpl">
        <table id="tooltipTable" >
            <tr><th class="tooltipHeading" colspan="2">${item.Name}, ${item.Country}</th></tr>
            <tr>
                <td>Latitude:</td>
                <td>${item.Latitude}</td>
            </tr>
            <tr>
                <td>Longitude:</td>
                <td>${item.Longitude}</td>
            </tr>
        </table>
    </script>

<div id="map"></div>
<input type="button" id="addSeries" value="Add Series" style="margin-top:1rem;"/>
<input type="button" id="insertSeries" value="Insert Series" style="margin-top:1rem;"/>

CSS

#tooltipTable 
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  width: 100%;
  border-collapse: collapse;
}

#tooltipTable td, #tooltipTable th
{
  font-size: 9px;
  border: 1px solid #b51c1c;
  padding: 3px 7px 2px 7px;
}

#tooltipTable th
{
  font-weight: bold;
  font-size: 11px;
  text-align: left;
  padding-top: 5px;
  padding-bottom: 4px;
  background-color: #b51c1c;
  color: #ffffff;
}

JavaScript

$(function () {
							var dataCities = [
    								{ Name: "London", Country: "England", Latitude: 51.50, Longitude: 0.12 },
    								{ Name: "Berlin", Country: "Germany", Latitude: 52.50, Longitude: 13.33 },
    								{ Name: "Moscow", Country: "Russia", Latitude: 55.75, Longitude: 37.51 },
    								{ Name: "Sydney", Country: "Australia", Latitude: -33.83, Longitude: 151.2 }
						];

            $("#map").igMap({
                width: "700px",
                height: "500px",
                windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },
                backgroundContent: {
                    type: "openStreet"
                },
                series: [{
                    type: "geographicSymbol",
                    name: "worldCities",
                    dataSource: dataCities,
                    latitudeMemberPath: "Latitude",
                    longitudeMemberPath: "Longitude",
                    markerType: "automatic",
                    markerCollisionAvoidance: "fade",
                    markerOutline: "#b51c1c",
                    markerBrush: "#b51c1c",
                    showTooltip: true,
                    tooltipTemplate: "tooltipTemplate"
                }]
            });
            
            $("#addSeries").igButton({
                labelText: $("#addSeries").val(),
                click: function (e)
                {
                	$("#map").igMap("addItem", {"Name": "Sofia", "Country": "Bulgaria", "Latitude": 42.2, "Longitude": 22.5 }, "worldCities" );
                  console.log(dataCities);
                }
            });
            
            $("#insertSeries").igButton({
                labelText: $("#insertSeries").val(),
                click: function (e)
                {
                	$("#map").igMap("insertItem", {"Name": "Sofia", "Country": "Bulgaria", "Latitude": 42.2, "Longitude": 22.5 }, 1, "worldCities" );
                  console.log(dataCities);
                }
   ...