Интерактивная карта amcharts: превращение выбранных состояний в интерактивную ссылку

Question

Я создаю личный блог-сайт. Я наткнулся на интерактивную карту посещенных состояний, которую я хотел реализовать на одной из моих html-страниц. Я смог успешно разместить его на своем веб-сайте с созданным HTML, который они предоставили. Тем не менее, я хотел немного подправить его, но я не все знакомы с javascript.

Я хочу добавить две вещи:

1-й: сделать ссылку на выбранные состояния определенной HTML-страницей. 2-й (необязательно): отключите масштабирование и изменение цвета при нажатии на состояния, которые не выделены (посещены).

Вот код, который у меня есть в настоящее время:

<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaHigh.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 1000px; height: 450px; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; cursor: default;"></div>
<script type="text/javascript">
var map = AmCharts.makeChart("mapdiv", {
type: "map",
theme: "light",
backgroundColor : "#FFFFFF",
backgroundAlpha : 1,
zoomControl: {
zoomControlEnabled : false
},
dataProvider : {
map : "usaHigh",
getAreasFromMap : true,
areas :
[
 {
  "id": "US-AZ",
  "showAsSelected": true
 },
 {
  "id": "US-CA",
  "showAsSelected": true
 },
 {
  "id": "US-DC",
  "showAsSelected": true
 },
 {
  "id": "US-ID",
  "showAsSelected": true
 },
 {
  "id": "US-MA",
  "showAsSelected": true
 },
 {
  "id": "US-MT",
  "showAsSelected": true
 },
 {
  "id": "US-NJ",
  "showAsSelected": true
 },
 {
  "id": "US-NV",
  "showAsSelected": true
 },
 {
  "id": "US-NY",
  "showAsSelected": true
 },
 {
  "id": "US-OR",
  "showAsSelected": true
 },
 {
  "id": "US-PA",
  "showAsSelected": true
 },
 {
  "id": "US-WA",
  "showAsSelected": true
 },
 {
  "id": "US-WY",
  "showAsSelected": true
 }
]
},
areasSettings : {
autoZoom : true,
color : "#B4B4B7",
colorSolid : "#DB4646",
selectedColor : "#DB4646",
outlineColor : "#666666",
rollOverColor : "#9EC2F7",
rollOverOutlineColor : "#000000"
}
});
</script>

Answer 1

Вы можете добавить url собственности на государства, которые вы хотите ссылку. Вы также можете установить urlTarget в "_blank" если вы хотите сделать ссылку открытой в новой вкладке / окне:

areas: [{
    "id": "US-AZ",
    "showAsSelected": true,
    "url": "http://az.gov",
    "urlTarget": "_blank"
  },
  {
    "id": "US-CA",
    "showAsSelected": true,
    "url": "http://ca.gov/",
    "urlTarget": "_blank"
  },
  // ... etc

Я также рекомендую настройку autoZoom ложно и selectable чтобы правда в areasSettings так что карта не пытается увеличить перед запуском URL:

  areasSettings: {
    autoZoom: false,
    selectable: true,

Чтобы отключить масштабирование и изменение цвета в других состояниях, просто удалите getAreasFromMap: true от твоего dataProvider,

var map = AmCharts.makeChart("mapdiv", {
  type: "map",
  theme: "light",
  backgroundColor: "#FFFFFF",
  backgroundAlpha: 1,
  zoomControl: {
    zoomControlEnabled: false
  },
  dataProvider: {
    map: "usaHigh",
    areas: [{
        "id": "US-AZ",
        "showAsSelected": true,
        "url": "http://az.gov",
        "urlTarget": "_blank"
      },
      {
        "id": "US-CA",
        "showAsSelected": true,
        "url": "http://ca.gov/",
        "urlTarget": "_blank"
      },
      {
        "id": "US-DC",
        "showAsSelected": true
      },
      {
        "id": "US-ID",
        "showAsSelected": true
      },
      {
        "id": "US-MA",
        "showAsSelected": true
      },
      {
        "id": "US-MT",
        "showAsSelected": true
      },
      {
        "id": "US-NJ",
        "showAsSelected": true
      },
      {
        "id": "US-NV",
        "showAsSelected": true
      },
      {
        "id": "US-NY",
        "showAsSelected": true
      },
      {
        "id": "US-OR",
        "showAsSelected": true
      },
      {
        "id": "US-PA",
        "showAsSelected": true
      },
      {
        "id": "US-WA",
        "showAsSelected": true
      },
      {
        "id": "US-WY",
        "showAsSelected": true
      }
    ]
  },
  areasSettings: {
    autoZoom: false,
    selectable: true,
    color: "#B4B4B7",
    colorSolid: "#DB4646",
    selectedColor: "#DB4646",
    outlineColor: "#666666",
    rollOverColor: "#9EC2F7",
    rollOverOutlineColor: "#000000"
  }
});

<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaHigh.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 1000px; height: 450px; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; cursor: default;"></div>