Combining script from app.import with module imports

andywww · 2018-06-13 18:57:17 UTC

I’m having some problems with mixing app.import and import X from 'Y'

I am using ember-leaflet with the usual import { L } from 'ember-leaflet'; but would also like to include this plug-in which I am pulling in from /vendor in ember-cli-build.js with app.import('vendor/leaflet.awesome-markers.js');

github.com

lvoogdt/Leaflet.awesome-markers/blob/2.0/develop/dist/leaflet.awesome-markers.js

/*
  Leaflet.AwesomeMarkers, a plugin that adds colorful iconic markers for Leaflet, based on the Font Awesome icons
  (c) 2012-2013, Lennard Voogdt

  http://leafletjs.com
  https://github.com/lvoogdt
*/

/*global L*/

(function (window, document, undefined) {
    "use strict";
    /*
     * Leaflet.AwesomeMarkers assumes that you have already included the Leaflet library.
     */

    L.AwesomeMarkers = {};

    L.AwesomeMarkers.version = '2.0.1';

This file has been truncated. show original

However, when I come to use it:

import Controller from '@ember/controller';
import { L } from 'ember-leaflet';

export default Controller.extend({
  lng: -1.871569,
  lat: 53.802310,
  zoom: 10,
  tripIcon: L.AwesomeMarkers.icon({icon: 'flag-checkered', markerColor: 'red', prefix: 'fa'}),
  rideIcon: L.AwesomeMarkers.icon({icon: 'flag-checkered', markerColor: 'blue', prefix: 'fa'}),
  waypointIcon: L.AwesomeMarkers.icon({icon: 'flag-checkered', markerColor: 'green', prefix: 'fa'})
});

It doesn’t seem to recognise AwesomeMarkers as an object on L, I’m assuming because the L it is using is the one that comes in from ember-leaflet and leaflet.awesome-markers is trying to attach to a global L?

Please see below console output.

Any help to understand this would be appreciated.

andywww · 2018-06-13 23:22:34 UTC

No need to answer thanks, I had a bit of a crash course in Utils and rewrote the function that builds the marker as one.

Thanks.