{"id":17844490,"url":"https://github.com/oliverroick/leaflet.deflate","last_synced_at":"2026-02-23T20:09:34.348Z","repository":{"id":30453248,"uuid":"34006925","full_name":"oliverroick/Leaflet.Deflate","owner":"oliverroick","description":"Deflates lines and polygons to a marker when their screen size becomes too small in lower zoom levels.","archived":false,"fork":false,"pushed_at":"2023-03-01T11:57:12.000Z","size":3818,"stargazers_count":148,"open_issues_count":6,"forks_count":20,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-08T08:45:44.142Z","etag":null,"topics":["leaflet","markercluster"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oliverroick.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":".github/CODE_OF_CONDUCT.md","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":"2015-04-15T16:55:09.000Z","updated_at":"2024-09-28T03:06:36.000Z","dependencies_parsed_at":"2024-06-18T17:02:37.747Z","dependency_job_id":"25bb43eb-e667-4be2-802b-045ace5c7be1","html_url":"https://github.com/oliverroick/Leaflet.Deflate","commit_stats":{"total_commits":299,"total_committers":8,"mean_commits":37.375,"dds":0.4882943143812709,"last_synced_commit":"561501028efdf1a399398011dab93041662fc774"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oliverroick%2FLeaflet.Deflate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oliverroick%2FLeaflet.Deflate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oliverroick%2FLeaflet.Deflate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oliverroick%2FLeaflet.Deflate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oliverroick","download_url":"https://codeload.github.com/oliverroick/Leaflet.Deflate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246837684,"owners_count":20841903,"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":["leaflet","markercluster"],"created_at":"2024-10-27T21:31:10.270Z","updated_at":"2025-10-29T18:19:40.954Z","avatar_url":"https://github.com/oliverroick.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Leaflet.Deflate\n\n[![npm version](https://badge.fury.io/js/Leaflet.Deflate.svg)](https://badge.fury.io/js/Leaflet.Deflate)\n\nLeaflet.Deflate is a plugin for [Leaflet](https://leafletjs.com/) that improves the readability of large-scale web maps. It substitutes polygons and lines with markers when their screen size falls below a defined threshold.\n\n![Example](https://user-images.githubusercontent.com/159510/52898557-a491d700-31df-11e9-86c4-7a585dc50372.gif)\n\n**Note:** The documentation and examples below are for Leaflet.Deflate's latest release. [Documentation of older releases is available](#previous-releases).\n\n## Installation\n\n### Using a hosted version\n\nInclude the source into the `head` section of your document.\n\n```html\n\u003cscript src=\"https://unpkg.com/Leaflet.Deflate/dist/L.Deflate.js\"\u003e\u003c/script\u003e\n```\n\n### Install via NPM\n\nIf you use the [npm package manager](https://www.npmjs.com/), you can fetch a local copy by running:\n\n```bash\nnpm install Leaflet.Deflate\n```\n\nYou will find a copy of the release files in `node_modules/Leaflet.Deflate/dist`.\n\n## API\n\n### `L.deflate`\n\n`L.deflate` is the main class of `Leaflet.Deflate`. Use it to create a feature group that deflates all layers added to the group.\n\n#### Usage example\n\nInitialize `L.deflate` and add it to your map. Then add layers you want to deflate.\n\n```javascript\nconst map = L.map(\"map\");\nconst features = L.deflate({minSize: 10})\nfeatures.addTo(map);\n\n// add layers\nconst polygon = L.polygon([\n    [51.509, -0.08],\n    [51.503, -0.06],\n    [51.51, -0.047]\n])\n.addTo(features);\n\n// works with GeoJSONLayer too\nL.geoJson(json).addTo(features);\n```\n\n#### Creation\n\nFactory                       | Description\n----------------------------  | -------------\n`L.deflate(\u003cObject\u003e options)` | Creates a new deflatable feature group, optionally given an options object.\n\n#### Options\n\nOption          | Type      | Default | Description\n--------------- | --------- | ------- | -------------\n`minSize`       | `int`     | `20`    | Optional. Defines the minimum width and height in pixels for a path to be displayed in its actual shape. Anything smaller than the defined `minSize` will be deflated.\n`markerType`    | `object`  | `L.marker` | Optional. Specifies the marker type to use for deflated features. Must be either `L.marker` or `L.circleMarker`.\n`markerOptions` | `object` or `function`  | `{}`    | Optional. Customize the markers of deflated features using [Leaflet marker options](http://leafletjs.com/reference-1.3.0.html#marker). If you specify `L.circleMarker` as `markerType` use [Leaflet circleMarker options](https://leafletjs.com/reference-1.3.0.html#circlemarker) instead.\n`markerLayer`   | `L.featureGroup` | `L.featureGroup` | A `L.FeatureGroup` instance used to display deflate markers. Use this to realise special behaviours, such as clustering markers.\n`greedyCollapse`| `boolean` | `true` | Specify false if you would like that features would be deflated only if both of their width and height are less than `minSize`.\n\n## Examples\n\n### Basic\n\nTo create a basic deflatable layer, you have to\n\n1. Create an `L.deflate` feature group and add it to your map.\n2. Add features to the `L.Deflate` feature group.\n\n```javascript\nconst map = L.map(\"map\").setView([51.505, -0.09], 12);\n\nconst deflate_features = L.deflate({minSize: 20});\ndeflate_features.addTo(map);\n\nconst polygon = L.polygon([\n    [51.509, -0.08],\n    [51.503, -0.06],\n    [51.51, -0.047]\n]);\npolygon.addTo(deflate_features);\n\nconst polyline = L.polyline([\n    [51.52, -0.05],\n    [51.53, -0.10],\n], {color: 'red'});\npolyline.addTo(deflate_features);\n```\n\n### GeoJSON\n\n[`GeoJSON` layers](http://leafletjs.com/reference-1.3.0.html#geojson) can be added in the same way:\n\n```javascript\nconst map = L.map(\"map\").setView([51.505, -0.09], 12);\n\nconst deflate_features = L.deflate({minSize: 20});\ndeflate_features.addTo(map);\n\nconst json = {\n    \"type\": \"FeatureCollection\",\n    \"features\": [{}]\n}\n\nL.geoJson(json, {style: {color: '#0000FF'}}).addTo(deflate_features);\n```\n\n### Custom markers\n\nYou can change the appearance of markers representing deflated features by providing:\n\n- A [marker-options object](http://leafletjs.com/reference-1.3.0.html#marker-option), or\n- A function that returns a marker-options object.\n\nProviding a marker-options object is usually sufficient. You would typically choose to provide a function if you want to base the marker appearance on the feature's properties.\n\nProvide the object or function to the `markerOptions` property when initializing `L.deflate`.\n\n#### Define custom markers using a marker options object\n\n```javascript\nconst map = L.map(\"map\").setView([51.550406, -0.140765], 16);\n\nconst myIcon = L.icon({\n  iconUrl: 'img/marker.png',\n  iconSize: [24, 24]\n});\n\nconst features = L.deflate({minSize: 20, markerOptions: {icon: myIcon}});\nfeatures.addTo(map);\n```\n\n#### Define custom markers using a function\n\n```javascript\nconst map = L.map(\"map\").setView([51.550406, -0.140765], 16);\n\nfunction options(f) {\n    // Use custom marker only for buildings\n    if (f.feature.properties.type === 'building') {\n        return {\n            icon: L.icon({\n                iconUrl: 'img/marker.png',\n                iconSize: [24, 24]\n            })\n        }\n    }\n\n    return {};\n}\n\nconst features = L.deflate({minSize: 20, markerOptions: options});\nfeatures.addTo(map);\n```\n\n### CircleMarkers\n\nAlternatively to standard markers, you can use [`CircleMarker`](https://leafletjs.com/reference-1.6.0.html#circlemarker) objects to represent deflated features on the map.\n\nTo use default circle markers, specify the `markerType` option.\n\n```javascript\nconst map = L.map(\"map\").setView([51.550406, -0.140765], 16);\n\nconst features = L.deflate({\n    minSize: 20,\n    markerType: L.circleMarker\n});\nfeatures.addTo(map);\n```\n\n#### Customise CircleMarker\n\nSimilar to standard markers, you can customise how circle markers are displayed using the `markerOptions` property. There are to options to provide the options for circle markers:\n\n- A [CircleMarker-options object](https://leafletjs.com/reference-1.6.0.html#circlemarker-option), or\n- A function that returns a CircleMarker-options object.\n\n##### Define custom circle markers using a CircleMarker options object\n\n```javascript\nconst map = L.map(\"map\").setView([51.550406, -0.140765], 16);\n\nconst features = L.deflate({\n    minSize: 20,\n    markerType: L.circleMarker,\n    markerOptions: {\n        radius: 3,\n        color: '#ff0000'\n    }\n});\nfeatures.addTo(map);\n```\n\n##### Define custom markers using a function\n\n```javascript\nconst map = L.map(\"map\").setView([51.550406, -0.140765], 16);\n\nfunction options(f) {\n    // Use custom marker only for buildings\n    if (f.feature.properties.type === 'building') {\n        return {\n            radius: 3,\n            color: '#ff0000'\n        }\n    }\n\n    return {};\n}\n\nconst features = L.deflate({\n    minSize: 20,\n    markerType: L.circleMarker,\n    markerOptions: options\n});\nfeatures.addTo(map);\n```\n\n### Cluster Markers\n\nUsing [Leaflet.Markercluster](https://github.com/Leaflet/Leaflet.markercluster\u003e), you can cluster markers. To enable clustered markers on a map:\n\n1. Add the `Leaflet.Markercluster` libraries to the `head` section of your document as [described in the MarkerCluster documentation](https://github.com/Leaflet/Leaflet.markercluster#using-the-plugin\u003e).\n2. Inject a `MarkerClusterGroup` instance via the `markerLayer` option when initializing `L.deflate`.\n\n```javascript\nconst map = L.map(\"map\").setView([51.505, -0.09], 12);\n\nconst markerLayer = L.markerClusterGroup();\nconst deflate_features = L.deflate({minSize: 20, markerLayer: markerLayer});\ndeflate_features.addTo(map);\n\nconst polygon = L.polygon([\n    [51.509, -0.08],\n    [51.503, -0.06],\n    [51.51, -0.047]\n]);\npolygon.addTo(deflate_features)\n\nconst polyline = L.polyline([\n    [51.52, -0.05],\n    [51.53, -0.10],\n], {color: 'red'});\npolyline.addTo(deflate_features)\n```\n\n### Leaflet.Draw\n\n[`Leaflet.Draw`](https://github.com/Leaflet/Leaflet.draw) is a plugin that adds support for drawing and editing vector features on Leaflet maps. `Leaflet.Deflate` integrates with `Leaflet.Draw`.\n\nInitialize the [`Leaflet.draw` control](https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest#l-draw). Use the `L.deflate` instance to draw and edit features and add it the map.\n\nTo ensure that newly added or edited features are deflated at the correct zoom level and show the marker at the correct location, you need to call `prepLayer` with the edited layer on every change. In the example below, we call `prepLayer` inside the handler function for the [`L.Draw.Event.EDITED`](https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest#l-draw-event-draw:editstop) event.\n\n```javascript\nconst map = L.map(\"map\").setView([51.505, -0.09], 12);\n\nconst deflate_features = L.deflate({minSize: 20, markerCluster: true});\ndeflate_features.addTo(map);\n\nconst drawControl = new L.Control.Draw({\n    edit: {\n        featureGroup: deflate_features\n    }\n});\nmap.addControl(drawControl);\n\nmap.on(L.Draw.Event.CREATED, function (event) {\n    const layer = event.layer;\n    deflate_features.addLayer(layer);\n});\n\nmap.on(L.Draw.Event.EDITED, function(event) {\n    const editedLayers = event.layers;\n    editedLayers.eachLayer(function(l) {\n        deflate_features.prepLayer(l);\n    });\n});\n\n```\n\n## Previous releases\n\nDocumentation for older releases is available:\n\n- [2.0.x](https://github.com/oliverroick/Leaflet.Deflate/tree/v2.0.0#leafletdeflate)\n- [1.4.x](https://github.com/oliverroick/Leaflet.Deflate/tree/v1.4.0#leafletdeflate)\n- [1.3.x](https://github.com/oliverroick/Leaflet.Deflate/tree/v1.3.0#leafletdeflate)\n- [1.2.x](https://github.com/oliverroick/Leaflet.Deflate/tree/v1.2.0#leafletdeflate)\n- [1.1.x](https://github.com/oliverroick/Leaflet.Deflate/tree/1.1.0#leafletdeflate)\n- [1.0.x](https://github.com/oliverroick/Leaflet.Deflate/tree/1.0.0#leafletdeflate)\n- [0.3](https://github.com/oliverroick/Leaflet.Deflate/tree/v0.3#leafletdeflate)\n- [0.2](https://github.com/oliverroick/Leaflet.Deflate/tree/v0.2#leafletdeflate)\n- [0.1](https://github.com/oliverroick/Leaflet.Deflate/tree/v0.1#leafletdeflate)\n\n## Developing\n\nYou'll need to install the dev dependencies to test and write the distribution file.\n\n```\nnpm install\n```\n\nTo run tests:\n\n```\nnpm test\n```\n\nTo run eslint on source and test code:\n\n```\nnpm run lint\n```\n\nTo write a minified JS into dist:\n\n```\nnpm run dist\n```\n\n## Authors\n\n- [Lindsey Jacks](https://github.com/linzjax)\n- [Loic Lacroix](https://github.com/loclac)\n- [Oliver Roick](http://github.com/oliverroick)\n\n## License\n\nApache 2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foliverroick%2Fleaflet.deflate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foliverroick%2Fleaflet.deflate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foliverroick%2Fleaflet.deflate/lists"}