Live search demo

by amcharts

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/themes/none.js"></script>
<div id="chartdiv"></div>
<div id="objectlist">
    <input type="text" id="search" placeholder="Enter search here" />
    <div id="searchresults"></div>
</div>

CSS

#chartdiv {
	width	: 70%;
	height	: 500px;
    float: left;
}

#objectlist {
    width: 29%;
    height: 500px;
    float: left;
    overflow: auto;
}

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";

var map = AmCharts.makeChart("chartdiv", {
	type: "map",
    showImagesInList: true,
    objectList: {
        container: "searchresults"
    },

	imagesSettings: {
		rollOverColor: "#089282",
		rollOverScale: 3,
		selectedScale: 3,
		selectedColor: "#089282",
color:"#13564e"
	},

zoomControl:{buttonFillColor:"#15A892"},

areasSettings:{unlistedAreasColor:"#15A892"},

	dataProvider: {
		map: "worldLow",
		images: [{
			svgPath: targetSVG,
			zoomLevel: 5,
			scale: 0.5,
			title: "Vienna",
			latitude: 48.2092,
			longitude: 16.3728
		}, {
			svgPath: targetSVG,
			zoomLevel: 5,
			scale: 0.5,
			title: "Minsk",
			latitude: 53.9678,
			longitude: 27.5766
		}, {
			svgPath: targetSVG,
			zoomLevel: 5,
			scale: 0.5,
			title: "Brussels",
			latitude: 50.8371,
			longitude: 4.3676
		}, {
			svgPath: targetSVG,
			zoomLevel: 5,
			scale: 0.5,
			title: "Sarajevo",
			latitude: 43.8608,
			longitude: 18.4214
		}, {
			svgPath: targetSVG,
			zoomLevel: 5,
			scale: 0.5,
			title: "Sofia",
			latitude: 42.7105,
			longitude: 23.3238
		}, {
			svgPath: targetSVG,
			zoomLevel: 5,
			scale: 0.5,
			title: "Zagreb",
			latitude: 45.8150,
			longitude: 15.9785
		}, {
			svgPath: targetSVG,
			zoomLevel: 5,
			scale: 0.5,
			title: "Pristina",
			latitude: 42.666667,
			longitude: 21.166667
		}, {
			svgPath: targetSVG,
			zoomLevel: 5,
			scale: 0.5,
			title: "Prague",
			latitude: 50.0878,
			longitude: 14.4205
		}, {
			svgPath: targetSVG,
			zoomLevel: 5,
			scale: 0.5,
			title: "Copenhagen",
			latitude: 55.6763,
			longitude: 12.5681
		}, {
			svgPath: targetSVG,
			zoomLevel: 5,
			scale: 0.5,
			title: "Tallinn",
			latitude: 59.4389,
			longitude: 24.7545
		}, {
			svgPath:...