Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jzabate opened this issue Apr 8, 2020 · 0 comments

Comments

@jzabate
Copy link

jzabate commented Apr 8, 2020

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.
@jzabate jzabate changed the title Got error implementing the lists of examples on the official site with bootstrap 4 navigation tabs. Got error implementing the lists of examples on the official site with bootstrap 4 nav tabs. Apr 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant