Help figuring out how to implement the plugin? about aurelia-leaflet HOT 7 CLOSED

hi @diegohb

So I spent a while trying to figure out what is going on here. I didn't get very far. I have no personal experience using aurelia-cli.
I removed all the code where you manually setup Leaflet within your app code as it was throwing some errors.
This got me to the point where aurelia-leaflet plugin is loaded but it fails to load aurelia-leaflet/leaflet.js because of the globalResources that should register the leaflet Custom Element.
I do not really now where the SystemJS map gets build when using aurelia-cli, but SystemJS needs to know where to load aurelia-leaflet/leaflet.js somehow.
I checked again with https://github.com/aurelia/skeleton-plugin and do not see any difference to aurelia-leaflet at a first glance.

Can you give me some information where this fails for you? Maybe you could try another plugin that registers a Custom Element that works so I could try to figure out what is different.
You could try to install the skeleton-plugin and use this as it is really minimal.

from aurelia-leaflet.

Thanks for responding. Aurelia-bootstrap seems to be working correctly and it registers a few custom elements. Seems like you've run into the same issue I'm seeing with that file. I spent some more time changing the generated dist js for commonjs and found basically you have to import in the custom element and export it out from index.js. i tried to fork and build after npm install & jspm install (0.60.11) and I'm getting gulp errors.

var _leafletEl = require("./leaflet");
....
exports.LeafletCustomElement = _leafletEl.LeafletCustomElement;

i may try to convert over to TS using the skeleton plugin..

from aurelia-leaflet.

@benib - could you this change and see if it compiles for you into the following? or something like it.
https://github.com/array-analytics/aurelia-leaflet/commit/855647d2b262c7333bbc40139eb555c05cc371d0

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});
exports.configure = configure;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _leaflet = require('leaflet');
var _leafletEl = require("./leaflet");

var _leaflet2 = _interopRequireDefault(_leaflet);

function configure(frameworkConfig) {
  var _ref = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];

  var _ref$LeafletDefaultImagePath = _ref.LeafletDefaultImagePath;
  var LeafletDefaultImagePath = _ref$LeafletDefaultImagePath === undefined ? 'jspm_packages/npm/[email protected]/dist/images/' : _ref$LeafletDefaultImagePath;

  _leaflet2['default'].Icon.Default.imagePath = LeafletDefaultImagePath;
  frameworkConfig.globalResources('./leaflet');
}

exports.LeafletCustomElement = _leafletEl.LeafletCustomElement;

from aurelia-leaflet.

@diegohb I do not get what you want to achieve with the mentioned commit. There is no need to export the class in this file. The whole purpose of this index.js is to make the Custom Element globally available by calling the globalResources and to set the LeafletDefaultImagePath leaflet config.

from aurelia-leaflet.

@diegohb I got it working with the following config in the bundle dependencies in aurelia.json:

{
    "name": "aurelia-leaflet",
    "path": "../node_modules/aurelia-leaflet/dist/amd",
    "main": "index",
    "resources": [
        "*.js",
        "*.html",
        "**/*.js"
    ]
},
{
    "name": "leaflet",
    "path": "../node_modules/leaflet/dist",            
    "main": "leaflet-src"
}

Please let me know if this works for you as well.

from aurelia-leaflet.

Hi @benib - thanks for spending some time on this. You're correct that exporting it was not necessary. The aurelia-cli dependency detection for the bundler will not pick up on the custom-element.html/.js without importing it from index.js. It would make sense to me that it would detect anything in .globalResources() as a dependency to grab, @jdanyow is this a bug I should report?

I can see how the config above will force it to work and be included in bundle but I don't think it's the intended way.. Ideally, the responsibility of identifying dependencies is isolated to the module's main file, i think..

thanks!

from aurelia-leaflet.

@benib - i confirmed it works - here's the latest code for anyone else that may be interested: https://github.com/diegohb/aurelia-leaflet-cluster

and specific changes w/ comments are isolated in the task005 branch.

thanks!

from aurelia-leaflet.