ALS

Global

Type Definitions

DefaultGeneralSettingsObject

Default general settings object

Type:
  • Object
Properties:
Name Type Description
theme "light" | "dark"

Current theme
menuPosition "left" | "right"

Current menu position.

DisplayOptions

Display options for a label

Type:
  • Object
Properties:
Name Type Argument Default Description
backgroundColor string <optional>
 "white"

Background color in format which Canvas can read. Defaults to "white".
borderColor string <optional>
 "#ccc"

Border color in format which Canvas can read. Defaults to "#ccc".
fontColor string <optional>
 "black"

Font color in format which Canvas can read. Defaults to "black".
textAlign "left" | "center" | "right" <optional>
 "left"

alignment. Defaults to "left".
origin "topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight" | "leftCenter" | "rightCenter" | "center" <optional>
 "center"

Origin of a label, i.e. which "part" of it will be at given latLng. Defaults to "center".
maxWidth number <optional>
 0

Maximum width of a label in number of characters per line. If label will exceed this parameter, it will be wrapped. If it's less than 1, label width will not be limited. Must be an integer. Defaults to 0.
breakWords boolean <optional>
 true

Whether to break words when DisplayOptions.maxWidth is greater than zero. If false, label will be wrapped at the first space after DisplayOptions.maxWidth is exceeded.

ElectronIntegrationOptions

Integration options

Properties:
Name Type Argument Default Description
useToolbarAsFrame boolean <optional>
 true

If true, ALS toolbar will be used as a window frame. Takes effect only when SystemOptions.enableToolbar is true. Set BrowserWindow's frame option to false and webPreferences.enableRemoteModule to true before using this option!

GeneralSettingsObject

General settings object that contains default settings

Type:

LabelProperties

Object that represents label. Not linked to the actual label in any way, won't be updated over time, can be freely modified.

Type:
Properties:
Name Type Description
id string

ID of a label
text string

Text of a label
latLng Array.<number> | L.LatLng

Position of a label. If label is created using L.ALS.LeafletLayers.LabelLayer#addLabel, this property will be an array. Though, you can safely assign L.LatLng to it, it's always good to be consistent with the coordinates and use an array.

onJsonLoad(fileInput)

Parameters:
Name Type Description
fileInput HTMLInputElement

File input containing JSON. You must only read this file as text, you shouldn't parse it, handle parsing errors or anything, system will do this for you.
Returns:

Content of the file

Type
string

onJsonSave(JSON, filename)

Parameters:
Name Type Description
JSON string

JSON to save.
filename string

Default filename. @see {SystemOptions}

onProjectExport(zip)

Parameters:
Name Type Description
zip JSZip

A JSZip instance to save

SettingsObject

Settings object. Keys are layer settings. general settings are in generalSettings property.

Type:
  • Object.<string, any>
Properties:
Name Type Description
generalSettings GeneralSettingsObject

Default and custom general settings

SystemOptions

Options for the Layer System

Type:
  • Object
Properties:
Name Type Argument Default Description
aboutHTML string <optional>

HTML that will be displayed in "About" section in settings. Defaults to undefined.
defaultLocale string <optional>
 "English"

Locale to use by default. Defaults to "English".
filePrefix string <optional>
 ""

Prefix that will be added to the saved files, i.e. if equals to "MyApp", saved project file will be called "MyAppProject.json" instead of "Project.json". Defaults to empty string.
tabTitle "project-and-title" | "project" | "title" <optional>
 "project-and-title"

For Chrome with FileSystem API support only. Defines what to put in tab title, uses existing <title> tag. Possible values: project-and-title - will prepend project name to the existing title, so it'll look like "ProjectFileNameWithoutExtension - Existing Title"; "project-name" - will replace existing title with project name; "title" - will not change title. Note: to enable this feature in Electron, add app.commandLine.appendSwitch("enable-experimental-web-platform-features"); to your main script. Defaults to "project-and-title".
makeMapFullscreen boolean <optional>
 false

If true, will make your map fullscreen. Setting this option to true is necessary if you want to use a toolbar and make the map fullscreen unless you want to write necessary hacks.
enableNotificationOnExit boolean <optional>
 true

If true, on exit, will show a notification that says: "Your project might have unsaved changes. Do you wan't to stay and save it?". It uses a well known hack that prevents tab on closing. However, this hack might interfere with frameworks such as Electron or NW.js. If you're experiencing issues with it, set it to false. For Electron, use ElectronIntegration in your Electron entry point. For other frameworks, show a dialog box and pass L.ALS.locale.systemBeforeExit property to it. Doesn't take effect in Electron. Defaults to true.
enableKeyboardShortcuts boolean <optional>
 true

If true, enables keyboard shortcuts. Note: Ctrl+S works only in browsers that supports Blob. Defaults to true.
enableHistory boolean <optional>
 false

If true, adds undo and redo buttons. History should be managed by calling L.ALS.Layer#writeToHistory when an action is performed. History is based on serialization, so undo and redo can be quite slow (~0.25s). Defaults to false.
historySize number <optional>
 20

How many records history can hold. 0 means unlimited. The optimal value depends on complexity of your layers. See the "Memory" tab in your browser, do some actions, watch how memory consumption grows and decide the history size based on this factor. Defaults to 20.
enableToolbar boolean <optional>
 false

If true, enables toolbar which contains buttons from the menu and takes the whole width of the container. If you're using ALS for more than just a menu, a toolbar will greatly improve your app's UX. Defaults to false.
toolbarZoomControl L.Control <optional>

A zoom control to put on the map if there's no space left on the toolbar. This control will be automanaged and placed at the top of the map. Takes effect only on mobile devices and when SystemOptions.enableToolbar is true. Pass undefined to disable zoom control in this case and, if needed, add zoom control by calling L.ALS.System#addControl and customize its position. Defaults to an instance of L.ALS.ControlZoom.
enableDuplicateButton boolean <optional>
 true

If true, will enable "duplicate" button in layers. This functionality requires serialization. Defaults to true.
enableNewProjectButton boolean <optional>
 true

If true, there will be "new project" button which simply reloads page. Defaults to true.
enableSettings boolean <optional>
 true

If true, user will be able to set up your application using built-in settings system. Otherwise, settings button will be removed. Setting this option to false is not recommended because you'll need to implement theme and locale switching yourself. System doesn't provide any API for that, so disabling this option is not recommended. Defaults to true.
enableProjects boolean <optional>
 true

If true, user will be able to save and load projects using built-in serialization system. Otherwise, save and load buttons will be removed. Defaults to true.
enableExport boolean <optional>
 true

If true, user will be able to export project to JSON. Otherwise, export button will be removed. Defaults to true.
enableBaseLayerSwitching boolean <optional>
 true

If true, user will be able to switch Leaflet base layers (i.e. map providers). Otherwise, maps select menu will be removed. Defaults to true.
position "topleft" | "topright" | "bottomleft" | "bottomright" <optional>
 "topright"

Position of the menu button. If set to topleft or bottom left, menu itself will be on the left side. Defaults to "topright".
useOnlyThisLayer function <optional>

If you need to display only one layer and disable ability to add other layers, pass your layer's class (class, not an instance, i.e. L.ALS.Layer, not new L.ALS.Layer()) here. So you'll end up with pretty much static menu. Defaults to undefined.
onJsonSave onJsonSave <optional>

A function to call when project is being saved. Replaces default saving routine. Will be used ONLY if user's browser doesn't support Blob. Here you must provide a routine to save a string to a file. Use it ONLY if you have a backend to upload files to and simulate a download! ALS already provides all the needed hacks, fixes bugs in saveAs and much more. If you don't trust this text, check the source code. Don't waste your time on making your own hacks. Value defaults to undefined.
onJsonLoad onJsonLoad <optional>

A function to call when user wants to load a project. Replaces default file loading routine. Will be used ONLY if user's browser doesn't support FileReader. Here you must provide a routine to read file from an input as text and return it. Use it ONLY if you have a backend to upload files to and simulate a download! ALS already provides all the needed hacks, fixes bugs in saveAs and much more. If you don't trust this text, check the source code. Don't waste your time on making your own hacks. Value defaults to undefined.
onProjectExport onProjectExport <optional>

A function to call when user exports project. Replaces default file saving routine. It will be called ONLY if user's browser doesn't support Blob. Here you must provide a routine to save a JSZip instance. Use it ONLY if you have a backend to upload files to and simulate a download! ALS already provides all the needed hacks , fixes bugs in saveAs and much more. If you don't trust this text, check the source code. Don't waste your time on making your own hacks. Value defaults to undefined.
removeMenuBar boolean <optional>
 false

Completely removes the menu bar. Useful for creating your own UI. Defaults to false.
generalSettings function <optional>
 L.ALS.GeneralSettings

Custom general settings class. Use it to add custom application-wide settings. Extend L.ALS.GeneralSettings and pass it here. Then you can access both layer and general settings at L.ALS.Layer#applyNewSettings. Default general settings will be applied automatically. If multiple ALS instances are used, this option will be considered only for the first instance.