The lists of the js above is concatenated into a single js file called /js/all-concat-plugin.min.js
Another file called /js/plugin-init.js for the code implementation example below:
$("a[data-toggle="tab"]").on("shown.bs.tab", function(e) {
var $this = $(this),
href = $this.attr("href");
if ( $this.attr('data-init') )
return;
$this.attr('data-init', 1);
switch ( href ) {
case '#tab1':
initWorldMapGDP();
break;
case '#tab2':
initWorldMapMarkers();
break;
case '#tab3':
initUSAUnemployment();
break;
case '#tab4':
initRegionSelection();
break;
case '#tab5':
initFranceElections();
break;
case '#tab6':
initRandomColors();
break;
case '#tab7':
initMallMap();
break;
case '#tab8':
initProjectionMap();
break;
default:
console.log("Invalid input");
}
});
var map,
markerIndex = 0,
markersCoords = {};
map = new jvm.Map({
map: 'us_lcc',
markerStyle: {
initial: {
fill: 'red'
}
},
container: $('#map'),
onMarkerTipShow: function(e, label, code){
map.tip.text(markersCoords[code].lat.toFixed(2)+', '+markersCoords[code].lng.toFixed(2));
},
onMarkerClick: function(e, code){
map.removeMarkers([code]);
map.tip.hide();
}
});
map.container.click(function(e){
var latLng = map.pointToLatLng(
e.pageX - map.container.offset().left,
e.pageY - map.container.offset().top
),
targetCls = $(e.target).attr('class');
if (latLng && (!targetCls || (targetCls && $(e.target).attr('class').indexOf('jvectormap-marker') === -1))) {
markersCoords[markerIndex] = latLng;
map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
markerIndex += 1;
}
});
.... and so and so fort for the other code implementation for the other examples.
});```
Actual console errors:
Error: <g> attribute transform: Expected number, "scale(NaN) translate(N…".
Error: <circle> attribute cx: Expected length, "NaN".
When first load and clicking up to 3 or 4 examples triggers the console error.
Hope someone can point me to the resolution of this issue. By the way, I'm using the free version.
I slightly modified the lists examples on the official site from GDP by country visualization to Reverse projection with the plugins below:
The lists of the js above is concatenated into a single js file called
/js/all-concat-plugin.min.js
Another file called
/js/plugin-init.js
for the code implementation example below: