{"id":21539857,"url":"https://github.com/raruto/leaflet-transparency","last_synced_at":"2026-03-06T13:04:13.062Z","repository":{"id":98199485,"uuid":"188114292","full_name":"Raruto/leaflet-transparency","owner":"Raruto","description":"Leaflet plugin that allows to add an opacity control. ","archived":false,"fork":false,"pushed_at":"2020-02-09T19:05:35.000Z","size":511,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-11T11:28:43.398Z","etag":null,"topics":["basemap","javascript","layer","leaflet","opacity-control","overlay","transparency"],"latest_commit_sha":null,"homepage":"https://raruto.github.io/leaflet-transparency","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Raruto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null}},"created_at":"2019-05-22T21:11:15.000Z","updated_at":"2025-02-20T08:41:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"cf9ad54d-76c1-4fb7-855c-eadb6c29fbdb","html_url":"https://github.com/Raruto/leaflet-transparency","commit_stats":{"total_commits":18,"total_committers":2,"mean_commits":9.0,"dds":"0.16666666666666663","last_synced_commit":"02a9c0ee48518cef6b547183f8db3be44cddc9c4"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/Raruto/leaflet-transparency","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fleaflet-transparency","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fleaflet-transparency/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fleaflet-transparency/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fleaflet-transparency/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Raruto","download_url":"https://codeload.github.com/Raruto/leaflet-transparency/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fleaflet-transparency/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259783063,"owners_count":22910300,"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":["basemap","javascript","layer","leaflet","opacity-control","overlay","transparency"],"created_at":"2024-11-24T04:16:34.185Z","updated_at":"2026-03-06T13:04:13.017Z","avatar_url":"https://github.com/Raruto.png","language":"JavaScript","readme":"# leaflet-transparency.js\nLeaflet plugin that allows to add an opacity control.\n\n_For a working example see [demo](https://raruto.github.io/leaflet-transparency/examples/leaflet-transparency.html)_\n\n---\n\n\u003e _Initally based on the [google-transparency](https://github.com/Raruto/google-transparency) plugin_\n\n---\n\n## How to use\n\n1. **include CSS \u0026 JavaScript**\n    ```html\n    \u003chead\u003e\n    ...\n    \u003cstyle\u003ehtml, body, #map { width: 100%; height: 100%; margin: 0; padding: 0; }\u003c/style\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/leaflet@1.3.2/dist/leaflet.css\" /\u003e\n    \u003cscript src=\"https://unpkg.com/leaflet@1.3.2/dist/leaflet.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/leaflet-transparency@latest/leaflet-transparency.js\"\u003e\u003c/script\u003e\n    ...\n    \u003c/head\u003e\n    ```\n2. **choose the div container used for the slippy map**\n    ```html\n    \u003cbody\u003e\n    ...\n    \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n    ...\n    \u003c/body\u003e\n    ```\n3. **create your first simple “leaflet-transparency” slippy map**\n    ```html\n    \u003cscript\u003e\n\n    var opts = {\n        map: {\n          center: [41.4583, 12.7059],\n          zoom: 5,\n        },\n        otmLayer: {\n          url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',\n          options: {\n            attribution: 'Map data: \u0026copy; \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e, \u003ca href=\"http://viewfinderpanoramas.org\"\u003eSRTM\u003c/a\u003e | Map style: \u0026copy; \u003ca href=\"https://opentopomap.org\"\u003eOpenTopoMap\u003c/a\u003e (\u003ca href=\"https://creativecommons.org/licenses/by-sa/3.0/\"\u003eCC-BY-SA\u003c/a\u003e)',\n            maxZoom: 17,\n          },\n        },\n        satelliteLayer: {\n          url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',\n          options: {\n            attribution: '\u0026copy; \u003ca href=\"http://www.esri.com/\"\u003eEsri\u003c/a\u003e',\n            maxZoom: 18,\n          },\n        },\n        opacityBaseControl: {\n          options: {\n            sliderImageUrl: \"images/opacity-slider2.png\",\n            backgroundColor: \"rgba(0, 0, 0, 0.9)\",\n            opacity: 1,\n            position: 'topright',\n          }\n        },\n        opacityOverlayControl: {\n          options: {\n            sliderImageUrl: \"images/opacity-slider2.png\",\n            backgroundColor: \"rgba(229, 227, 223, 0.9)\",\n            opacity: 0.75,\n            position: 'topright',\n          }\n        },\n      };\n\n      var map = new L.Map('map', opts.map);\n\n      var layer = new L.TileLayer(opts.otmLayer.url, opts.otmLayer.options);\n      var overlay = new L.TileLayer(opts.satelliteLayer.url, opts.satelliteLayer.options);\n\n      var controlBaseOpacity = new L.Control.OpacitySlider(null, opts.opacityBaseControl.options);\n      var controlOverlayOpacity = new L.Control.OpacitySlider(overlay, opts.opacityOverlayControl.options);      \n\n      controlBaseOpacity.addTo(map);\n      controlOverlayOpacity.addTo(map);      \n\n      layer.addTo(map);      \n\n    \u003c/script\u003e\n    ```\n---\n\n**Compatibile with:** leaflet@1.3.2\n\n---\n\n**Contributors:** [Raruto](https://github.com/Raruto/leaflet-transparency)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraruto%2Fleaflet-transparency","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraruto%2Fleaflet-transparency","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraruto%2Fleaflet-transparency/lists"}