Utiliser React pour créer des cartes avec AmMaps

Question

J'utilise ReactJs pour créer une carte des États-Unis avec la bibliothèque AmCharts. Ce que je veux exactement est le suivant : https://www.amcharts.com/demos/us-heat-map/ . Lorsque vous vérifiez son code sur fiddle, vous remarquerez qu'ils ont utilisé une bibliothèque distincte pour la carte des États-Unis dans la balise script.

J'ai vérifié la documentation de amcharts avec react ici https://github.com/amcharts/amcharts3-react mais je ne l'ai pas trouvé très utile. Comment puis-je mettre en œuvre cette carte ou toute autre carte de comté en utilisant React ? Suis-je censé inclure la bibliothèque des États-Unis dans mon fichier index.html ? J'ai essayé cette approche, mais je vois un écran vide sans aucune erreur. Vérifiez mon code ci-dessous :

import React, {Component} from 'react';
import AmCharts from "@amcharts/amcharts3-react";

export default class Map extends Component {
    render(){
    return(
    <div>
    <AmCharts.React style={{width: "100%",height: "500px"}}
        options={{
          "type": "serial",
          "theme": "light",
          "dataProvider": {
            "map": "usaLow",
            "areas": [ {
              "id": "US-AL",
              "value": 4447100
            }, {
              "id": "US-AK",
              "value": 626932
            }, {
              "id": "US-AZ",
              "value": 5130632
            }, {
              "id": "US-AR",
              "value": 2673400
            }, {
              "id": "US-CA",
              "value": 33871648
            }, {
              "id": "US-CO",
              "value": 4301261
            }, {
              "id": "US-CT",
              "value": 3405565
            }, {
              "id": "US-DE",
              "value": 783600
            }, {
              "id": "US-FL",
              "value": 15982378
            }, {
              "id": "US-GA",
              "value": 8186453
            }, {
              "id": "US-HI",
              "value": 1211537
            }, {
              "id": "US-ID",
              "value": 1293953
            }, {
              "id": "US-IL",
              "value": 12419293
            }, {
              "id": "US-IN",
              "value": 6080485
            }, {
              "id": "US-IA",
              "value": 2926324
            }, {
              "id": "US-KS",
              "value": 2688418
            }, {
              "id": "US-KY",
              "value": 4041769
            }, {
              "id": "US-LA",
              "value": 4468976
            }, {
              "id": "US-ME",
              "value": 1274923
            }, {
              "id": "US-MD",
              "value": 5296486
            }, {
              "id": "US-MA",
              "value": 6349097
            }, {
              "id": "US-MI",
              "value": 9938444
            }, {
              "id": "US-MN",
              "value": 4919479
            }, {
              "id": "US-MS",
              "value": 2844658
            }, {
              "id": "US-MO",
              "value": 5595211
            }, {
              "id": "US-MT",
              "value": 902195
            }, {
              "id": "US-NE",
              "value": 1711263
            }, {
              "id": "US-NV",
              "value": 1998257
            }, {
              "id": "US-NH",
              "value": 1235786
            }, {
              "id": "US-NJ",
              "value": 8414350
            }, {
              "id": "US-NM",
              "value": 1819046
            }, {
              "id": "US-NY",
              "value": 18976457
            }, {
              "id": "US-NC",
              "value": 8049313
            }, {
              "id": "US-ND",
              "value": 642200
            }, {
              "id": "US-OH",
              "value": 11353140
            }, {
              "id": "US-OK",
              "value": 3450654
            }, {
              "id": "US-OR",
              "value": 3421399
            }, {
              "id": "US-PA",
              "value": 12281054
            }, {
              "id": "US-RI",
              "value": 1048319
            }, {
              "id": "US-SC",
              "value": 4012012
            }, {
              "id": "US-SD",
              "value": 754844
            }, {
              "id": "US-TN",
              "value": 5689283
            }, {
              "id": "US-TX",
              "value": 20851820
            }, {
              "id": "US-UT",
              "value": 2233169
            }, {
              "id": "US-VT",
              "value": 608827
            }, {
              "id": "US-VA",
              "value": 7078515
            }, {
              "id": "US-WA",
              "value": 5894121
            }, {
              "id": "US-WV",
              "value": 1808344
            }, {
              "id": "US-WI",
              "value": 5363675
            }, {
              "id": "US-WY",
              "value": 493782
            } ]
          }
        }} />
   </div>
   );
 }
}

J'ai ajouté les bibliothèques suivantes à partir de http://jsfiddle.net/api/post/library/pure/ à mon fichier index.html

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js">
</script>

Si ce n'est pas la bonne méthode, veuillez m'indiquer l'approche correcte.

Answer 1

Dans une simple create-react-app, il suffit de placer ce code dans votre App.js

import React, { Component } from 'react';
import AmCharts from "@amcharts/amcharts3-react";

class App extends Component {
render(){
 //config as same as yours but inside const
  const config = {
    "type": "map",
    "theme": "light",
    "colorSteps": 10,
    "dataProvider": {
        "map": "usaLow",
        "areas": [{
            "id": "US-AL",
            "value": 4447100
        },{//..all areas mentioned in question}]
    },
    "areasSettings": {
        "autoZoom": true
    },
    "valueLegend": {
        "right": 10,
        "minValue": "little",
        "maxValue": "a lot!"
    },
    "listeners": [{
        "event": "descriptionClosed",
        "method": function(ev) {
            ev.chart.selectObject();
        }
    }]
};

  return (
    <div className="App">
        <AmCharts.React style={{ width: "100%", height: "500px" }} options={config} />
    </div>);
   }
 }

il suffit de les inclure dans index.html

<link href="https://www.amcharts.com/lib/3/ammap.css" rel="stylesheet">
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>