bjornd / jvectormap

jvectormap.com
GNU Affero General Public License v3.0
1.39k stars 430 forks source link

Got error implementing the lists of examples on the official site with bootstrap 4 nav tabs. #463

Open jzabate opened 4 years ago

jzabate commented 4 years ago

I slightly modified the lists examples on the official site from GDP by country visualization to Reverse projection with the plugins below:

/js/jquery-3.4.1.min.js
/js/bootstrap.min.js
/js/modernizr.js
/js/jquery-jvectormap-2.0.5.min.js
/js/jquery-jvectormap-world-mill.js
/js/gdp-data.js
/js/jquery-jvectormap-us-aea.js
/js/jquery-jvector-de-merc.js
/js/jquery-jvectormap-fr_regions-merce.js
/js/jquery-jvectormap-es-merce.js
/js/mall-map.js
/js/jquery-jvectormap-us-lcc.js
/js/jquery-ui.min.js
/js/json2.js

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.