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": [ { "latitude": -12.0433333, "longitude":-77.0283333, "svgPath": targetSVG, "width": 22, "height": 31, "title": "Lima" }, { "latitude": -13.1639567, "longitude":-72.5459930, "svgPath": targetSVG, "width": 22, "height": 31, "title": "Machu Picchu" }, { "latitude": -13.8346549, "longitude":-76.2493603, "svgPath": targetSVG, "width": 22, "height": 31, "title": "Paracas" }, ], "areas": [ { "title": "Peru", "id": "PE", "color": "#0c5495", "groupId": "4" }, ], }, "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('PE')); map.zoomToGroup([map.getObjectById('PE')]); } }] }); 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(); } }); }