How do I correctly use leaflet maps in Splunk 6.3?

[jeffland]

Pre-6.3 (up to 6.2.5), I did the following to work with leaflet maps in Splunk: I had a dashboard with

<dashboard script="mapscript.js" ...>
  <...

and in mapscript.js I had

require(['underscore',...,'leaflet'], function(_, ..., L){
    $('#dashboard').append('<div id="map" style="width: 100%; height: 650px"/>');
    var map = L.map('map').setView([51.00, 10.13], 3);

and from there, everything was fine. Sometimes this wouldn't work, so I changed to the following in mapscript.js:

require(['underscore',...], function(_, ...){
    var L = require('leaflet');
    $('#dashboard').append('<div id="map" style="width: 100%; height: 650px"/>');
    var map = L.map('map').setView([51.00, 10.13], 3);

which should basically do the same thing. Anyway, after upgrading to 6.3, I get the following error with it in config.js:6:

Uncaught Error: Module name "leaflet" has not been loaded yet for context: _. Use require([])

Ok, thanks for the helpful error message. So I changed my js to this:

require(['underscore',...], function(_, ...){
    var L = require(['leaflet']);
    $('#dashboard').append('<div id="map" style="width: 100%; height: 650px"/>');
    var map = L.map('map').setView([51.00, 10.13], 3);

which now yields

Uncaught TypeError: L.map is not a function

in mapscript.js on the third line. Ok, maybe I should go back to the old ways :

require(['underscore',...,'leaflet'], function(_, ..., L){
    $('#dashboard').append('<div id="map" style="width: 100%; height: 650px"/>');
    var map = L.map('map').setView([51.00, 10.13], 3);

which now yields the following in 6.3:

Uncaught Error: Dynamic load not allowed: contrib/leaflet/leaflet.css

in mvc.js:6. Uhm, okay then, I guess... unfortunately, googling this error returns zero results, so I have no idea what exactly to do here.
The funny thing is that I can enter

var L = require(['leaflet']);

on the console anytime after the page has loaded (and the console has given me one of the above errors) and BAM there is my fully functional L object. I can basically copy my .js code from the file into my console and it works, which is why I'm thinking this has something to do with dependencies. However, I've tried every combination I know of with

'splunkjs/mvc/simplexml/ready!',
'splunkjs/ready!',

each required and not required to no avail.
Based on the error message above about "dynamic load not allowed" I've also tried adding leaflet.css to my dashboard manually by placing it in app_folder/appserver/static with stylesheet="leaflet.css" in my dashboard tag, which didn't make a difference either.

I would really, really appreciate if there were some kind of comprehensive documentation on what exactly happens when and where with all things .js related in Splunk, and how to work with it properly. If such a documentation exists, please show me where; alternatively, please share your knowledge here with me (and others). Thanks!

[jeffland · Accepted solution]

Good news, the solution is simple (if you know how).

Instead of js like this

require(['underscore', ...], function (_, ...) {
    var L = require('leaflet');
    L.map(...
    // more code

(or any of the variants I tried above), you simply wrap everything like this:

require(['underscore', ...], function (_, ...) {
    require(['leaflet'], function (L) {
        L.map(...
        // more code

I don't know why having the 'leaflet' option in the "main" require array doesn't work. But since this fixes it, I hope it may prove helpful for others.