Typescript support

[ChaudhryAtif]

Can Typerscript support be added for the sidebar? The parent repo has a file that can be dropped-in, or used as a starting point.
leaflet-sidebar.d.ts

Currently gives me the following error:

Property 'sidebar' does not exist on type 'typeof control'.

When trying to do the following (using autopan example):

L.control.sidebar('sidebar', { autopan: true })
    .addTo(map)
    .open('autopan');

And if possible, please add an angular 2+ example.

[nickpeihl]

Hi @ChaudhryAtif

I am not familiar with TypeScript or Angular. Would you like to submit pull requests for including TypeScript definitions and an Angular example?

[ChaudhryAtif]

The parent repo has a typing file, but this fork is ahead of the parent repo, So typing file will need to be modified, but I do not have any experience in writing typings for a JS project. If someone can write the typing file, I can probably add an Angular example.

@noerw Are you familiar with Typescript?

[noerw]

Yeah, a little bit. I can look into it.
Can't help out with angular 2 though

[ChaudhryAtif]

I started looking into it as well. I will keep you guys posted on progress. Using leaflet-sidebar.d.ts as base.

[noerw]

fixed in 9873c90

[ChaudhryAtif]

@nickpeihl @noerw Will the version get a bump? B/c npm install 3.0.0 doesn't seem to give the latest changes.

[noerw]

I just released v3.0.1

[cwgrc2]

Can anyone here please give an example on actually how to use this in Typescript Angular? A little late to the game here sorry. I have been trying to integrate leaflet-sidebar-v2 for two days now with no luck. I tried '@runette/ngx-leaflet-sidebar' Angular wrapper but that requires a certain version of Angular to work.

Thanks!

[ChaudhryAtif]

@cwgrc2 What have you tried? Since leaflet-sidebar.d.ts is inside the project, you shouldn't have to do a lot other than importing it.

Hopefully this helps:

// package.json
npm install -S leaflet leaflet-sidebar-v2
npm install -D @types/leaflet

// html
<div id="sidebar" class="leaflet-sidebar collapsed">
    ...
</div>

// controller
import * as L from 'leaflet';
import 'leaflet-sidebar-v2';

getSidebar() {
    return L.control.sidebar({container: 'sidebar', autopan: true});
}

[cwgrc2]

Thanks for Responding Atif! I am first taking Paul's Runette's advice of rebuilding all of my node_modules with the latest of all of our add-on plugins. Is it your contention above that we do not need the 'runnete/ngx-leaflet-sidebar' add-on and just use the leaflet-sidebar-v2 directly? If so, I think I tried that, but I think I tried it without the @types/leaflet install. So I will try that again first after the re-install. Thanks for your input! Chris scubagrant60@gmail.com

…

On Mon, Apr 13, 2020 at 6:49 PM Atif Chaudhry ***@***.***> wrote: What have you tried? Since leaflet-sidebar.d.ts is inside the project, you shouldn't have to do a lot other than importing it. Hopefully this helps: // package.json npm install -S leaflet leaflet-sidebar-v2 npm install -D @types/leaflet // html <div id="sidebar" class="leaflet-sidebar collapsed"> ... </div> // controller import * as L from 'leaflet'; import 'leaflet-sidebar-v2'; getSidebar() { return L.control.sidebar({container: 'sidebar', autopan: true}); } — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#12 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOAPKSDYMN7SWPZN77I7GG3RMOXIBANCNFSM4EFXDFPQ> .