CODEWITHSUNDEEP
jqueryamchartsammap
user3062437
user3062437

Reputation: 357

How to disable tooltip and add info window in amMap?

I have created amMap to plot areas and I want to disable tooltip and add infowindow on click in particular state. How can I do this.

Upvotes: 2

Views: 1595

Answers (1)

martynasma
martynasma

Reputation: 8595

If you want to disable tooltips, set balloonText to an empty string in areasSettings.

"areasSettings": {
  "balloonText": ""
}

To display a description on click on some state, simply add "description" property to that states' area definition:

"dataProvider": {
    "map": "usaLow",
    "getAreasFromMap": true,
    "areas": [{
      "id": "US-TX",
      "description": "Texas is a large state in the southern U.S. with deserts, pine forests and the Rio Grande, a river that forms its border with Mexico. In its biggest city, Houston, the Museum of Fine Arts houses works by well-known Impressionist and Renaissance painters, while Space Center Houston offers interactive displays engineered by NASA. Austin, the capital, is known for its eclectic music scene."
    }]
  }

Please remember to also include ammap.css because description box is styled with a CSS.

Here's a working demo:

var map = AmCharts.makeChart( "chartdiv", {
  "type": "map",
  "theme": "light",
  "dataProvider": {
    "map": "usaLow",
    "getAreasFromMap": true,
    "areas": [{
      "id": "US-TX",
      "description": "Texas is a large state in the southern U.S. with deserts, pine forests and the Rio Grande, a river that forms its border with Mexico. In its biggest city, Houston, the Museum of Fine Arts houses works by well-known Impressionist and Renaissance painters, while Space Center Houston offers interactive displays engineered by NASA. Austin, the capital, is known for its eclectic music scene."
    }]
  },
  "areasSettings": {
    "autoZoom": true,
    "balloonText": ""
  }
} );
#chartdiv {
  width: 100%;
  height: 500px;
}
<link href="http://www.amcharts.com/lib/3/ammap.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

Upvotes: 5

Related Questions