Openstreet Map - Bubble Plugin

Demo App: Your Bubble app (bubbleapps.io)

‍

Editor: Noxcod-plugins | Bubble Editor

‍

A simple version of leaflet map with marker support, custom icon support, and some other capabilities.

‍

This plugin uses maptiler.com as a tiler provider.

‍

Features:

1. Markers with custom icons.
2. Select address, and icon properties for markers.
3. Set default marker icon.
4. Set initial center & center icon & max, min zoom levels. Locate to the current location, change the center of the map, and zoom level dynamically by the workflow actions.
5. Automatically retrieve the current zoom level and a map center.
6. Trigger workflows on any click of any marker. Also use the corresponding data in your workflow

‍

How to use

1. Enter your own Google Geocode API Key in your bubble app setting.
2. Please visit the link here for more information.
3. Please the “Leaflet Map” element on your app, and set up the properties.

‍

Properties

• Map Center - The initial center of the map.
• Center Icon - The center icon of the initial map center.
• Initial Zoom - Choose the initial Zoom level
• Max Zoom - The maximum zoom level up to which this layer will be displayed
• Min Zoom - The minimum zoom level down to which this layer will be displayed
• Marker Type - Choose the type of data source.
• Data source - Choose the data source of markers.
• Address Field - Choose the field for each marker’s position.
• Icon Field - Choose the field for the custom icon of each marker.
• Default Icon - Choose the default icon of each marker.

‍

Exposed states

• Map ID - Unique ID of the map element.
• Selected Marker - The data assigned to a chosen marker.
• Current Zoom - The current zoom level of the map.
• Current Center - The current map center.

‍

Actions

• Locate - Pan to the current location.
• Center to address - Pan to the specified address.
• Set Zoom level - Set the zoom level of the map.

‍

Events

• Marker Clicked - Fired when a marker is clicked.
• Zoom Ended - Fired when the map zoom changed, after any animations.
• Move Ended  - Fired when the center of the map stops changing (e.g. user stopped dragging the map or after non-centered zoom).
• Map loaded - Fired when the map is initialized (when its center and zoom are set for the first time).