search

noerw / leaflet-sidebar-v2

Leaflet plugin: responsive sidebar with JS API
https://noerw.github.com/leaflet-sidebar-v2/examples
MIT License
129 stars 70 forks source link

L.Control.Sidebar is not a function #15

Closed dmanjava closed 4 years ago

dmanjava commented 6 years ago

Hello,

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

<div #sidebar id="sidebar">
  <app-sidebar></app-sidebar>
</div>
  initializeSideBar() {
    this.sidebar = L.Control.Sidebar('sidebar').addTo(this.map);
  }

Any help is greatly appreciated.

Thank you. Darnell

nickpeihl commented 6 years ago

Can you post more of the code you are using?

dmanjava commented 6 years ago

here is my index.html import scripts etc

  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>-->

  <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css">

  <link rel="stylesheet"
        href="https://unpkg.com/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css">
  <link rel="stylesheet" href="./assets/css/leaflet.draw.css"/>

  <link rel="stylesheet" href="./assets/css/leaflet-sidebar.min.css">
  <script src="https://unpkg.com/leaflet-sidebar"></script>
  <!--<script src="./assets/js/leaflet-sidebar.min.js"></script>-->

here is my component html snippet for the sidebar and map

<div #sidebar id="sidebar">
  <app-sidebar></app-sidebar>
</div>
<div id="map" name="map" #map class="container-fluid"></div>
<br>

here is my ngOnInit Method

  ngOnInit() {
    this.isBusy = true;
    this.initializeForm();

    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
      console.log(this.geoJsonUrls);
    }

    // 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);
        wmsLayer.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) {
            this.setGeoJson(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();

    debugger;
    this.initializeSideBar();

    this.isBusy = false;
  }
nickpeihl commented 6 years ago

The URL for the sidebar script should be http://unpkg.com/leaflet-sidebar-v2. Your script url appears to be missing the -v2.

dmanjava commented 6 years ago

Thank you for the reply I'll give it a try tomorrow

On Dec 28, 2017 6:29 PM, "Nick Peihl" notifications@github.com wrote:

The URL for the sidebar script should be http://unpkg.com/leaflet- sidebar-v2. Your script url appears to be missing the -v2.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/nickpeihl/leaflet-sidebar-v2/issues/15#issuecomment-354384636, or mute the thread https://github.com/notifications/unsubscribe-auth/ATsbLe-DEdEiWVjY3lSPzEewjLUPPmY3ks5tFEBygaJpZM4ROjtz .

dmanjava commented 6 years ago

Thank you for the reply. I replace the script path with <script src=" http://unpkg.com/leaflet-sidebar-v2"></script>

However I get the same error below:

AppComponent.html:3 ERROR TypeError: L.Control.Sidebar is not a function
    at BaseMapComponent.initializeSideBar (base-map.component.ts:317)

....

initializeSideBar() {
  debugger;
  this.sidebar = L.Control.Sidebar('sidebar').addTo(this.map);
}

....

There appears to be no sidebar or Sidebar in the instance of control or Control? Any other thoughts?

nickpeihl commented 6 years ago

I'm on vacation leave right now so I can't really look more into this for a while. Perhaps try reaching a larger support audience by posting your question to http://gis.stackexchange.com

dmanjava commented 6 years ago

Ok. Enjoy your vacation.

On Fri, Dec 29, 2017 at 10:20 AM, Nick Peihl notifications@github.com wrote:

I'm on vacation leave right now so I can't really look more into this for a while. Perhaps try reaching a larger support audience by posting your question to http://gis.stackexchange.com

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/nickpeihl/leaflet-sidebar-v2/issues/15#issuecomment-354474362, or mute the thread https://github.com/notifications/unsubscribe-auth/ATsbLQafYHqKKgoh38eeTHziJTTJyeywks5tFR95gaJpZM4ROjtz .

-- Thank you. Darnell Whitaker 720.289.6111

noerw commented 6 years ago

I cannot reproduce, as I cannot merge your code snippets properly. However..

dmanjava commented 6 years ago

The leaflet script is loaded in index.html which is run before ngOnInit. I have replace the sidebar script with the one that you suggested however I am still receiving the following error.

L.Control.Sidebar is not a function

noerw commented 6 years ago

Looking at it again, your issue seems to be that you try to initialize the class (upper case), not the class factory (lower case): Replace L.Control.Sidebar with L.control.sidebar.

Please reopen if it does not work still

Airat1995 commented 5 years ago

Hello, I have almost the same problem with one difference, sidebar was placed, but it overlay standart controls. Also I get same 'L.control.sidebat is not a function error'. I placed "./node_modules/leaflet-sidebar-v2/js/leaflet-sidebar.js" and "./node_modules/leaflet-sidebar-v2/css/leaflet-sidebar.css" inside angular.json but it doesn't help at all.

Br0Stack commented 5 years ago

I have the same issue as Airat1995, and have tried putting those files everywhere I can think of to fix it, with no luck. The html of the sidebar and text is displayed on map with no sidebar or formatting.

hpardess commented 5 years ago

I faced the same issue as @Airat1995 Property 'sidebar' does not exist on type 'typeof control'. The leaflet sidebar is displayed but i get js error that L.control.sidebar() is undefined ERROR TypeError: leaflet__WEBPACK_IMPORTED_MODULE_2__.control.sidebar is not a function

noerw commented 5 years ago

Ok, I still don't get in which environments this happens.

Including the script directly in html works from my tests, so can someone with this issue explain how they include it in their project? (what module system / build toolchain, ..?). Ideally with a working project to reproduce.

zafarshafaq commented 4 years ago

I have same error! Anyone solved it yet?

zafarshafaq commented 4 years ago

I have solved it with importing version 2 of leaflet! Be careful that declare L before the importing leaflet version 2

CesarChavez96 commented 4 years ago

Try with window.L.control.sidebar

cssandrey123 commented 3 years ago

If it still doesn’t work, what i did was to import the .js file directly into the component where i use the sidebar. Something like this (Ps. i copied leaflet-sidebar.js from node-modules into the asstets directory): .... import * as L from 'leaflet'; import '../../../assets/libs/leaflet-sidebar.js' .... I know it's a bit of a hacky solution but this was the only solution that worked for me.