js error using vectormap


Topic: js error using vectormap

menso asked 3 years ago

Expected behavior

Including <div id="world-map" style="width:100%;height:175px;"></div> in my html and $('#world-map').vectorMap(); in section will show a vector world map in the location of the div

Actual behavior Receive a javascript error: Error: <g> attribute transform: Expected number, "scale(NaN) translate(N…". jvm.SVGCanvasElement.applyTransformParams @ jquery-jvectormap-2.0.3.min.js:1

Resources (screenshots, code snippets etc.) The is located in tab on a panel, see code below for context:

<div class="view view-cascade gradient-card-header blue-gradient"> <div class="tab-content pt-5" id="graphTabs"> <div class="tab-pane fade active show" id="blocked-sites" role="tabpanel" aria-labelledby="blocked-sites-tab"> <canvas id="blockedChart" height="175"></canvas> </div> <div class="tab-pane fade" id="traffic" role="tabpanel" aria-labelledby="traffic-tab"> <canvas id="trafficChart" height="175"></canvas> </div> <div class="tab-pane fade" id="map" role="tabpanel" aria-labelledby="map-tab"> <div class="container-fluid"> <div id="world-map" style="width:100%;height:175px;"></div> </div> </div> </div> </div> <div> <ul class="nav nav-tabs md-tabs" id="myBlockedSites" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="blocked-sites-tab" data-toggle="tab" href="#blocked-sites" role="tab" aria-controls="blocked-sites" aria-selected="true">Blocked Sites</a> </li> <li class="nav-item"> <a class="nav-link" id="traffic-tab" data-toggle="tab" href="#traffic" role="tab" aria-controls="traffic" aria-selected="false">Traffic</a> </li> <li class="nav-item"> <a class="nav-link" id="map-tab" data-toggle="tab" href="#map" role="tab" aria-controls="map" aria-selected="false">Devices around the globe</a> </li> </ul> </div> </div>


Marta Szymanska staff pro premium answered 3 years ago

Hi,

add this CSS code to your styles:

.tab-content > .tab-pane:not(.active) { display: block; height: 0; overflow-y: hidden; }

Best, Marta


Enrico Isola commented a year ago

You're a God!!!!


menso answered 3 years ago

That worked, thanks! Is there something additional I need to do to make the map show up in a modal? E.g. I have a tabbed modal (with tabs on one of the tabs) and the chart doesn't show up there despite applying the styles.

` Settings Statistics

    <!-- Tab panels -->
    <div class="tab-content">

      <!-- Panel 1 -->
      <div class="tab-pane fade in show active" id="panel1" role="tabpanel">

        <!-- Body -->
        <div class="modal-body mb-1">
          <div class="md-form form-inline">
            <table class="table table-borderless">
              <tbody>
                <tr>
                  <td style="width: 25%" class="align-middle">First name:</td>
                  <td class="align-bottom"><input type="text" class="form-control" form="usersettings" name="firstname" id="firstname" value=""></td>
                </tr>
                <tr>
                  <td style="width: 25%" class="align-middle">Last name:</td>
                  <td class="align-bottom"><input type="text" class="form-control" form="usersettings" name="lastname" id="lastname" value=""></td>
                </tr>
                <tr>
                  <td style="width: 25%" class="align-middle">E-mail address: </td>
                  <td class="align-bottom"><input type="text" class="form-control" form="usersettings" name="email" id="email" value=""></td>
                </tr>
                <tr>
                  <td style="width: 25%" class="align-middle">Activation code:</td>
                  <td class="align-bottom"><span class="activation-code"></span></td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- Footer -->
          <div class="modal-footer display-footer">
            <button type="button" class="btn btn-secondary btn-rounded waves-effect waves-light">Save Changes</button>
            <button type="button" class="btn btn-danger btn-rounded waves-effect waves-light" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
      <!-- Panel 1 -->

      <!--Panel 2-->
      <div class="tab-pane fade" id="panel2" role="tabpanel">

        <!-- Body -->
        <div class="modal-body">
         <div class="view view-cascade gradient-card-header blue-gradient">
          <div class="tab-content pt-5" id="graphTabs">
            <div class="tab-pane fade active show" id="blocked-sites" role="tabpanel" aria-labelledby="blocked-sites-tab">
              <canvas id="blockedChart" height="175"></canvas>
            </div>
            <div class="tab-pane fade" id="traffic" role="tabpanel" aria-labelledby="traffic-tab">
              <canvas id="trafficChart" height="175"></canvas>
            </div>
            <div class="tab-pane fade" id="map" role="tabpanel" aria-labelledby="map-tab">
              <div class="container-fluid">
                <div id="world-map" style="width:100%;height:395px;"></div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <ul class="nav nav-tabs md-tabs" id="myBlockedSites" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="blocked-sites-tab" data-toggle="tab" href="#blocked-sites" role="tab" aria-controls="blocked-sites" aria-selected="true">Blocked Sites</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="traffic-tab" data-toggle="tab" href="#traffic" role="tab" aria-controls="traffic" aria-selected="false">Traffic</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="map-tab" data-toggle="tab" href="#map" role="tab" aria-controls="map" aria-selected="false">Devices around the globe</a>
            </li>
          </ul>
        </div>
        </div>
        <!-- Footer -->
        <div class="modal-footer">
            <button type="button" class="btn btn-danger btn-rounded waves-effect waves-light" data-dismiss="modal">Close</button>
        </div>
      </div>
      <!-- Panel 2 -->
    </div>
  </div>
</div>

`


Marta Szymanska staff pro premium answered 3 years ago

Hi,

I can't reproduce the problem with the code you pasted above. Would you create a correct formatted code in the snippet here: https://mdbootstrap.com/snippets/?

Best, Marta


menso commented 3 years ago

Hi,

I tried this before but your snippet code seems to try to push all the form data through the URL which results in errors like HTTP 414 when submitting larger chunks of code. This happens both through the button on this page as well as through the URL you provided. Switching to HTTP POST would solve this issue.

In the mean time, I've put the code up here: https://gist.github.com/mensoh/b3523c8f500a1659d83177c9875082c0

Thanks!


Marta Szymanska staff pro premium answered 3 years ago

Hi,

when I open your code, in the live preview I see only this: enter image description here

I don't see any button to open a modal and any tabs. Are you sure you've sent me a fully working code?

Best, Marta


menso answered 3 years ago

I thought pasting just the relevant sections might be useful but I guess it doesn't work. Sorry for that. Here's the full html page: https://gist.github.com/mensoh/2d1d78f7fddb4ef5b8ab618306c98693

here when you click on a user in the table you should get a modal that has tabs on the top, when clicking statistics you get new tabs at the bottom of the model: the jsvectormap (most right option) does not render.

Thanks


Bartłomiej Malanowski staff pro premium commented 3 years ago

What's your version of jvectormap?


menso commented 3 years ago

The jvectormap version is 2.0.3 as included with the admin theme.


Bartłomiej Malanowski staff pro premium commented 3 years ago

I can see many errors in the console while trying to run your snippet. I this could be fixed by updating the jvectormap


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.6
  • Device: OS X
  • Browser: Chrome
  • OS: Any
  • Provided sample code: No
  • Provided link: No
Tags