I have install leaflet-sidebar-v2 via npm. However when I try to simply initialize the side bar I get this error.

L.Control.Sidebar is not a function.

here is my index.html import scripts etc

<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet-sidebar-v2"></script>
here is my component html snippet for the sidebar and map

here is my ngOnInit Method
ngOnInit() {
this.isBusy = true;

this.overlayKeys = getOverlayKeys();

// our markers
this.markers = new Array();

// our geoJson urls sources
if (!this.geoJsonUrls) {
  this.geoJsonUrls = new Array();
} else {
  // keep this in for testing

// the geoJson from each of the geoJsonUrl resources
this.geoJsonResults = new Array();

// let create our layers
this.layers = new Array(this.geoJsonUrls.length);

// get our geo location and if we have it initialize our map
if (navigator.geolocation) {
  this.latitude = 0;
  this.longitude = 0;
  navigator.geolocation.getCurrentPosition(position => {
    this.latitude = position.coords.latitude;
    this.longitude = position.coords.longitude;
    this.map = new L.Map('map', {
      zoomControl: false,
      center: new L.LatLng(this.latitude, this.longitude),
      zoom: 19,
      fullscreenControl: true

    this.map.addControl(L.control.zoom({position: 'topright'}));

    // carto retina layer
    const retina = '@3x';
    const params = new Array();
    params[0] = retina;

    // get our overlay
    this.overlay = getOverlay(this.overlayKeys[1], params);

    // create the title layer
    const wmsLayer =
      L.tileLayer.wms(this.overlay, null).addTo(this.map);

    this.currentLocation = L.marker([this.latitude, this.longitude], {icon: this.customIcon}).addTo(this.map);

    // add popup to marker and open automatically
    this.currentLocation.bindPopup('<b>Your location</b>').openPopup();
    // our map click handler
    this.map.on('click', this.mapClick);

    // our mouse move handler
    this.map.on('mousemove', this.mouseOverMap);

    // wait until our map loads
    this.map.on('load', this.openGeoJsonResources());
} else {
  alert('No Geolocation');
this.showButton = document.getElementById('showBtn') as HTMLButtonElement;
this.txtLat = document.getElementById('txtLat') as HTMLInputElement;
this.txtLng = document.getElementById('txtLng') as HTMLInputElement;

// initialize our services
this.jsonpClient = new JsonpClientComponent(this.jsonpService);

// add our local storage event listener appears to fire only when storage is deleted
/*    window.addEventListener('storage', (e) => {
      let a: any;
      a = e;
      if (a.data) {

// we need to do a deep copy of the passed in geojson urls into the selected items to select them all
for (let i = 0; i < this.geoJsonUrls.length; i++) {
  this.selectedItems[i] = this.geoJsonUrls[i];

// lets setup of our dropdown information
this.dropdownSettings = {
  singleSelection: false,
  text: 'Select GeoSpatial Items to View',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  enableSearchFilter: true

this.customMarkerHelper = new CustomMarker();


this.isBusy = false;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.