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";
    var map = AmCharts.makeChart( "mapdiv",
    {
        "type": "map",
        "dataProvider": {
            "map": "worldLow",
            "getAreasFromMap": true,
            "zoomLevel": 2,
            "zoomLongitude": 20,
            "zoomLatitude" : 62,
            "images": [
            ],
            "areas": [
                {
                    "title": "beroemde routes",
                    "id": "RT",
                    "color": "#0c5495",
                    "groupId": "9"
                },
            ],
        },
        "imagesSettings":
        {
            "rollOverColor": "#bfd2e1",
            "rollOverScale": 3,
            "selectedScale": 3,
            "selectedColor": "#4f4f4f",
            "color": "#bfd2e1"
        },
        "areasSettings": {
            "autoZoom": false,
            "selectable": true,
            "color" : "#85c5e3",
            "unlistedAreasColor": "#85c5e3",
            "selectedColor": "#0c5495"
        },
        "zoomControl": {
            "homeButtonEnabled" : false,
            "zoomControlEnabled": false,
            "panControlEnabled": false
        },
        "listeners": [{
        "event": "rendered",
        "method": function(e) {
                // Let's log initial zoom settings (for home button)
                var map = e.chart;
                //map.selectObject(map.getObjectById('RT'));
                map.zoomToGroup([map.getObjectById('RT')]);
            }
        }]
    });
    function updateMap()
    {
        $.ajax({
            url: 'https://'+ window.location.hostname + "/ajax/?section=profile&action=getusermapdata",
            data: {
                tripid: parseInt($('#tripid').val())
            },
            dataType: "json",
            success: function(json) {
                map.dataProvider.areas = []
                map.dataProvider.images = []
                var i = 0;
                $.each(json, function(index, value){
                    if(i == 0) {
                        map.dataProvider.zoomLevel = 5;
                        map.dataProvider.zoomLongitude = value.longitude;
                        map.dataProvider.zoomLatitude = value.latitude;
                    }
                    map.dataProvider.areas.push({ id: value.countrycode, showAsSelected: true});
                    map.dataProvider.images.push({ svgPath: targetSVG, title: value.city, latitude: value.latitude, longitude: value.longitude });
                    i++;
                });
                map.validateData();
            }
        });
    }