Insert clickable link on a map with JSON

Asked

Viewed 202 times

0

I’m trying to put together a map of the state of Espírito Santo, where you click on the city and can access the content for each municipality. I found a framework (Fusioncharts) that I managed to do this, but I can’t get it right as I pass the values so that each city on the map is clickable. Link: (http://www.danieldias.info/projetos/acidentesflorestais/)

 <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<!-- Including the map renderer file -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js "></script>
<!-- Including the map definition file -->
<script type="text/javascript" src="fusioncharts.espiritosanto.js"></script>
<!-- Including the fusion theme -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function() {
        var annualPopulation = new FusionCharts({
            "type": "maps/espiritosanto",
            "renderAt": "chart-container",
            "width": "100%",
            "height": "430",
            "dataFormat": "json",
            "dataSource": {
                // Map Configuration
                "chart": {
                    //"caption": "Índice de Acidentes Florestais no Espirito Santo",
                    //"subcaption": " 1955-2015",
                    "numbersuffix": "%",
                    "includevalueinlabels": "1",
                    "labelsepchar": ": ",
                    "entityFillHoverColor": "#27ae60",
                    "theme": "fusion"
                },
                // Aesthetics; ranges synced with the slider
                /*"colorrange": {
                    "minvalue": "0",
                    "code": "#27ae60",
                    "gradient": "1",
                    "color": [{
                        "minvalue": "0.5",
                        "maxvalue": "1.0",
                        "color": "#FFD74D"
                    }, {
                        "minvalue": "1.0",
                        "maxvalue": "2.0",
                        "color": "#FB8C00"
                    }, {
                        "minvalue": "2.0",
                        "maxvalue": "3.0",
                        "color": "#E65100"
                    }]
                },*/

                "data": [{
                    "id":"AC",
                    "label":"Afonso Cláudio",
                    "link" : "estado.html"

                },  ]

            }
        });
        annualPopulation.render();
    });
</script>
json

  • Important [edt] and reduce the problem to a [mcve] of specific doubt, always taking into account the site scope. Links to better understand how Sopt works: [Tour], [Ask], Manual on how NOT to ask questions and [Help].

1 answer

0


You can use the callback of the component after it is rendered:

annualPopulation.render(function(){
   // callback
});

Inside the callback you will traverse all the path creating a onclick for each one:

annualPopulation.render(function(){
  var paths = document.querySelectorAll("#chart-container path");
  for(let x=0; x < paths.length; x++){
     paths[x].onclick = function(){
        var area = document.querySelector(".fc__tooltip").textContent;
        alert(area);
     }
  }
});

The element with the class .fc__tooltip has the name of the area where the cursor is positioned, and you can take that name with .textContent.

To change the mouse cursor, use the property below in CSS:

#chart-container path{
   cursor: pointer;
}

Behold:

<!DOCTYPE html>
<html>
<head>
<style>
#chart-container path{
   cursor: pointer;
}
</style>
<meta charset="utf-8">
    <title>T</title>
    <!-- Including the fusioncharts core library -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <!-- Including the map renderer file -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js "></script>
    <!-- Including the map definition file -->
    <script type="text/javascript" src="fusioncharts.espiritosanto.js"></script>
    <!-- Including the fusion theme -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
    <script type="text/javascript">
        FusionCharts.ready(function() {
           
           
            var annualPopulation = new FusionCharts({
                "type": "maps/espiritosanto",
                "renderAt": "chart-container",
                "width": "800",
                "height": "550",
                "dataFormat": "json",
                "dataSource": {
                    // Map Configuration
                    "chart": {
                        "caption": "Índice de Acidentes Florestais no Espirito Santo",
                        "subcaption": " 1955-2015",
                        "numbersuffix": "%",
                        "includevalueinlabels": "1",
                        "labelsepchar": ": ",
                        "entityFillHoverColor": "#FFF9C4",
                        "theme": "fusion"
                    },
                    // Aesthetics; ranges synced with the slider
                    /*"colorrange": {
                        "minvalue": "0",
                        "code": "#FFE0B2",
                        "gradient": "1",
                        "color": [{
                            "minvalue": "0.5",
                            "maxvalue": "1.0",
                            "color": "#FFD74D"
                        }, {
                            "minvalue": "1.0",
                            "maxvalue": "2.0",
                            "color": "#FB8C00"
                        }, {
                            "minvalue": "2.0",
                            "maxvalue": "3.0",
                            "color": "#E65100"
                        }]
                    },*/
                    // Source data as JSON --> id represents countries of world.
                    "data": [{
                        "id": "NA",
                        "value": ".82",
                        "showLabel": "1"
                    }, {
                        "id": "SA",
                        "value": "2.04",
                        "showLabel": "1"
                    }, {
                        "id": "AS",
                        "value": "1.78",
                        "showLabel": "1"
                    }, {
                        "id": "EU",
                        "value": ".40",
                        "showLabel": "1"
                    }, {
                        "id": "AF",
                        "value": "2.58",
                        "showLabel": "1"
                    }, {
                        "id": "AU",
                        "value": "1.30",
                        "showLabel": "1"
                    }]
                }
            });
            annualPopulation.render(function(){
              var paths = document.querySelectorAll("#chart-container path");
              for(let x=0; x < paths.length; x++){
                 paths[x].onclick = function(){
                    var area = document.querySelector(".fc__tooltip").textContent;
                    alert(area);
                 }
              }
            });

        });
    </script>
</head>

<body>
    <div id="chart-container">FusionMaps XT will load map here!</div>
</body>
</html>

  • I copied the excerpt of the code to test it worked really well, but there’s been an error that when I delete some chunk of the code that has nothing to do with the title, subtitle or that little bar at the bottom of the rendering code you sent, it stops working, because?

  • Depends on which part you’re erasing.

  • Caption, subcaption and color range

  • Then I don’t know. I just answered using the code you put in the question :D

  • In the code I posted there are some parts that are marked as comment you can do with these parts still as comment?

  • Yeah, I just had to change the dial. I changed the answer.

  • Would you be so kind.

  • I already changed the answer commenting on colorrange and it’s working. As I said, it was spo change the selector to "#chart-container path".

  • Thank you very much, you solved the problem perfectly.

  • Buddy, I can define a color for each city?

  • Maybe it’s possible.

  • Which element would I change the color in Java script? I noticed in the code a Stroke that contains the gray color.

Show 7 more comments

Browser other questions tagged json

You are not signed in. Login or sign up in order to post.