Salve a tutti,
premessona: con java e jquery ho poco a che fare, lo mastico poco e male in quanto non è il mio linguaggio di programmazione.
Purtroppo ho sotto mano questo progettino che mi piace ma la mia limitazione in JS e JQR mi bloccano ad un punto morto.
Premessona 2: ho googlato, provato, testato(anche contro al muro) ma nisba.
Passiamo al dunque
Avendo la necessità di creare una mappa Italia SENZA usare le API di google, una cosa semplicissima, mi sono imbattuto in questo codice davvero funzionale e semplice
https://www.sitepoint.com/dynamic-geo-maps-svg-jquery/
Ho creato il file CSS e integrato all' interno del HTML, aggiunto il riferimento al Jquery e inserito il JSON all' interno del codice, e fin qui tutto bene.
Il problema è che a me servirebbe mantenere il JSON come file esterno, dato che viene creato da DB da una mia applicazione.
Dovrei quindi leggere il file JSON(che ho chiamato mappa.json) e "riempire" la variabile regions, ma non ci riesco
Ecco il codice(ho tagliato alcune parti ripetitive riguardo la costruzione dell' SVG , messo in grassetto e sottolineato il codice da me aggiunto per tentare di caricare il file JSON)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="jquery.min.js"></script>
</head>
<body>
<div class="map">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 -21.6 761 919" style="enable-background:new 0 -21.6 761 919;" xml:space="preserve">
<g id="sar">
<polygon class="st0" points="193,463 203.6,472.3 210,472.3 207.2,482 217.6,491.5 221.5,524.9 213.6,537.5 218.8,559.4
206.2,599.4 209.1,610.6 198.5,623.2 187,611.7 170.8,617.6 173.8,629.1 157.4,637.6 139.2,619.5 138.3,591.7 149.8,564.9
141.1,561.1 143.2,550.4 142.1,513.4 136.4,507.9 129,505.7 128.1,502.8 136.4,498.3 133.6,482 132.6,479 141.1,474.9 143.2,487.5
154.5,489.4 167.9,484.7 184,469.4 "/>
</g>
<g id="sic">
<polygon class="st0" points="374.4,704.6 363.7,710.2 365.6,729.2 370.8,741.8 400.2,750.4 430.8,770.3 449.7,778.2 467.9,785.6
477.6,799.1 494.8,802.9 510.9,810.6 515.5,805.6 510.1,797.2 522.6,780.1 516.6,763.8 508.2,760.7 512,736.1 521.6,725.5
530.9,694.8 513.7,694 507.3,703.5 497.5,696.7 483.2,705.5 469.8,710.2 448.8,706.5 439.2,713.1 421.2,704.6 410.5,705.5
410.5,695.9 391.6,696.7 393.5,709.3 385,711.2 "/>
</g>
<g id="cal">
<polygon class="st0" points="535.3,568.9 549.7,566.8 557.5,568.4 580.4,558.3 588.3,561.9 582.8,580.1 587.8,593.9 596.8,591.7
606.2,602.6 615.4,602.1 616.6,627.5 621.1,634.1 621.7,647.5 605.5,643.4 589.5,655.9 589.9,685 573.9,696.5 563.2,718 542.1,718
537.7,707.1 538,704.6 537.2,698.9 543.7,690.2 550.3,668.3 545.2,663.4 565.1,654 553.9,610.2 543.7,597.2 "/>
</g>
<g id="bas">
<polyline class="st0" points="601.7,531.5 594.6,517.6 583.9,510.9 573.6,513.4 562.7,498.3 554.7,497 551.1,487.2 545.2,482.3
538.9,485.6 527.8,485.3 527.8,498.6 518.5,502.5 524.9,524.7 542.4,549.6 537.7,552 530.3,566.2 530.3,566.2 534.7,568.9
549.8,566.8 557.5,568.7 570.2,562.7 581.3,558 588.9,561.6 590.2,556.4 601.7,531.5 "/>
</g>
<g id="pug">
<polygon class="st0" points="495.8,462 495.1,451.6 501.6,439.3 506.3,426.9 506.3,426.5 512,428.1 558.6,429.1 565.1,437.9
547.1,448.5 610,486.6 635.1,505.7 659,514.3 667.4,531.5 685.5,542.1 689.6,551.7 683.6,564 685.5,576.3 663.8,570.9 658.1,560.2
655.1,548.7 636,544.9 620.7,535.3 617.9,531.5 601.7,531.5 594.6,517.6 583.9,510.9 573.6,513.4 562.7,498.3 554.7,497
551.1,487.2 545.2,482.3 538.9,485.6 512,486.3 509.5,472.6 502.5,470.4 501.6,462.3 "/>
</g>
<g id="cam">
<polyline class="st0" points="430.8,479 451.6,508.7 460.5,507.9 470.9,524.1 489.6,523.2 498.6,538.3 493.9,549.6 509,555.6
530,566.5 530.3,565.1 537.7,552 542.4,549.6 524.9,524.7 518.5,502.5 527.8,498.6 527.8,485.6 525.9,486 512,486.3 509.5,472.6
502.5,470.4 501.6,462.3 495.8,462 477.2,466.7 462.3,457.3 450.4,464.2 436.3,463.3 439.2,472.6 430.8,479 "/>
</g>
........ALTRE REGIONI TAGLIATE.....
</svg>
<script>
var regions;
$.getJSON('mappa.json')
.done(function (data) {
regions = data;
});
var temp_array= regions.map(function(item){
return item.population;
});
var highest_value = Math.max.apply(Math, temp_array);
$(function() {
for(i = 0; i < regions.length; i++) {
$('#'+ regions[i].region_code)
.css({'fill': 'rgba(0,0,0,' + regions[i].population/highest_value +')'})
.data('region', regions[i]);
}
$('.map g').mouseover(function (e) {
var region_data=$(this).data('region');
$('<div class="info_panel">'+
region_data.region_name + '<br>' +
'Population: ' + region_data.population.toLocaleString("en-UK") +
'</div>'
)
.appendTo('body');
})
.mouseleave(function () {
$('.info_panel').remove();
})
.mousemove(function(e) {
var mouseX = e.pageX, //X coordinates of mouse
mouseY = e.pageY; //Y coordinates of mouse
$('.info_panel').css({
top: mouseY-50,
left: mouseX - ($('.info_panel').width()/2)
});
});
});
</script>
</div>
</body>
</html>
Il file JSON contiene questo
[
{
"region_name": "Lombardia",
"region_code": "lom",
"population": 1,
"indice":10
},
{
"region_name": "Campania",
"region_code": "cam",
"population": 8,
"indice":10
},
{
"region_name": "Lazio",
"region_code": "laz",
"population": 4,
"indice":10
}
.....le altre le ho tagliate per semplificare
];
A questo punto mi chiedo...dove sbaglio?
Grazie a tutti
e buon Lavoro
Salvo