Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
I have a html+js project which I'm wrapping into an extension. My extension js starts off with the following definition:
define( [
'jquery',
'./d3.v3.min',
'./d3.geo.projection.v0.min',
'./topojson.v1.min',
'./jquery-2.1.1.min',
'./datamaps.world.min',
'text!./map.css',
'text!./font-awesome.min.css'
],
then followed by a chunk of js code that calls:
var map = new Datamap({
scope: 'world',
element: document.getElementById('firstdiv'),
I keep getting ReferenceError: Datamap is not defined even after confirming the paths are correct via console log.
Here are the methods that I've tried:
1) Loading the js in paint function via require.toUrl and jQuery.getScript, appending the js to head, $.getScript the full url outside the main function
2) Combining all the js into one, and also embedding them in the extension js
3) sync and async methods of ajax js loading
4) Adding the js objects to function($) { : function($, D3, Projection, TopoJson, Datamaps, cssContent) {
and a combination of other ways, but I still end up with the ReferenceError: Datamap is not defined
Any help please?
Hi,
I haven't tried this, but since datamaps has AMD support your approach # 4 would probably be the way to go.
But if you write:
function($, D3, Projection, TopoJson, Datamaps, cssContent) {
you would need to write:
var map = new Datamaps({
scope: 'world',
element: document.getElementById('firstdiv'),
Or perhaps better, use Datamap (without the s) in both places.
Don't know if this helps, but it should be worth a try....
Erik
Hey,
It was because dependencies of the js files had to be defined in requirejs. Works now.