{"_id":"leaflet.styledlayercontrol","_rev":"1-2f7451ab2f41082d8076a116f86fe3a8","name":"leaflet.styledlayercontrol","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"leaflet.styledlayercontrol","version":"1.0.0","description":"A Leaflet plugin that implements the management and control of layers by organization into categories or groups. The StyledLayerControl class extends the original L.control.layers control. The plugin uses HTML5 and CSS3 to style the presentation in a mode","main":"index.js","directories":{"example":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/davicustodio/Leaflet.StyledLayerControl.git"},"keywords":["Leaflet","StyledLayerControl","leaflet-plugin"],"author":{"name":"davicustodio"},"license":"SEE LICENSE IN <LICENSE>","bugs":{"url":"https://github.com/davicustodio/Leaflet.StyledLayerControl/issues"},"homepage":"https://github.com/davicustodio/Leaflet.StyledLayerControl#readme","_id":"leaflet.styledlayercontrol@1.0.0","_nodeVersion":"12.14.1","_npmVersion":"6.13.6","dist":{"integrity":"sha512-ZDBBQ99z0k3+2hAsxFnNcE+jfEiKUhEaK2NuJzvaRwcKUI0+LLe6zHMYF+qcs5mrKXVaqplaPeLIs0I7DObVSw==","shasum":"e8edf21dab980062132f16e3cc3c7e7f5e5bbfb6","tarball":"https://registry.npmjs.org/leaflet.styledlayercontrol/-/leaflet.styledlayercontrol-1.0.0.tgz","fileCount":34,"unpackedSize":4278420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJaOgCRA9TVsSAnZWagAA7IIP/isda/mFpglY0GB+b8m0\nMJ4xpNRX5ba5CDbq1ls5jffDfyLMw+rzBahAis4sCU9950cqw9WAXHUdnnTJ\n6GO8W/mMsbI6/9afG/PAz95G6gkwcbe/15AyhC5sTtEWuTvtjJx5JJv3uhhX\n3SP918sHGrvZ+R1m+bLKgJjoufkO9NBw91z4QTb6dL/EahVe72d9PBzw413g\nE5k9SJ3LdTHoG/6rt6vZ0LhfDCNneNPrDHkgpxcEPfB4Z3vwWdYBrIeAKocF\n4nafwEylxvvQ57pzdmkhepY0HyIaA/0SWKtzlj72S4NPXn8Rbg1tIh0iG6fN\nMd42/6oqStUo9O2OwnZP5V79DR6dXDt61cL1wAbwp/4rFkn/a+lc+Bd5sCyE\nYCFn0KQ1UIizLTGIjYrJw69ti/8ruXEN0eFa+DY7qeAetcCeMFB6vmH4A4no\ni3sNxXpB8YmdF8enVWWVj8B+QNIqhVzyST3JBhm8qRM8MFLxQMyBWtS1A7nE\n4QUEBBRO8pHGkbpo6d1dKpdMLqp66WoV484DeZST6oTWXaF5ulg+x9/9meAq\nEkZLsNiKD19RFI8CTfvG8NGQZeEf5vEWonaadFxqiaK9xR6huJQR2vkALHos\nqp8aKvg6IGyZ+ObX/ixCWs4PXbxvubA7CYn+sgXu2z4Ra86F+kMG69oh2lkr\nbynv\r\n=y4tC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBvLW6qa7+P/ZSGu9/0PHwYkXBACQbgn5OMbgqGoAyJlAiAuBQyRqVyC73U2iWOx7lWnHrhWZF1p/c8JTOin/Suflw=="}]},"maintainers":[{"name":"alexander9306","email":"alexander9306@gmail.com"}],"_npmUser":{"name":"alexander9306","email":"alexander9306@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/leaflet.styledlayercontrol_1.0.0_1579525023559_0.5759360748676166"},"_hasShrinkwrap":false}},"time":{"created":"2020-01-20T12:57:03.558Z","1.0.0":"2020-01-20T12:57:03.983Z","modified":"2022-05-07T18:49:16.678Z"},"maintainers":[{"name":"alexander9306","email":"alexander9306@gmail.com"}],"description":"A Leaflet plugin that implements the management and control of layers by organization into categories or groups. The StyledLayerControl class extends the original L.control.layers control. The plugin uses HTML5 and CSS3 to style the presentation in a mode","homepage":"https://github.com/davicustodio/Leaflet.StyledLayerControl#readme","keywords":["Leaflet","StyledLayerControl","leaflet-plugin"],"repository":{"type":"git","url":"git+https://github.com/davicustodio/Leaflet.StyledLayerControl.git"},"author":{"name":"davicustodio"},"bugs":{"url":"https://github.com/davicustodio/Leaflet.StyledLayerControl/issues"},"license":"SEE LICENSE IN <LICENSE>","readme":"Leaflet.StyledLayerControl\n===================\n\n### What is Leaflet.StyledLayerControl?\nA [Leaflet](https://github.com/Leaflet/Leaflet) plugin that implements the management and control of layers by organization into categories or groups. The StyledLayerControl class extends the original L.control.layers control.\nThe plugin uses HTML5 and CSS3 to style the presentation in a modern way. \nThe initial ideas were based in the plugin: [Leaflet.Groupedlayercontrol](https://github.com/ismyrnow/Leaflet.groupedlayercontrol)  \n\n![preview](https://raw.githubusercontent.com/davicustodio/Leaflet.StyledLayerControl/master/examples/StyledLayerControl-example.png)\n\n*Tested with Leaflet 0.7.3*\n\n### Main features\n\n- Organization of the layers into groups or categories. The layers can be an overlay or basemap\n- Groups may appear initially expanded or not\n- Groups can be opened exclusively\n- A layer can be defined as removable\n- The main container control behaves responsively, automatically adjusting the vertical resizing the map and the screen\n\n### Live Demos\n\n- [A map using StyledLeafletControl - not exclusive group select](http://davicustodio.github.io/Leaflet.StyledLayerControl/examples/example1.html)\n- [A map using StyledLeafletControl with exclusive group select](http://davicustodio.github.io/Leaflet.StyledLayerControl/examples/example2.html)\n\n### How to use? \n\n\n1 - Create the reference to Leaflet \n```javascript\n\t<link rel=\"stylesheet\" href=\"http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css\" />\n\t<script src=\"http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js\"></script>\n```\n\n2 - Insert references to styledLayerControl.css and styledLayerControl.js\n```javascript\n\t<link rel=\"stylesheet\" href=\"../css/styledLayerControl.css\" />\n\t<script src=\"../src/styledLayerControl.js\"></script>\n```\n\n3 - Define your layers (base maps and overlays)\n```javascript\n\n\t// Google layers\n\tvar g_roadmap   = new L.Google('ROADMAP');\n\tvar g_satellite = new L.Google('SATELLITE');\n\tvar g_terrain   = new L.Google('TERRAIN');\n\t\n\t// OSM layers\n\tvar osmUrl='http://{s}.tile.osm.org/{z}/{x}/{y}.png';\n\tvar osmAttrib='Map data © <a href=\"http://openstreetmap.org\">OpenStreetMap</a> contributors';\n\tvar osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});\n\t\n\t// ... more Base Maps\n\t\n\t// Sao Paulo Soybeans Plant\n\tvar soybeans_sp = new L.LayerGroup();\n\tL.marker([-22, -49.80]).addTo(soybeans_sp),\n\tL.marker([-23, -49.10]).addTo(soybeans_sp),\n\tL.marker([-21, -49.50]).addTo(soybeans_sp);\n\t\n\t// Rio de Janeiro Corn Plant\n\tvar corn_rj = new L.LayerGroup();\n\tL.marker([-22, -43.20]).addTo(corn_rj),\n\tL.marker([-23, -43.50]).addTo(corn_rj);\n\t\n\t// ... more Overlays\n```\n\n4 - Create the Leaflet Map Object and add the layer that will be default basemap\n```javascript\n\tvar map = L.map('map', {\n\t\tcenter: [-16, -54],\n\t\tzoom: 4\n\t});\n\t\n\tmap.addLayer(g_roadmap);\n```\n\n5 - Define structure of groups and layers of basemap\n```javascript\n\tvar baseMaps = [\n\t\t\t\t\t{ \n\t\t\t\t\t\tgroupName : \"Google Base Maps\",\n\t\t\t\t\t\texpanded : true,\n\t\t\t\t\t\tlayers    : {\n\t\t\t\t\t\t\t\"Satellite\" :  g_satellite,\n\t\t\t\t\t\t\t\"Road Map\"  :  g_roadmap,\n\t\t\t\t\t\t\t\"Terreno\"   :  g_terrain\n\t\t\t\t\t\t}\n\t\t\t\t\t}, {\n\t\t\t\t\t\tgroupName : \"OSM Base Maps\",\n\t\t\t\t\t\tlayers    : {\n\t\t\t\t\t\t\t\"OpenStreetMaps\" : osm\n\t\t\t\t\t\t}\n\t\t\t\t\t}, {\n\t\t\t\t\t\tgroupName : \"Bing Base Maps\",\n\t\t\t\t\t\tlayers    : {\n\t\t\t\t\t\t\t\"Satellite\" : bing1,\n\t\t\t\t\t\t\t\"Road\"      : bing2\n\t\t\t\t\t\t}\n\t\t\t\t\t}\t\t\t\t\t\t\t\n\t];\t\n```\n\n5 - Define structure of groups and layers of overlays\n```javascript\n\tvar overlays = [\n\t\t\t\t\t {\n\t\t\t\t\t\tgroupName : \"Sao Paulo\",\n\t\t\t\t\t\texpanded  : true,\n\t\t\t\t\t\tlayers    : { \n\t\t\t\t\t\t\t\"Soybeans Plant\" : soybeans_sp,\n\t\t\t\t\t\t\t\"Corn Plant\" \t : corn_sp\n\t\t\t\t\t\t}\t\n\t\t\t\t\t }, {\n\t\t\t\t\t\tgroupName : \"Rio de Janeiro\",\n\t\t\t\t\t\texpanded  : true,\n\t\t\t\t\t\tlayers    : { \n\t\t\t\t\t\t\t\"Bean Plant\"     : bean_rj,\n\t\t\t\t\t\t\t\"Corn Plant\" \t : corn_rj,\n\t\t\t\t\t\t\t\"Rice Plant\"\t : rice_rj\t\t\n\t\t\t\t\t\t}\t\n\t\t\t\t\t }, {\n\t\t\t\t\t\tgroupName : \"Belo Horizonte\",\n\t\t\t\t\t\tlayers    : { \n\t\t\t\t\t\t\t\"Sugar Cane Plant\"\t: sugar_bh,\n\t\t\t\t\t\t\t\"Corn Plant\" \t \t: corn_bh\t\t\n\t\t\t\t\t\t}\t\n\t\t\t\t\t }\t\t\t\t\t\t\t \n\t];\n```\n\n6 - Declare which layers can be deleted and visible (create the removable property with true in the options StyledLayerControl that can be created in the layer object). \nEach layer declared as removable = true will show an icon to delete the user to remove the layer\n```javascript\n    soybeans_sp.StyledLayerControl = {\n\t\tremovable : true,\n\t\tvisible : false\n\t}\n\t// ... more layers\n```\n\n7 - Define the options for StyledLayerControl\n- container_width    \t- define the main container width - the default is automatic width\n- container_maxHeight\t- define the max height to the main container - the default is automatic depending of map and screen height\n- group_maxHeight     - define the max height space of group container - the default is 100px\n- exclusive \t\t\t- define that the opened group is exclusive\n\t\n- All the properties are optional\n- You can also include all properties available under \"Options\" of control L.control.layers in the same list\n\t\n```javascript\n\tvar options = {\n\t\tcontainer_width \t: \"300px\",\n\t\tcontainer_maxHeight : \"350px\", \n\t\tgroup_maxHeight     : \"80px\",\n\t\texclusive       \t: false\n\t};\n```\n\n8 - Create the StyledLayerControl\n```javascript\n\tvar control = L.Control.styledLayerControl(baseMaps, overlays, options);\n\tmap.addControl(control);\n```\n\n### How to add and remove layers and groups dynamically ? \n\n- To add a new base layer dynamically, simply use addBaseLayer and declare that the group layer will belong. \nAlso note that to add a new group, simply specify a group name that does not exist yet, and a new group will be created.\n```javascript\n\tcontrol.addBaseLayer( bing1, \"Bing Satellite\", {groupName : \"Bing Maps\", expanded: true} );\n\tcontrol.addBaseLayer( bing2, \"Bing Road\", {groupName : \"Bing Maps\"} );\n```\n\n- To add a new overlay layer dynamically, simply declare the group that de layer will belong.\n```javascript\n\tcontrol.addOverlay( corn_bh, \"Corn Plant\", {groupName : \"Belo Horizonte\"} );\n```\n\n- To remove a layer dynamically, specify the instance variable of the layer using the method removeLayer. (the method ignore the removable property of layers )\n```javascript\n\tcontrol.removeLayer( corn_sp );\n```\n\n- To remove a group, specify the name of the group in the removeGroup method. \nBy doing so all layers belonging to the group will also be excluded\n```javascript\n\tcontrol.removeGroup( \"Rio de Janeiro\");\n```\n\n### How to select and unSelect layers dynamically ? \n\n- To force select a layer dynamically, simply use selectLayer function like this :\n```javascript\n    control.selectLayer( corn_sp );\n```\n\n- So.. to un-select the layer :\n```javascript\n    control.unSelectLayer( corn_sp );\n```\n\n### How to select and unSelect group layers dynamically ? \n- To force select all layer of a group, use like this :\n```javascript\n    control.selectGroup( \"Rio de Janeiro\" );\n```\n\n- So.. to un-select the all layer of group :\n```javascript\n    control.unSelectGroup( \"Rio de Janeiro\" );\n```\n\n\n### License \n<a rel=\"license\" href=\"http://creativecommons.org/licenses/by/3.0/deed.en_US\"><img alt=\"Creative Commons License\" style=\"border-width:0\" src=\"http://i.creativecommons.org/l/by/3.0/88x31.png\" /></a><br />This work is licensed under a <a rel=\"license\" href=\"http://creativecommons.org/licenses/by/3.0/deed.en_US\">Creative Commons Attribution 3.0 Unported License</a>.\n","readmeFilename":"README.md"}