leaflet-advanced-layer-system
Advanced tools
Have 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!
Layer 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.
Features:
Sounds cool? See "Getting started" or jump straight to the docs!
ALS demos - demonstrates all important ALS capabilities and provides the source code for all demos.
SynthFlight - aerial photography planning software which uses ALS. Well, initially, ALS has been developed for SynthFlight :D
Run npm i leaflet-advanced-layer-system.
In your index.html add following stuff to the <head> after Leaflet's scripts and CSS:
<!-- ALS CSS. Must go before scripts. -->
<link rel="stylesheet" href="css/base.css" />
<!-- ALS scripts. Put in exact same order. -->
<script src="node_modules/leaflet-advanced-layer-system/dist/polyfills.js"></script> <!-- Polyfills -->
<script src="node_modules/leaflet-advanced-layer-system/dist/System.js"></script> <!-- ALS entry point. Alternatively, you can import it in your main script -->
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.
Add following code to your entry point:
require("leaflet-advanced-layer-system"); // Require this plugin or add it to your .html page via "script" tag as has been shown above
require("./MyLayer.js"); // Require your layer types and other stuff
L.ALS.System.initializeSystem(); // Initialize system. This method MUST be called after all Leaflet and ALS imports.
let map = L.map("map", { // Create a map
preferCanvas: true, // Use it to improve performance
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!
});
let layerSystem = new L.ALS.System(map, { /* Options */ }); // Create an instance of this class
let baseLayer = L.tileLayer(/* ... */); // Create some base layers
layerSystem.addBaseLayer(baseLayer, "My Base Layer"); // Add your base layers to the system
layerSystem.addLayerType(L.ALS.MyLayer); // Add your layer types
Then jump to the docs and start coding!
ALS supports following browsers:
Known issues with old browsers (~7 years or older) that can't be fixed due to technical reasons:
FileReader from reading local files. To solve it, you should either:
--allow-file-access-from-files flag when running browser.You 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.
Learning curve is a bit steep, but ALS solves much more problems than it adds.
Technically, 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.
If 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.
No, 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.
However, 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.
Oh, there's much to add to the project, you can contribute by:
FAQs
An advanced layer system and more for Leaflet
We found that leaflet-advanced-layer-system demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall blocks malicious VS Code and Open VSX extensions before install, protecting developers from compromised editor marketplaces.
Research
More than 140 Mastra npm packages were compromised in a supply chain attack that used a typosquatted dependency to deliver a cross-platform infostealer during installation.
Research
/Security News
A new npm package tests AI malware scanners with prompt injection, safety-triggering comments, context flooding, and obfuscated JavaScript.