{"id":13426225,"url":"https://github.com/stefanocudini/leaflet-panel-layers","last_synced_at":"2025-04-04T05:08:20.116Z","repository":{"id":16678190,"uuid":"19434090","full_name":"stefanocudini/leaflet-panel-layers","owner":"stefanocudini","description":"Leaflet Control Layers extended with support groups and icons","archived":false,"fork":false,"pushed_at":"2023-08-11T10:14:14.000Z","size":1615,"stargazers_count":292,"open_issues_count":5,"forks_count":93,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-28T04:13:45.624Z","etag":null,"topics":["layerslider","leaflet","leaflet-control","leaflet-plugins","web-mapping","webgis","webmapping"],"latest_commit_sha":null,"homepage":"https://opengeo.tech/maps/leaflet-panel-layers/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stefanocudini.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2014-05-04T19:25:10.000Z","updated_at":"2025-03-02T19:27:28.000Z","dependencies_parsed_at":"2024-04-16T06:37:53.799Z","dependency_job_id":"89827c4b-c010-438c-a577-da59d39a064a","html_url":"https://github.com/stefanocudini/leaflet-panel-layers","commit_stats":{"total_commits":197,"total_committers":14,"mean_commits":"14.071428571428571","dds":"0.25888324873096447","last_synced_commit":"99f0ee2959454afbcbc5ec15b9804ea506519c31"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefanocudini%2Fleaflet-panel-layers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefanocudini%2Fleaflet-panel-layers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefanocudini%2Fleaflet-panel-layers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefanocudini%2Fleaflet-panel-layers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stefanocudini","download_url":"https://codeload.github.com/stefanocudini/leaflet-panel-layers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247123107,"owners_count":20887261,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["layerslider","leaflet","leaflet-control","leaflet-plugins","web-mapping","webgis","webmapping"],"created_at":"2024-07-31T00:01:29.452Z","updated_at":"2025-04-04T05:08:20.091Z","avatar_url":"https://github.com/stefanocudini.png","language":"JavaScript","funding_links":["https://www.paypal.me/stefanocudini"],"categories":["JavaScript"],"sub_categories":[],"readme":"Leaflet Panel Layers\n==============\n\n[![npm version](https://badge.fury.io/js/leaflet-panel-layers.svg)](https://badge.fury.io/js/leaflet-panel-layers)\n\nLeaflet Control Layers extended with support groups and icons\n\nCopyright [Stefano Cudini](https://opengeo.tech/stefano-cudini/)\n\nIf this project helped your work help me to keep this alive by [Paypal **DONATION \u0026#10084;**](https://www.paypal.me/stefanocudini)\n\t\t    \nTested in Leaflet v1.6.x\n\n**Demo:**\n\n[opengeo.tech/maps/leaflet-panel-layers](https://opengeo.tech/maps/leaflet-panel-layers/)\n\n**Source code:**\n\n[Github](https://github.com/stefanocudini/leaflet-panel-layers)\n\n### Use Cases:\n\n* [Interactive tool by researchers from the Australian Antarctic Division](https://nilas.org/)\n* [EnviroMap by EnvironSensing](https://dev-server.uca.es/)\n* [Leaflet Control Search (Official demos)](https://opengeo.tech/maps/leaflet-search/)\n* [Pine Interactive Map](https://pine.blackpinguin.de/)\n\n![Image](https://raw.githubusercontent.com/stefanocudini/leaflet-panel-layers/master/examples/images/screenshot/leaflet-panel-layers-layout.jpg)\n\n# Options\n| Option\t  | Default  | Description                       |\n| --------------- | -------- | ----------------------------------------- |\n| compact\t  | false    | panel height minor of map height |\n| collapsed       | false    | panel collapsed at startup |\n| autoZIndex \t  | true     | set zindex layer by order definition |\n| collapsibleGroups| false   | groups of layers is collapsible by button |\n| groupCheckboxes  | false   | adds a checkbox to the group title to de-/select all layers in the group |\n| selectorGroup    | false   | select all layer of a group |\n| buildItem\t  | null     | function that return row item html node(or html string) |\n| title\t          | ''       | title of panel |\n| className\t  | ''       | additional class name for panel |\n| position\t  | 'topright' | position of control |\n\n# Events\n| Event\t\t\t | Data\t\t\t  | Description                               |\n| ---------------------- | ---------------------- | ----------------------------------------- |\n| 'panel:selected'       | {layerDef}             | fired after moved and show markerLocation |\n| 'panel:unselected'\t | {}\t                  | fired after control was expanded          |\n\n# Methods\n| Method\t\t | Arguments\t\t | Description                                              |\n| ---------------------- | --------------------- | -------------------------------------------------------- |\n| addBaseLayer()         | layerDef,group,collapsed       \t | add new layer item definition to panel as baselayers     |\n| addOverlay()           | 'Text message' \t | add new layer item definition to panel as overlay        |\n| removeLayer()\t\t | 'Text searched'\t | remove layer item from panel                             |\n| configToControlLayers()| 'Text searched'\t | convert config from Control.PanelLayers to Control.Layers|\n\n# Usage\n\n**Panel Item Definition formats**\n```javascript\n\t{\n\t\tname: \"Bar\",\n\t\ticon: iconByName('bar'),\n\t\tlayer: L.geoJson(Bar, {pointToLayer: featureToMarker })\n\t}\n```\ndefinition in JSON format permit to store simply the configuration \ntype contains a Leaflet method in this case L.geoJson()\nargs is the arguments passed to the method: L.geoJson(river)\n```javascript\n\t{\n\t\tlayer: {\n\t\t\ttype: \"geoJson\",\n\t\t\targs: [ river ]\n\t\t},\n\t}\n```\ndefinition of a group\n\n```javascript\n\t{\n\t\tgroup: \"Title Group\",\n\t\tcollapsed: true,\n\t\tlayers: [\n\t\t...other items...\n\t\t]\n\t}\n```\n\n**Multiple active layers with icons**\n```javascript\nvar baseLayers = [\n\t{\n\t\tactive: true,\n\t\tname: \"OpenStreetMap\",\n\t\tlayer: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')\n\t}\n];\nvar overLayers = [\n\t{\n\t\tname: \"Drinking Water\",\n\t\ticon: '\u003ci class=\"icon icon-water\"\u003e\u003c/i\u003e',\n\t\tlayer: L.geoJson(WaterGeoJSON)\n\t},\n\t{\n\t\tactive: true,\n\t\tname: \"Parking\",\n\t\ticon: '\u003ci class=\"icon icon-parking\"\u003e\u003c/i\u003e',\n\t\tlayer: L.geoJson(ParkingGeoJSON)\n\t}\n];\nmap.addControl( new L.Control.PanelLayers(baseLayers, overLayers) );\n```\n\n**Build panel layers from pure JSON Config**\n```javascript\nvar panelJsonConfig = {\n    \"baselayers\": [\n        {\n            \"active\": true,\n            \"name\": \"Open Cycle Map\",\n            \"layer\": {\n                \"type\": \"tileLayer\",\n                \"args\": [\n                    \"https://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png\"\n                ]\n            }\n        },\n        {\n            \"name\": \"Landscape\",\n            \"layer\": {\n                \"type\": \"tileLayer\",\n                \"args\": [\n                    \"https://{s}.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png\"\n                ]\n            }\n        },        \n        {\n            \"name\": \"Transports\",\n            \"layer\": {\n                \"type\": \"tileLayer\",\n                \"args\": [\n                    \"https://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png\"\n                ]\n            }\n        }\n    ],\n    \"overlayers\": [\n        {\n            \"name\": \"Terrain\",\n            \"layer\": {\n            \"type\": \"tileLayer\",\n            \"args\": [\n                \"https://toolserver.org/~cmarqu/hill/{z}/{x}/{y}.png\", {\n                \"opacity\": 0.5\n                }\n            ]\n            }\n        }\n    ]\n};\nL.control.panelLayers(panelJsonConfig.baseLayers, panelJsonConfig.overLayers).addTo(map);\n```\n\n**Grouping of layers**\n```javascript\nL.control.panelLayers(\n\t[\n\t\t{\n\t\t\tname: \"Open Street Map\",\n\t\t\tlayer: osmLayer\n\t\t},\n\t\t{\n\t\t\tgroup: \"Walking layers\",\n\t\t\tlayers: [\n\t\t\t\t{\n\t\t\t\t\tname: \"Open Cycle Map\",\n\t\t\t\t\tlayer: L.tileLayer('https://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png')\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"Hiking\",\n\t\t\t\t\tlayer: L.tileLayer(\"https://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png\")\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\tgroup: \"Road layers\",\n\t\t\tlayers: [\n\t\t\t\t{\n\t\t\t\t\tname: \"Transports\",\n\t\t\t\t\tlayer: L.tileLayer(\"https://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png\")\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t],\n\t{collapsibleGroups: true}\n).addTo(map);\n```\n\n**Collapse some layers' groups**\n```javascript\nL.control.panelLayers([\n\t{\n\t\tname: \"Open Street Map\",\n\t\tlayer: osmLayer\n\t},\n\t{\n\t\tgroup: \"Walking layers\",\n\t\tlayers: [\n\t\t\t{\n\t\t\t\tname: \"Open Cycle Map\",\n\t\t\t\tlayer: L.tileLayer('https://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png')\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: \"Hiking\",\n\t\t\t\tlayer: L.tileLayer(\"https://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png\")\n\t\t\t}\t\t\t\n\t\t]\n\t},\n\t{\n\t\tgroup: \"Road layers\",\n\t\tcollapsed: true,\n\t\tlayers: [\n\t\t\t{\n\t\t\t\tname: \"Transports\",\n\t\t\t\tlayer: L.tileLayer(\"https://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png\")\n\t\t\t}\n\t\t]\n\t}\n]).addTo(map);\n```\n\n**Add layers dynamically at runtime**\n```javascript\nvar panel = L.control.panelLayers();\n\n$.getJSON('some/url/path.geojson', function(data){\n\tpanel.addOverlay({\n\t\tname: \"Drinking Water\",\n\t\ticon: '\u003ci class=\"icon icon-water\"\u003e\u003c/i\u003e',\n\t\tlayer: L.geoJson(data)\n\t});\n});\n```\n\n\n# Build\n\nThis plugin support [Grunt](https://gruntjs.com/) for building process.\nTherefore the deployment require [NPM](https://npmjs.org/) installed in your system.\nAfter you've made sure to have npm working, run this in command line:\n```bash\nnpm install\ngrunt\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefanocudini%2Fleaflet-panel-layers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstefanocudini%2Fleaflet-panel-layers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefanocudini%2Fleaflet-panel-layers/lists"}