{"id":21539898,"url":"https://github.com/raruto/google-transparency","last_synced_at":"2025-10-11T06:32:41.618Z","repository":{"id":98199463,"uuid":"158754477","full_name":"Raruto/google-transparency","owner":"Raruto","description":"Google Maps plugin that allows to add an opacity control.","archived":false,"fork":false,"pushed_at":"2018-11-23T23:58:38.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T21:51:37.864Z","etag":null,"topics":["basemap","google-maps","javascript","layer","opacity-control","overlay","transparency"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"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":null,"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":"2018-11-22T22:12:30.000Z","updated_at":"2018-11-23T23:58:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"7ac1f2e2-8d00-4bc1-8910-5ffa87ebc92d","html_url":"https://github.com/Raruto/google-transparency","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Raruto/google-transparency","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fgoogle-transparency","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fgoogle-transparency/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fgoogle-transparency/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fgoogle-transparency/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Raruto","download_url":"https://codeload.github.com/Raruto/google-transparency/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fgoogle-transparency/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279006453,"owners_count":26084108,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","google-maps","javascript","layer","opacity-control","overlay","transparency"],"created_at":"2024-11-24T04:16:40.489Z","updated_at":"2025-10-11T06:32:41.604Z","avatar_url":"https://github.com/Raruto.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# google-transparency.js\nA Google Maps plugin that allows to add an opacity control.\n\n_For a working example (without API Key) see [demo](https://raruto.github.io/examples/google-transparency/google-transparency.html)_\n\n---\n\n\u003e _Initally based on the [work](http://www.gavinharriss.com/code/opacity-control) of **Gavin Harriss**_\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    \u003cscript src=\"https://maps.google.com/maps/api/js?key=\u003cINSERT_HERE_API_KEY\u003e\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://raruto.github.io/cdn/google-transparency/0.0.1/google-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 “google-transparency” slippy map**\n    ```html\n    \u003cscript\u003e\n      var mapOpts = {\n        center: new google.maps.LatLng(-42.8598, 171.8043),\n        zoom: 13,\n        mapTypeId: google.maps.MapTypeId.SATELLITE,\n      }\n\n      var map = new google.maps.Map(document.getElementById('map'), mapOpts);\n\n      var image_overlay = new OpacityControl(map, {\n        opacity: 100,\n        getTileUrl: function(coord, zoom) {\n          // Restricting tiles to the small tile set we have in the example\n          if (zoom == 13 \u0026\u0026 coord.x \u003e= 8004 \u0026\u0026 coord.x \u003c= 8006 \u0026\u0026 coord.y \u003e= 3013 \u0026\u0026 coord.y \u003c= 3015) {\n            return \"http://www.gavinharriss.com/codefiles/opacity-control/tiles/\" + zoom + \"-\" + coord.x + \"-\" + coord.y + \".png\";\n          } else {\n            return \"http://www.gavinharriss.com/codefiles/opacity-control/tiles/blanktile.png\";\n          }\n        },\n      });\n\n      var basemap_overlay = new OpacityControl(map, {\n        opacity: 0.1,\n        sliderImageUrl: \"https://raruto.github.io/cdn/google-transparency/0.0.1/opacity-slider2.png\",\n        backgroundColor: \"rgba(229, 227, 223, 0.9)\",\n        position: google.maps.ControlPosition.RIGHT_TOP\n      }, );\n    \u003c/script\u003e\n    ```\n---\n\n**Compatibile with:** gmaps@3.34\n\n---\n\n**Contributors:** [GavinHarriss](https://github.com/gavinharriss/google-maps-v3-opacity-control/), [Klokan](https://www.maptiler.com/blog/2008/11/opacity-control-for-google-maps-in.html), [Raruto](https://github.com/Raruto/google-transparency)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraruto%2Fgoogle-transparency","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraruto%2Fgoogle-transparency","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraruto%2Fgoogle-transparency/lists"}