{"id":20283834,"url":"https://github.com/matafokka/leaflet-advanced-layer-system","last_synced_at":"2025-04-11T08:23:13.331Z","repository":{"id":65600882,"uuid":"363214890","full_name":"matafokka/leaflet-advanced-layer-system","owner":"matafokka","description":"An advanced layer system (and more) for Leaflet","archived":false,"fork":false,"pushed_at":"2022-10-09T13:04:52.000Z","size":3273,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T05:51:24.325Z","etag":null,"topics":["advanced-layer-system","als","javascript","js","leaflet","leaflet-advanced-layer-system","leaflet-layer-system","leaflet-plugin"],"latest_commit_sha":null,"homepage":"","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/matafokka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"matafokka","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2021-04-30T17:36:57.000Z","updated_at":"2025-01-29T15:31:50.000Z","dependencies_parsed_at":"2023-01-31T09:05:11.563Z","dependency_job_id":null,"html_url":"https://github.com/matafokka/leaflet-advanced-layer-system","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matafokka%2Fleaflet-advanced-layer-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matafokka%2Fleaflet-advanced-layer-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matafokka%2Fleaflet-advanced-layer-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matafokka%2Fleaflet-advanced-layer-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matafokka","download_url":"https://codeload.github.com/matafokka/leaflet-advanced-layer-system/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248361032,"owners_count":21090803,"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":["advanced-layer-system","als","javascript","js","leaflet","leaflet-advanced-layer-system","leaflet-layer-system","leaflet-plugin"],"created_at":"2024-11-14T14:17:18.692Z","updated_at":"2025-04-11T08:23:13.286Z","avatar_url":"https://github.com/matafokka.png","language":"JavaScript","readme":"\u003c!-- This readme is for library. For readme for the docs, see README_DOCS.md --\u003e\n\n# Advanced Layer System (ALS) for Leaflet\n\nHave you ever needed something more than a simple layer switcher? Probably, custom layer types? Multiple interactive layers? Full-blown projects like in big apps? Just a cool menu? ALS got you covered!\n\nLayer system handles hard stuff like managing layers, hacking Leaflet, struggling with UI and everything else. You're left to focus only on your app's functionality.\n\nFeatures:\n\n1. A layer system which allows you to create custom layer types and allows users to add those layers to the map. Users can add, delete, move, hide and tweak layers.\n1. Project management done by serialization. Projects can be exported as GeoJSON files. Yup, like in GIS.\n1. A simple menu which uses single layer type and doesn't feature all the advanced stuff.\n1. A widget library. Moreover, you can add widgets to the map!\n1. Extras: wizards, settings, localization, Electron integration and more!\n\nSounds cool? See [\"Getting started\"](#getting-started) or jump straight to the [docs](https://matafokka.github.io/leaflet-advanced-layer-system/)!\n\n# Demos\n\n[ALS demos](https://matafokka.github.io/als-demos) - demonstrates all important ALS capabilities and provides the source code for all demos.\n\n[SynthFlight](https://matafokka.github.io/SynthFlight) - aerial photography planning software which uses ALS. Well, initially, ALS has been developed for SynthFlight :D\n\n# [Docs](https://matafokka.github.io/leaflet-advanced-layer-system/)\n\n\n# Getting started\n\n## Adding a dependency\n\nRun `npm i leaflet-advanced-layer-system`.\n\n## Importing ALS\n\nIn your `index.html` add following stuff to the `\u003chead\u003e` after Leaflet's scripts and CSS:\n\n```html\n\u003c!-- ALS CSS. Must go before scripts. --\u003e\n\u003clink rel=\"stylesheet\" href=\"css/base.css\" /\u003e\n\n\u003c!-- ALS scripts. Put in exact same order. --\u003e\n\u003cscript src=\"node_modules/leaflet-advanced-layer-system/dist/polyfills.js\"\u003e\u003c/script\u003e \u003c!-- Polyfills --\u003e\n\u003cscript src=\"node_modules/leaflet-advanced-layer-system/dist/System.js\"\u003e\u003c/script\u003e \u003c!-- ALS entry point. Alternatively, you can import it in your main script --\u003e\n```\n\n**Warning**: Polyfills should NEVER be transformed by anything! You still can `require()` them, but it's better to leave them in your HTML and ignore in your build script.\n\n## Setting up a project\n\nAdd following code to your entry point:\n```JavaScript\nrequire(\"leaflet-advanced-layer-system\"); // Require this plugin or add it to your .html page via \"script\" tag as has been shown above\nrequire(\"./MyLayer.js\"); // Require your layer types and other stuff\n\nL.ALS.System.initializeSystem(); // Initialize system. This method MUST be called after all Leaflet and ALS imports.\nlet map = L.map(\"map\", { // Create a map\n    preferCanvas: true, // Use it to improve performance\n    keyboard: false // Setting this option to false is a MANDATORY! If you don't do that, you'll encounter problems when using L.ALS.LeafletLayers.WidgetLayer!\n});\nlet layerSystem = new L.ALS.System(map, { /* Options */ }); // Create an instance of this class\nlet baseLayer = L.tileLayer(/* ... */); // Create some base layers\nlayerSystem.addBaseLayer(baseLayer, \"My Base Layer\"); // Add your base layers to the system\nlayerSystem.addLayerType(L.ALS.MyLayer); // Add your layer types\n```\n\nThen jump to the [docs](https://matafokka.github.io/leaflet-advanced-layer-system/) and start coding!\n\n# Browser support\n\nALS supports following browsers:\n\n* Chrome 8 or later.\n* Firefox 22 or later.\n* Safari 6 or later.\n* Internet Explorer 9 or later.\n* Any other modern desktop or mobile browser.\n\nKnown issues with old browsers (~7 years or older) that can't be fixed due to technical reasons:\n* Outdated Chromium-based browsers have a \"feature\" that prevents `FileReader` from reading local files. To solve it, you should either:\n    * Host your app on a web server.\n    * Somehow make your users add `--allow-file-access-from-files` flag when running browser.\n* Users can't save files, they need to manually copy JSON from the browser to their files.\n* Users can save files, but those files won't have a proper name.\n* IE 9 only: users needs to manually save multiple files when exporting project.\n* IE 9 only: users might be asked to change their settings when they'll try to open a project or import settings. The pop-up window will provide all necessary instructions.\n* Users can't save settings.\n\nYou can solve these problems either by removing functionality based on the browser or by providing a backend which will receive the data and send it back to the client, so it will \"simulate\" a download. ALS provides the callbacks where you can make your requests. See `SystemOptions` docs for both options.\n\n# FAQ\n\n## What about learning curve?\n\nLearning curve is a bit steep, but ALS solves much more problems than it adds.\n\n## ALS widgets vs modern frameworks with plugins\n\n1. ALS uses traditional and non-reactive widgets similar to Qt and GTK. Frameworks uses reactive components.\n1. ALS is faster since it uses straightforward DOM manipulation when needed instead of heavy stuff like Virtual DOM. ALS also doesn't need to sync components since it's not reactive.\n1. ALS provides way better browser support than most modern frameworks.\n1. ALS provides a huge set of features that you'll need to implement yourself otherwise.\n\n## Can I use my favourite framework instead of built-in widget system?\n\nTechnically, yes, but you'll have to pass `L.ALS.Widgetable`'s containers to your framework which is a bit hacky. There will be some more things to do such as serialization.\n\nIf you need to just add more widgets, you can do so by extending `L.ALS.Widgets.BaseWidget`. Otherwise, you're probably better off not using ALS.\n\n## What is project file format?\n\n[See the docs' home page.](https://matafokka.github.io/leaflet-advanced-layer-system/)\n\n## Are any API changes planned?\n\nNo, unless they will fix bugs. It also includes some parts returning text instead of locale properties. All such API changes will be documented in release notes.\n\nHowever, internal (package-scoped and private-scoped) members might be changed in the future, so please, avoid using it. File a bug report or feature request instead.\n\n## How can I contribute to the project?\n\nOh, there's much to add to the project, you can contribute by:\n\n1. Developing apps using ALS, so they can be added to this ReadMe :D\n1. Coding:\n    1. Create more widgets.\n    1. Improve browser support.\n    1. Provide additional layer types which others can use.\n    1. Create examples and tutorials for the docs.\n    1. Provide unit tests.\n    1. Everything else that comes to your mind.\n1. Localizing ALS.\n1. Improving docs. *Note: docs are being generated from the JSDoc comments. Either edit the comments or create an issue and describe what and where needs to be changed.*\n1. Reporting bugs.\n1. Requesting features.","funding_links":["https://ko-fi.com/matafokka"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatafokka%2Fleaflet-advanced-layer-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatafokka%2Fleaflet-advanced-layer-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatafokka%2Fleaflet-advanced-layer-system/lists"}