Pagina WEB con schede realizzate in Javascript e contenenti mappe JVectorMap

**gtorassa** · 13-12-2016, 11:33

Sto cercando di creare una pagina WEB dinamica, in cui sono visualizzati tre schede realizzate in Javascript.
Semplicemente, cliccando sul nome di una scheda si visualizza il <DIV> relativo.
All'interno del <DIV> associato alla scheda, è presente un altro <DIV> che contiene una mappa realizzata con libreria JVectorMap (quindi sempre Javascript).
La pagina non funziona in quanto solo una scheda mi mostra la mappa, le altre due schede o non mostrano nulla (con Firefox) o mostrano una mappa di dimensioni minuscole (con Chrome).
Il codice e i file CSS sono i seguenti:

codice HTML:

<html>
<head>
  <title>TITLE</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

  <link href="css/graphtabs.css" rel="stylesheet" type="text/css">

  <link rel="stylesheet" href="css/jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>
  <script src="include/jquery-1.9.1.js"></script>
  <script src="include/jquery-jvectormap-2.0.3.min.js"></script>
  <script src="include/jquery-jvectormap-world-mill-en.js"></script>
  <script src="data.js"></script>
</head>

<body>
        <ul class="tab">
            <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'world-map-gdp_1')" id="ntrOpen">TAB 1</a></li>
            <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'world-map-gdp_2')" id="unityOpen">TAB 2</a></li>
            <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'world-map-gdp_3')" id="equaOpen">TAB 3</a></li>
        </ul>

        <div id="world-map-gdp_1" style="width: 1200px; height: 800px" class="tabcontent"></div>
        <script>
            $(function(){
                $('#world-map-gdp_1').vectorMap({
                      map: 'world_mill_en',
                      backgroundColor:  "#0080FF",
                      series: {
                        regions: [{
                          values: Color,
                          scale: ['#FFFFFF', '#FF0000'],
                          normalizeFunction: 'linear'
                        }]
                      },
                    });

            });
        </script>


        <div id="world-map-gdp_2" style="width: 1200px; height: 800px" class="tabcontent"></div>
        <script>
            $(function(){
                $('#world-map-gdp_2').vectorMap({
                      map: 'world_mill_en',
                      backgroundColor:  "#0080FF",
                      series: {
                        regions: [{
                          values: Color,
                          scale: ['#FFFFFF', '#FF0000'],
                          normalizeFunction: 'linear'
                        }]
                      },
                    });

            });
        </script>

        <div id="world-map-gdp_3" style="width: 1200px; height: 800px" class="tabcontent"></div>
        <script>
            $(function(){
                $('#world-map-gdp_3').vectorMap({
                      map: 'world_mill_en',
                      backgroundColor:  "#0080FF",
                      series: {
                        regions: [{
                          values: Color,
                          scale: ['#FFFFFF', '#FF0000'],
                          normalizeFunction: 'linear'
                        }]
                      },
                    });

            });
        </script>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

document.getElementById("ntrOpen").click();
</script>

</body>
</html>


*************************************************
******      graphtabs.css       *********
*************************************************


/* Style the list */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}


*************************************************
****************     data.js    *****************
*************************************************

var TMEDIO = {
"AF": [0, "ok"],
"AL": [94, "ok"],
"DZ": [90, "ok"]
};
var PERCOLTREMAX = {
"AF": [0, "ok"],
"AL": [1, "ok"],
"DZ": [1, "ok"]
};
var TOTREG = {
"AF": [62, "ok"],
"AL": [1947, "ok"],
"DZ": [371, "ok"]
};
var Color = {
"AF": [0, "ok"],
"AL": [0, "ok"],
"DZ": [0, "ok"]
};


*************************************************
******    jquery-jvectormap-2.0.3.css   *********
*************************************************

svg {
    touch-action: none;
}

.jvectormap-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    touch-action: none;
}

.jvectormap-tip {
    position: absolute;
    display: none;
    border: solid 1px #CDCDCD;
    border-radius: 3px;
    background: #292929;
    color: white;
    font-family: sans-serif, Verdana;
    font-size: smaller;
    padding: 3px;
}

.jvectormap-zoomin, .jvectormap-zoomout, .jvectormap-goback {
    position: absolute;
    left: 10px;
    border-radius: 3px;
    background: #292929;
    padding: 3px;
    color: white;
    cursor: pointer;
    line-height: 10px;
    text-align: center;
    box-sizing: content-box;
}

.jvectormap-zoomin, .jvectormap-zoomout {
    width: 10px;
    height: 10px;
}

.jvectormap-zoomin {
    top: 10px;
}

.jvectormap-zoomout {
    top: 30px;
}

.jvectormap-goback {
    bottom: 10px;
    z-index: 1000;
    padding: 6px;
}

.jvectormap-spinner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: center no-repeat url(data:image/gif;base64,...);
}

.jvectormap-legend-title {
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}

.jvectormap-legend-cnt {
    position: absolute;
}

.jvectormap-legend-cnt-h {
    bottom: 0;
    right: 0;
}

.jvectormap-legend-cnt-v {
    top: 0;
    right: 0;
}

.jvectormap-legend {
    background: black;
    color: white;
    border-radius: 3px;
}

.jvectormap-legend-cnt-h .jvectormap-legend {
    float: left;
    margin: 0 10px 10px 0;
    padding: 3px 3px 1px 3px;
}

.jvectormap-legend-cnt-h .jvectormap-legend .jvectormap-legend-tick {
    float: left;
}

.jvectormap-legend-cnt-v .jvectormap-legend {
    margin: 10px 10px 0 0;
    padding: 3px;
}

.jvectormap-legend-cnt-h .jvectormap-legend-tick {
    width: 40px;
}

.jvectormap-legend-cnt-h .jvectormap-legend-tick-sample {
    height: 15px;
}

.jvectormap-legend-cnt-v .jvectormap-legend-tick-sample {
    height: 20px;
    width: 20px;
    display: inline-block;
    vertical-align: middle;
}

.jvectormap-legend-tick-text {
    font-size: 12px;
}

.jvectormap-legend-cnt-h .jvectormap-legend-tick-text {
    text-align: center;
}

.jvectormap-legend-cnt-v .jvectormap-legend-tick-text {
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
    padding-left: 3px;
}

Il codice è completo (si può quindi usare per testarlo), qualcuno può dirmi perchè non funziona?

Grazie
ciao
giorgio

**ciro78** · 13-12-2016, 15:20

scusami ma quanti account hai? hai fatto un up su una discussione non tua?
Inoltre questa firma? Se non posti una pagina di esempio non ti possiamo aiutare. Il solo codice che hai fornito non basta

**gtorassa** · 13-12-2016, 15:54

Ho un account solo e ho iniziato la discussione. Non so chi sia global02.
Per quanto riguarda la pagina di esempio la potete trovare in http://digilander.libero.it//gi.torassa/maps.html

Discussione: Pagina WEB con schede realizzate in Javascript e contenenti mappe JVectorMap

Strumenti discussione

Ricerca discussione

Visualizza

Pagina WEB con schede realizzate in Javascript e contenenti mappe JVectorMap

Tag per questa discussione

Permessi di invio