{"id":25636643,"url":"https://github.com/bbecquet/leaflet.magnifyingglass","last_synced_at":"2025-04-14T22:11:13.575Z","repository":{"id":12533724,"uuid":"15203697","full_name":"bbecquet/Leaflet.MagnifyingGlass","owner":"bbecquet","description":"A plugin to add a customizable magnifying glass tool to a Leaflet map.","archived":false,"fork":false,"pushed_at":"2019-03-08T14:31:11.000Z","size":581,"stargazers_count":105,"open_issues_count":9,"forks_count":24,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-28T10:11:40.171Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/bbecquet.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}},"created_at":"2013-12-15T13:11:51.000Z","updated_at":"2024-07-27T02:52:13.000Z","dependencies_parsed_at":"2022-09-16T23:40:12.557Z","dependency_job_id":null,"html_url":"https://github.com/bbecquet/Leaflet.MagnifyingGlass","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbecquet%2FLeaflet.MagnifyingGlass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbecquet%2FLeaflet.MagnifyingGlass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbecquet%2FLeaflet.MagnifyingGlass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbecquet%2FLeaflet.MagnifyingGlass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bbecquet","download_url":"https://codeload.github.com/bbecquet/Leaflet.MagnifyingGlass/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248968914,"owners_count":21191162,"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":[],"created_at":"2025-02-23T00:49:01.173Z","updated_at":"2025-04-14T22:11:13.554Z","avatar_url":"https://github.com/bbecquet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Leaflet Magnifying Glass\n========================\n\nThis plugin allows you to add a \"magnifying glass\" effect to a Leaflet map, able to display a portion of the map in a different zoom (and actually display different content).\n\nSee it in action:\n\n* [Default behavior, following mouse movement](http://bbecquet.github.io/Leaflet.MagnifyingGlass/examples/example.html)\n* [Activated with a control button](http://bbecquet.github.io/Leaflet.MagnifyingGlass/examples/example_button.html)\n* [Multiple fixed glasses, with different map looks](http://bbecquet.github.io/Leaflet.MagnifyingGlass/examples/example_multi.html)\n\nSupport\n-------\nThe development version of the plugin (on the `master` branch) is targeted at the 1.* version of Leaflet.\n\nFor a version of the plugin compatible with the 0.7.* Leaflet releases, use the `leaflet-0.7.2` branch.\n\nNot tested on mobile browsers.\n\nScreenshot\n----------\n![screenshot](https://raw.github.com/bbecquet/Leaflet.MagnifyingGlass/master/screenshot.png \"Default look of the magnifying glass\")\n\nDefault look of the magnifying glass, using the same tile background as the main map and a zoom level offset set to 3.\n\nUsage\n-----\n\n* Add the style sheet and script file to your page;\n* Instantiate a magnifying glass and add it to the map like any other layer:\n\n```javascript\nvar magnifyingGlass = L.magnifyingGlass({\n    layers: [ ... ]\n});\n\nmap.addLayer(magnifyingGlass);\n```\n\n### Inner layers\n\nFor it to display something, you need to pass layers to the constructor. You can simply give a `L.TileLayer`, but any other type of layers too.\n\nLeaflet layer objets can't be shared between maps. So, __don't re-use layer objects already in use by the main map__. For example, if you want to use the same tile background on your main map and in the magnifying glass, you need to instantiate two different `L.TileLayer` objects:\n\n```javascript\n// Share the same tile url...\nvar tileUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';\n// but use two independant TileLayer objects\nvar mapTiles = L.tileLayer(tileUrl),\n    magnifiedTiles = L.tileLayer(tileUrl);\n\nvar map = L.map('map', {\n    center: [0, 0],\n    zoom: 5,\n    layers: [ mapTiles ]\n});\n\nvar magnifyingGlass = L.magnifyingGlass({\n    layers: [ magnifiedTiles ]\n}).addTo(map);\n```\n\n### Options\n\n| Option          |  Type       | Default   | Description |\n| ---             | ---         | ---       | --- |\n| `radius`        | `Integer`   | `100`     | The radius of the magnifying glass, in pixels. |\n| `zoomOffset`    | `Integer`   | `3`       | The zoom level offset between the main map zoom and the magnifying glass. |\n| `fixedZoom`     | `Integer`   | `-1`      | If different than `-1`, defines a fixed zoom level to always use in the magnifying glass, ignoring the main map zoom and the `zoomOffet` value. |\n| `fixedPosition` | `Boolean`   | `false`   | If `true`, the magnifying glass will stay at the same position on the map, not following the mouse cursor. |\n| `latLng`        | `LatLng`    | `[0, 0]`  | The initial position of the magnifying glass, both on the main map and as the center of the magnified view. If `fixedPosition` is `true`, it will always keep this position. |\n| `layers`        | `ILayer[]`  | `[]`      | Set of layers to display in the magnified view. These layers shouldn't be already added to a map instance (see note above). |\n\n### Methods\n\n| Method | Description |\n| ---    | ---         |\n| `getMap()` | Returns the `L.Map` instance used by the magnifying glass. You can use it for example to add/remove magnified layers on the fly. |\n\nLicense\n-------\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbecquet%2Fleaflet.magnifyingglass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbbecquet%2Fleaflet.magnifyingglass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbecquet%2Fleaflet.magnifyingglass/lists"}