new MesseMap()
The MesseMap main component
The MesseMap class is made to handle the whole application, its interactivity and all its user events. It hold the code to generate the poster output and serve it to the user. (see README.md for further details about used libraries). It also handle the data exchange with server to store saved posters as JSON. This constructor will initialize the Leaflet map and all its manipulators and will then listen to user events for text and export settings.
- Since:
- October 2022
- Source:
Members
(private) _commentEdited :Boolean
The flag to ensure the comment can be updated with center lat/lng
Type:
- Boolean
- Source:
(private) _cssTheme :Object
Hold default or saved theme colors (light/dark)
Type:
- Object
- Source:
(private) _intervalId :Number
setInterval ID used to frequently ask for printing (only if tiles are loaded)
Type:
- Number
- Source:
(private) _lang :String
The currently applied language
Type:
- String
- Source:
(private) _map :Object
The core Leaflet.js map
Type:
- Object
- Source:
(private) _nls :Object
The nls file that holds language key values
Type:
- Object
- Source:
(private) _scroll :Object
The aside scrollbar component
Type:
- Object
- Source:
(private) _search :Object
The Leaflet control search object
Type:
- Object
- Source:
(private) _tilesLoaded :Boolean
The flag to ensure all tiles are loaded before printing canvas to image
Type:
- Boolean
- Source:
Methods
(private, static) _applyTexts(e)
Simply apply the input text to the poster (for title, subtitle and comment)
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The text input |
- Since:
- October 2022
- Source:
(private, static) _closeModal(event, force)
Click on overlay callback event to test if modal needs to be closed. It can be bypassed with a flag to close modal no matter the context.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
Event | The click event |
force |
Boolean | Pass it to true to close the modal no matter the context |
- Since:
- October 2022
- Source:
(private, static) _creditModal(e)
This method will build the credit modal into the user interface.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The click event that triggered the modal |
- Since:
- October 2022
- Source:
(private, static) _dlMap(bounds, canvas)
The method will export the canvas previously drawn to the user disk, with the curently selected format in the aside. (using jsPDF if so, otherwise, classical href with dataUrl)
Parameters:
| Name | Type | Description |
|---|---|---|
bounds |
Object | The map bounds requested for the printing (here just to be passe to _dlRestoreMap()) |
canvas |
Object | The canvas that holds the poster data to be exported to disk |
- Since:
- October 2022
- Source:
(private, static) _dlPerformMapPrint(bounds)
The method will perform its logic only if all tiles are loaded. If so, it will use html2canvas library to perform a conversion between poster into a canvas that will be later used to save the poster to the user disk. Call this method in a setInterval to regulary test if tiles are loaded.
Parameters:
| Name | Type | Description |
|---|---|---|
bounds |
Object | The map bounds requested for the printing (here just to be passe to _dlRestoreMap()) |
- Since:
- October 2022
- Source:
(private, static) _dlPrepareMap(width, scale, bounds)
Before starting the downloading of the poster, the map must be scaled in order to honor the requested dimension. To do so, the map-output div is scaled according to the slider position, and the leaflet map is properly positionned to keep the user's viewport, not matter the upscale it request (there is a limitation with maxZoom of the map, which can not be overpassed).
Parameters:
| Name | Type | Description |
|---|---|---|
width |
Number | The poster width to use |
scale |
Number | The poster scale compared to the classical 600px wide one |
bounds |
Object | The map bounds requested for the printing |
- Since:
- October 2022
- Source:
(private, static) _dlRestoreMap(bounds)
When the poster downloading is done, this method is called to cleanup the map and to restore it to its default size to be then used again.
Parameters:
| Name | Type | Description |
|---|---|---|
bounds |
Object | The map bounds requested for the printing to restore the map with proper viewport |
- Since:
- October 2022
- Source:
(private, static) _download()
Start the download routine. First, hide the app with a loading overlay, then apply the user output dimension (set from the slider) to scale the poster to its final dimension, then ensure all tiles are loaded before starting html2canvas on that DIV. Finally, export to disk the canvas to image and restore the DOM to its initial size and scale.
- Since:
- October 2022
- Source:
(private, static) _endStartup()
This method will hide the print-overlay, and initialize its values for later exports after splash screen.
- Since:
- October 2022
- Source:
(private, static) _fetchModal(url) → {Promise}
This method will use the fetch API to request the modal HTMl file
stored in project assets/html.
Parameters:
| Name | Type | Description |
|---|---|---|
url |
String | The modal filename with no extension in /assets/html/ |
- Since:
- October 2022
- Source:
Returns:
A resolved or rejected Promise
- Type
- Promise
(private, static) _handleIconDrag()
Handle the icon dragging in the map output
- Since:
- January 2024
- Source:
(private, static) _initAdvancedFeatures() → {Promise}
In case of url contains ?callmeroot(), append advanced inputs and controls
It returns a promise that is resolved when interface is initialized. There is no reject case.
- Since:
- November 2023
- Source:
Returns:
A resolved Promise
- Type
- Promise
(private, static) _initEvents() → {Promise}
The _initEvents() method will listen to all required events to manipulate the map
and to modify the poster style and texts. Those events.
It returns a promise that is resolved when interface is initialized. There is no reject case.
- Since:
- October 2022
- Source:
Returns:
A resolved Promise
- Type
- Promise
(private, static) _initInterface() → {Promise}
This method will fetch the proper lang file and then will update the interface accordingly
- Since:
- November 2022
- Source:
Returns:
A resolved or rejected Promise
- Type
- Promise
(private, static) _initMap() → {Promise}
The _initInterface() method will create the Leaflet map and insert it to the DOM.
It will then handle the supported layer (in MapProviders) and will finally update
text in poster according to input default values.
It returns a promise that is resolved when interface is initialized, or that is
rejected there is no Leaflet in the user session (fatal error).
- Since:
- October 2022
- Source:
Returns:
A resolved or rejected Promise
- Type
- Promise
(private, static) _prepareIconForPrinting(scale)
Apply svg image with color to properly render icon ou output map
Parameters:
| Name | Type | Description |
|---|---|---|
scale |
Number | The output map scale |
- Since:
- January 2024
- Source:
(private, static) _searchMatch(data)
Set map view depending on search result
Parameters:
| Name | Type | Description |
|---|---|---|
data |
Object | The search data result to set view from |
- Since:
- November 2022
- Source:
(private, static) _sendImageParameters()
Perform a POST call to the server to save map parameters as JSON
- Since:
- April 2023
- Source:
(private, static) _setPosterConfigurationFromData(data)
From a JSON input, apply any transformation to the map or the poster, updates colors, texts, map style, map orientation, dark theme, text position and position map at lat/lng and zoom level described in saved file.
Parameters:
| Name | Type | Description |
|---|---|---|
data |
Object | A JSON map object, described in /saved/README.md |
- Since:
- November 2023
- Source:
(private, static) _textColorEdit(e)
Modify the text on map color. Overrides the default theme color
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The input color change |
- Since:
- October 2022
- Source:
(private, static) _themeEditModal(e)
This method will build th theme edit modal into the user interface.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The click event that triggered the modal |
- Since:
- October 2022
- Source:
(private, static) _toggleCategory(e)
Expand or colapse a given map modifiers category
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The click event on the category expander/collapser |
- Since:
- April 2023
- Source:
(private, static) _toggleIcon(e)
Display or hide the icon on the output map
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The check input |
- Since:
- January 2024
- Source:
(private, static) _updateCommentLabel()
Update the comment with map center coordinates, only if user didn't set a text in comment
- Since:
- October 2022
- Source:
(private, static) _updateDarkTheme(e)
Will update the poster with dark or light css theme colors. If colors have been overiden by user, they will properly applied to the poster.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The change event on the theme checkbox |
- Since:
- October 2022
- Source:
(private, static) _updateDimensionClicked(e)
Update the export resolution slider label and buttons according to a click on a button
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The input event on the size span |
- Since:
- April 2023
- Source:
(private, static) _updateDimensionLabel(e)
Update the export resolution slider label to notify the user the size of the generated poster, at 300 DPI.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The input event on the resolution slider |
- Since:
- October 2022
- Source:
(private, static) _updateIconColor(e)
Update the icon color
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The color input |
- Since:
- January 2024
- Source:
(private, static) _updateIconImage(e)
Update the icon source image
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The clicked image |
- Since:
- January 2024
- Source:
(private, static) _updateIconSize(e)
Update the icon size in output map
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The range input |
- Since:
- January 2024
- Source:
(private, static) _updateLang(e)
Updates the user interface language according to credit select value then reload page
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The input event on the select input |
- Since:
- November 2022
- Source:
(private, static) _updateMapOrientation(e)
Will update the poster vertical/horizontal orientation
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The click event on the theme checkbox |
- Since:
- October 2022
- Source:
(private, static) _updateMapStyle(e)
Updates the map style according to the element the user clicked on. All styles are handled in the scss style file.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The click event on the style button |
- Since:
- October 2022
- Source:
(private, static) _updateTextPosition(e)
Will update the poster text position wether to be top or bottom
Parameters:
| Name | Type | Description |
|---|---|---|
e |
Event | The change event on the up text checkbox |
- Since:
- October 2022
- Source:
(static) applyThemeColor()
Apply the css variables values to the root style from internal _cssTheme object
- Since:
- October 2022
- Source:
(static) blockInterface() → {Promise}
Will add a modal over the whole app to hide the page content
- Since:
- April 2023
- Source:
Returns:
- A promise resolved when UI is blocked
- Type
- Promise
(static) formatImageParameters() → {Object}
Will format all map parameters into a JSON object ready to send
- Since:
- April 2023
- Source:
Returns:
- The map parameters
- Type
- Object
(static) getOutputFileType() → {Object}
Read DOM fieldset for output format, and return as Object the extension and type to be
used when calling toDataURL() on output canvas with proper parameters.
- Since:
- October 2022
- Source:
Returns:
An object that contains extension and type string for selected output type
- Type
- Object
(static) precisionRound(value, precision) → {Number}
Do a Math.round with a given precision (ie amount of integers after the coma).
Parameters:
| Name | Type | Description |
|---|---|---|
value |
Nunmber | The value to precisely round |
precision |
Number | The number of integers after the coma |
- Since:
- October 2022
- Source:
Returns:
- The rounded value
- Type
- Number
(static) replaceString(element, string, value)
Will replace the element text. Useful for translations.
Parameters:
| Name | Type | Description |
|---|---|---|
element |
Nunmber | The DOM element for text to be replaced |
string |
Number | The string to replace |
value |
Number | The value to apply to the replaced text |
- Since:
- October 2022
- Source:
(static) unblockInterface() → {Promise}
Will remove the modal over the whole app
- Since:
- April 2023
- Source:
Returns:
- A promise resolved when UI is unblocked
- Type
- Promise
(static) updateThemeColorInternal()
Get css color and saves them to local storage
- Since:
- October 2022
- Source: