Capitals map

Our maps can be used with real life latitudes and longitudes. All the capitals on this map are placed using the actual coordinates of these cities.

by HemalathaThanigaivel

HTML

<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="mapChart"></div>

CSS

#mapChart {
   //background: #3f3f4f;color:#ffffff;					
	width	: 100%;
	height	: 500px;
}	
.map-marker {
    /* adjusting for the marker dimensions 
    so that it is centered on coordinates */
    margin-left: -8px;
    margin-top: -8px;
}
.map-marker.map-clickable {
    cursor: pointer;
}
.pulse {
		width: 5px;
		height: 5px;
		border: 2px solid #d64921;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: #e84a34; 
		z-index: 10;
		position: absolute;
	}
.map-marker .dot {
		border: 10px solid #e84a34; 
		background: transparent;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		height: 5px;
		width: 5px;
		-webkit-animation: pulse 3s ease-out;
		-moz-animation: pulse 3s ease-out;
		animation: pulse 3s ease-out;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		position: absolute;
		top: -8px;
		left: -8px;
		z-index: 1;
		opacity: 0;
	}
  
  
  .blink {
		width: 5px;
		height: 5px;
		border: 2px solid #0b60e8;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-color: #179dd6; 
		z-index: 10;
		position: absolute;
	}
  .map-marker .dot1 {
		border: 10px solid #0b60e8; 
		background: transparent;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		height: 5px;
		width: 5px;
		-webkit-animation: pulse 3s ease-out;
		-moz-animation: pulse 3s ease-out;
		animation: pulse 3s ease-out;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		position: absolute;
		top: -8px;
		left: -8px;
		z-index: 1;
		opacity: 0;
	}
	@-moz-keyframes pulse {
	 0% {
	   	-moz-transform: scale(0);
	   	opacity: 0.0;
	 }
	 25% {
	   	-moz-transform: scale(0);
	   	opacity: 0.1;
	 }
	 50% {
	   	-moz-transform: scale(0.1);
	   	opacity: 0.3;
	 }
	 75% {
	   	-moz-transform:...

JavaScript

var map = AmCharts.makeChart( "mapChart", {
  "type": "map",
  "projection": "winkel3",
  "theme": "none",
  "imagesSettings": {
 //   "rollOverColor": "#089282",
   // "rollOverScale": 3,
  //  "selectedScale": 3,
  //  "selectedColor": "#089282",
   // "color": "#13564e"
  },

  "areasSettings": {
    "unlistedAreasColor": "#666",
    "outlineThickness": 0.1
  },

  "dataProvider": {
    "map": "worldLow",
   // "getAreasFromMap": true,
    "images": [ {
      
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "Canada",
      "latitude": -6.1670,
      "longitude": 35.7497
    }, {
      
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "Canada",
      "latitude": 6.1228,
      "longitude": 1.2255
    }, {
      
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "Tunis",
      "latitude": 36.8117,
      "longitude": 10.1761
    } ]
  },
  "export": {
    "enabled": false
  }
} );

// add events to recalculate map position when the map is moved or zoomed
map.addListener("positionChanged", updateCustomMarkers);

// this function will take current images on the map and create HTML elements for them
function updateCustomMarkers (event) {
    // get map object
    
    var map = event.chart;
    
    // go through all of the images
    for( var x in map.dataProvider.images) {
        // get MapImage object
        var image = map.dataProvider.images[x];
       console.log(image)
        // check if it has corresponding HTML element
        if ('undefined' == typeof image.externalElement){
            image.externalElement = createCustomMarker(image);
            }

        // reposition the element accoridng to coordinates
        image.externalElement.style.top = map.latitudeToY(image.latitude) + 'px';
        image.externalElement.style.left = map.longitudeToX(image.longitude) + 'px';
    }
}

// this function creates and returns a new marker element
function createCustomMarker(image) {
    // create holder
    var holder =...