How to import with Anuglar2 Ionic2 Typescript ?

[almgwary]

i want to use Leaflet.SmoothMarkerBouncing in Anuglar2 Ionic2 Typescript i am using types@leaflet

working code

import 'leaflet';

@Component({
  selector: 'map-me',
  templateUrl: 'map-me.html'
})
export class MapMeComponent {

  text: string;
  map:Map ;
  tileLayerOptions:TileLayerOptions = null;

  constructor() {
    console.log('Hello MapMeComponent Component');
    this.text = 'Hello World';
  }

  ngOnInit(): void {
    this.map = L.map('map').fitWorld();

    this.tileLayerOptions = {
      attribution: 'OQ &copy; <a href="http://oq.com">oq.com</a> ',
      maxZoom: 100,
      accessToken: 'MY.MAPBOX_API_KEY',
      id: 'mapbox.streets'
    };

    L.tileLayer(`https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}`, this.tileLayerOptions).addTo(this.map);

  }

}

when importing leaflet.smoothmarkerbouncing like import * as LSmoothmarkerbouncing from 'leaflet.smooth_marker_bouncing/leaflet.smoothmarkerbouncing.js'; it return LSmoothmarkerbouncing empty object {}

the leaflet.smooth_marker_bouncing/leaflet.smoothmarkerbouncing.js file is here

[hosuaby]

Leaflet.SmoothMarkerBouncing is a global dependency. Try: require('leaflet.smooth_marker_bouncing/leaflet.smoothmarkerbouncing');

[almgwary]

worked for me with the following

import 'leaflet';
import 'leaflet.smooth_marker_bouncing/leaflet.smoothmarkerbouncing.js';

Ahmed El Gabri helped me on facebook group

Ahmed El Gabri: I don't use Angular or Iconic but by checking leaflet.smoothmarkerbouncing.js file it's an Immediately Invoked Function Expression that depends on Leaflet being in its current scope & it should be called L

https://github.com/hosuaby/Leaflet.SmoothMarkerBouncing/blob/master/leaflet.smoothmarkerbouncing.js?fref=gc#L33 https://github.com/hosuaby/Leaflet.SmoothMarkerBouncing/blob/master/leaflet.smoothmarkerbouncing.js?fref=gc#L971

So a quick solution that I'd try is to do this

import 'leaflet'; import 'leaflet.smooth_marker_bouncing/leaflet.smoothmarkerbouncing';

And since Leaflet exposes itself as L this should work, don't expect proper typings & stuff because.

1. Leaflet is not typed
2. It doesn't export anything, you are literally dumping the file into your own.