Search code examples
javascriptjqueryhighchartsconflicting-librarieshighmaps

Resolve Conflict When Using Highchart and Highmap together (TypeError: ma is not a function)


I've a page that contain chart and map menu for report function. Then, I choose Highchart-Highmap library to reach the purpose above. The chart function runs well but when I develop map function there's a error appear

TypeError: ma is not a function

  • I've traced the problem that the ma function is appear in highchart.js and highmaps.js but I don't know how to resolve this conflict.
  • I've try put jQuery.noConflict(); in highmaps but the conflict still appear

This how I code in main page

... some html code
<script type="text/javascript" src="././js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="././js/highcharts/highcharts-more.js"></script>
<script type="text/javascript" src="././js/highcharts/highcharts-3d.js"></script>            
<script type="text/javascript" src="././js/highcharts/modules/drilldown.js"></script>
<script type="text/javascript" src="././js/highcharts/modules/exporting.js"></script>

... some html code
<script type="text/javascript" src="././js/Highmaps/highmaps.js"></script>
<script type="text/javascript" src="././js/Highmaps/modules/data.js"></script>                
<script type="text/javascript" src="././js/Highmaps/modules/exporting.js"></script> 

How I can resolve this problem?


Solution

  • Instead of highmaps, you need to use map.js module.

    <script src="//code.highcharts.com/maps/modules/map.js"></script>
    

    Here is the documentation on using both together.