jjimenezshaw / Leaflet.Control.Layers.Tree

a Tree Layers Control for Leaflet
https://jjimenezshaw.github.io/Leaflet.Control.Layers.Tree/examples/basic.html
BSD 3-Clause "New" or "Revised" License
146 stars 36 forks source link

feat: add types #36

Closed obdulia-losantos closed 3 years ago

jjimenezshaw commented 3 years ago

Hi @erikvullings As I mentioned in https://github.com/jjimenezshaw/Leaflet.Control.Layers.Tree/pull/32#discussion_r593791895 here is in full PR (minor things also in #35) Pay attention to files in test-types/tsconfig.json https://github.com/jjimenezshaw/Leaflet.Control.Layers.Tree/pull/36/files#diff-d2828f04b5fc8ca0298f1358b0f50c12efcd37281d152f941b6da0a4697c3e57R11

Does it work for you?

erikvullings commented 3 years ago

@jjimenezshaw Yes, this works for me! BTW I would normally use 'types' instead of 'typings' in the package.json, since when including other typings, you install them via @types/leaflet, but otherwise they are identical..
And you actually do not need to add the declaration file to the tsconfig.json, since you already reference it in the package.json. Finally, could you also include a small example of using the types in your README.md? E.g. based on your test:

Using Typescript

When using Typescript, you can do something like the following.

import * as L from 'leaflet';
import 'L.Control.Layers.Tree';

const markerO = L.marker([0, 0]);
const markerA = L.marker([40, 0]);
const markerB = L.marker([0, 30]);
const markerC = L.marker([0, 20]);

const baseTree = {
  name = 'None',
  label: 'Base',
} as L.Control.Layers.TreeObject;

const overlayTree = {
  label: 'Overlay',
  name = 'Root',
  layer = markerO,
  collapsed = true,
  selectAllCheckbox = true,
  children = [
    { label: 'Over one', name: 'Name Over one', layer: markerO },
    { label: 'Over two', name: 'Name Over two', layer: L.layerGroup([]) },
    {
      label: 'O Node 1',
      selectAllCheckbox: true,
      collapsed: true,
      children: [
        { label: 'Over 11', name: 'Name Over 11', layer: markerA },
        { label: 'Over 12', layer: L.layerGroup([]) },
        {
          label: '1 Node 1',
          selectAllCheckbox: 'my title',
          collapsed: false,
          children: [
            { label: 'Over 21', name: 'Name Over 21', layer: markerC },
            { label: 'Over 22', layer: L.layerGroup([]) },
          ]
        },
      ]
    },
    { label: 'Over three', name: 'Name Over three', layer: markerB },
  ],
} as L.Control.Layers.TreeObject;

const treeOptions: L.Control.Layers.TreeOptions = {
  closedSymbol = '⊞ 🗀',
  collapseAll = 'Collapse all',
  expandAll = 'Expand all',
  labelIsSelector = 'base',
  namedToggle = true,
  openedSymbol = '⊟ 🗁',
  selectorBack = false,
  spaceSymbol = '~',
  collapsed = false, // from L.Control.LayersOption,
} as L.Control.Layers.TreeOptions;

const tree: L.Control.Layers.Tree = L.control.layers.tree(baseTree, overlayTree, treeOptions);

Cheers, Erik