Combining script from app.import with module imports

Questions
1

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');

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.

40
401230×330 86.7 KB

2

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.