Attempt to use map which was not loaded: world_mill

user_6849449 0
Viewed 3624

I'm using Reactjs to display a map with jvectormap-next. I have to use jquery because react-jvectormap stop getting supported I guess. Here is my code:

import React from "react";
import $ from "jquery";
window.jQuery = $;
require("jvectormap-next")($);

export default class App extends React.Component {
  getMap() {
    var gdpData = {
      AF: 16.63,
      AL: 11.58,
      DZ: 158.97
      // ...
    };

    $("#world-map-gdp").vectorMap({
      map: "world_mill",
      series: {
        regions: [
          {
            values: gdpData,
            scale: ["#C8EEFF", "#0071A4"],
            normalizeFunction: "polynomial"
          }
        ]
      },
      onRegionTipShow: function(e, el, code) {
        el.html(el.html() + " (GDP - " + gdpData[code] + ")");
      }
    });
  }
  render() {
    return (
      <div className="App">
        {this.getMap()}
      </div>
    );
  }
}

The error I'm getting is Attempt to use map which was not loaded: world_mill Can anyone help with this? Is there something else I need to import or add to my HTML file?

jvectormap reactjs jquery
3 Answers

I recieved this error because the 

<script src="/assets/jquery-jvectormap-2.0.3/jquery-jvectormap-2.0.3.min.js"></script>

needed to be included before the 

<script src="../Srcs/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>

Leon's answer is correct, this is just highlighting an additional check to make to ensure that people don't fall into the same trap that I did.

user_18347010

You need to include the map file (downloadable from the jvectormaps site) in you index page body or head section ie: 

<script src="/assets/jquery-jvectormap-2.0.3/jquery-jvectormap-2.0.3.min.js"></script>  
<script src="/assets/jquery-jvectormap-2.0.3/jquery-jvectormap-world-mill.js"></script>
user_48819710

Add the map attribute like below after adding the scripts and css

map: 'world_mill_en',
user_38072030
Related