Jquery-datatable script doesnt work after implemtation of Mapael Map

Jquery-datatable script doesnt work after implemtation of Mapael Map

I’m trying to implement the following template for a world map : https://rawgit.com/neveldo/jQuery-Mapael/2.2.0/examples/basic/legend_plotted_cities_areas.html into a existing template with jquerry datatables. But I’ve only managed to load one of the two functions (map or table) on the same html page. How can I run both functions on the same html page? 

  1. </div><!-- br-mainpanel --> <!-- ########## END: MAIN PANEL ########## --> <script src="../lib/jquery/jquery.js"></script> <script src="../lib/popper.js/popper.js"></script> <script src="../lib/bootstrap/bootstrap.js"></script> <script src="../lib/perfect-scrollbar/js/perfect-scrollbar.jquery.js">
  2. </script> <script src="../lib/moment/moment.js"></script> <script src="../lib/jquery-ui/jquery-ui.js"></script> <script src="../lib/jquery-switchbutton/jquery.switchButton.js">
  3. </script> <script src="../lib/peity/jquery.peity.js"></script> <script src="../lib/highlightjs/highlight.pack.js"></script> <script src="../lib/datatables/jquery.dataTables.js"></script> <script src="../lib/datatables-responsive/dataTables.responsive.js">
  4. </script> <script src="../lib/select2/js/select2.min.js"></script> <script src="../js/bracket.js"></script> <script> $(function () { 'use strict'; $('#datatable1').DataTable({ responsive: true, language: { searchPlaceholder: 'Search...', sSearch: '', lengthMenu: '_MENU_ items/page', } }); $('#datatable2').DataTable({ bLengthChange: false, searching: false, responsive: true }); // Select2 $('.dataTables_length select').select2({ minimumResultsForSearch: Infinity }); }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js" charset="utf-8"></script> <script src="../../js/jquery.mapael.js" charset="utf-8"></script> <script src="../../js/maps/france_departments.js" charset="utf-8"></script> <script src="../../js/maps/world_countries.js" charset="utf-8"></script> <script src="../../js/maps/usa_states.js" charset="utf-8"></script> <script type="text/javascript"> $(function () { $(".mapcontainer").mapael({ map: { name: "world_countries", defaultArea: { attrs: { stroke: "#fff", "stroke-width": 1 } } }, ....