Doubts with jvectormap

0

I'm working with Jvectormap for the first time, and I used a basic code I found in github with the map of Brazil ( link ), I made my modification but I could not put the name of the states and markers with the mouse as I saw in other maps. Could someone help me?

<!DOCTYPE html>
<html>
  <head>
    <title>jVectorMap: Brazil map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="assets/css/main.css" type="text/css" media="screen" />
    <script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="assets/js/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script>
    <script src="assets/js/brazil.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="row">
                    <div class="col-sm-12">
                        <div class="white-box">
                            <h3 class="box-title">MAPA DO BRASIL</h3>
                            <div id="brazil-map"><div id="regionover"><span>??</span></div></div>
                        </div>
                    </div>
                </div>
    <script type="text/javascript">
      $(function () {
          var map_settings = {
              map: 'brazil',
                zoomButtons: false,
              zoomMax: 1,
                regionStyle: {
                  initial: {
                      'fill-opacity': 1,
                        stroke: '#fff',
                        'stroke-width': 100,
                        'stroke-opacity': 1,
                        cursor: 'pointer',
                    },
                    hover: {
                        fill: '#79E580',
                    }
                },
                backgroundColor: '#ffffff',
          markerStyle: {
              initial: {
                  fill: '#fff',
                  stroke: '#d5d5d5',
                  "fill-opacity": 1,
                  "stroke-width": 4,
                  "stroke-opacity": 1,
                  r: 10
              },
              hover: {
                  fill: '#fff',
                  stroke: '#d5d5d5',
                  "fill-opacity": 1,
                  "stroke-width": 3,
                  "stroke-opacity": 0.7,
                  r: 10
              }
          },
                markers: [{
                  values: 'Uberlândia', 
                coords: [130000, 120000],
                  name: 'Uberlândia',
                  style: {fill: '#fff'}},
                  {
                  values: 'Petrolina', 
                coords: [165000, 69000],
                  name: 'Petrolina',
                  style: {fill: '#fff'}
                }],
                series: {
                    regions: [{
                        values: {
                            // Região Norte
                            ac: '#79E580',
                            am: '#79E580',
                            ap: '#79E580',
                            pa: '#79E580',
                            ro: '#79E580',
                            rr: '#79E580',
                            to: '#79E580',
                            // Região Nordeste
                            al: '#79E580',
                            ba: '#79E580',
                            ce: '#79E580',
                            ma: '#79E580',
                            pb: '#79E580',
                            pe: '#79E580',
                            pi: '#79E580',
                            rn: '#79E580',
                            se: '#79E580',
                            // Região Centro-Oeste
                            df: '#79E580',
                            go: '#79E580',
                            ms: '#79E580',
                            mt: '#79E580',
                            // Região Sudeste
                            es: '#79E580',
                            mg: '#79E580',
                            rj: '#79E580',
                            sp: '#79E580',
                            // Região Sul
                            pr: '#79E580',
                            rs: '#79E580',
                            sc: '#79E580'
                        },
                        attribute: 'fill'
                    }]
                },
                container: $('#brazil-map'),
                onRegionOver: function (event, code) {
                    $('#regionover span').text(code);
                }
            };

            map = new jvm.WorldMap($.extend(true, {}, map_settings));
        });
    </script>
  </body>
</html>
    
asked by anonymous 05.03.2018 / 20:39

0 answers