Easily add interactive, customizable maps to your Wappler projects. Leaflet Maps is a lightweight, open-source JavaScript library for creating interactive maps on the web. It offers simplicity and versatility, making it easy to integrate dynamic maps with custom markers into your Wappler projects.
Inspector Property Groups
Leaflet Map Properties
| Property |
Type |
Details |
| ID | text | Required in common setups.
Attribute: id |
| Width | css_size | |
| Height | css_size | |
| Tile Provider | droplist | Attribute: tile-provider
Options: OpenStreetMap, OpenStreetMap DE, OpenStreetMap FR, OpenStreetMap HOT, OpenTopoMap, Stadia Alidade Smooth |
| Clustering | droplist | Attribute: enable-clustering
Options: None, Enable |
| Zoom | text | Attribute: zoom |
Navigation & Controls
| Property |
Type |
Details |
| Scroll Wheel | droplist | Attribute: scroll-wheel-zoom
Options: Mouse-based Zoom, Map Center-based Zoom, Do not Zoom |
| Double Click | droplist | Attribute: double-click-zoom
Options: Mouse-based Zoom In, Map Center-based Zoom In, Do not Zoom In |
| Touch Zoom | droplist | Attribute: touch-zoom
Options: Auto, Touch-based Zoom, Map Center-based Zoom, Do not Zoom |
| Zoom Control | boolean | Attribute: zoom-control |
| Position | droplist | Attribute: zoom-control-position
Options: Top Left, Top Right, Bottom Left, Bottom Right |
| Scale Control | boolean | Attribute: scale-control |
Center
| Property |
Type |
Details |
| Address | textarea | Attribute: address |
| Latitude | text | Attribute: latitude |
| Longitude | text | Attribute: longitude |
Markers
| Property |
Type |
Details |
| Dynamic Markers | boolean | Attribute: markers |
Actions
Set view
Leaflet Map Set view
| Configuration group |
Controls |
| Set view Properties | Latitude, Longitude, Zoom |
Set zoom
Leaflet Map Set zoom
| Configuration group |
Controls |
| Set zoom Properties | Zoom |
Zoom in
Leaflet Map Zoom in, using the Zoom Delta
| Configuration group |
Controls |
| Zoom in Properties | Action configuration group |
Zoom out
Leaflet Map Zoom out, using the Zoom Delta
| Configuration group |
Controls |
| Zoom out Properties | Action configuration group |
Fit bounds
Leaflet Map Fit bounds
| Configuration group |
Controls |
| Fit bounds Properties | Bounds |
Dynamic Attributes
Prefer Canvas
| Attribute property |
Type |
Details |
| Value: | text | Choose dynamic data binding. |
Layer Control
| Attribute property |
Type |
Details |
| Value: | text | Choose dynamic data binding. |
Zoom Control
| Attribute property |
Type |
Details |
| Value: | text | Choose dynamic data binding. |
Zoom Control Position
| Attribute property |
Type |
Details |
| Value: | text | Choose dynamic data binding. |
Scale Control
| Attribute property |
Type |
Details |
| Value: | text | Choose dynamic data binding. |
Dynamic Events
Zoomstart
| Event option |
Type |
Details |
| Action: | text | Choose the action to execute. |
Zoom
| Event option |
Type |
Details |
| Action: | text | Choose the action to execute. |
Zoomend
| Event option |
Type |
Details |
| Action: | text | Choose the action to execute. |
Movestart
| Event option |
Type |
Details |
| Action: | text | Choose the action to execute. |
Move
| Event option |
Type |
Details |
| Action: | text | Choose the action to execute. |
