Bubble plugin
The Yatmo plugin for Bubble adds three visual elements to the editor: the interactive neighbourhood map of a property, the nearest places with travel times, and the written neighbourhood text. Give them an address or coordinates from a thing in your database. No API call to set up.
Install
- Get a Yatmo licence at yatmo.com and add your Bubble domains to the frontend key’s allowed domains:
*.bubbleapps.ioand your custom domain (keys explained). - In the Bubble editor, Plugins > Add plugins, search Yatmo Neighbourhood Map, install (free). Source and the plugin’s own guide: GitHub.
- On a page, draw a Yatmo Map element, enter the key, the country and the language, and an address. Preview: the map loads in the element.
The three elements
- Yatmo Map: the iframe plugin, sized by the element (map, points of interest, travel times, summary, isochrones, routes).
- Yatmo Places: the nearest places by category with distance and travel time, as headings and lists styled by your page (add CSS in the page header if needed).
- Yatmo Text: the neighbourhood description, key places in bold.
From your database
On a property page, set the element’s Address to Current Page Property's Address (or Latitude and Longitude to the geographic address’s coordinates: Current Page Property's Location:extract latitude). The element re-renders whenever the value changes, so it also works in a repeating group or after a search. The address is located by Yatmo in the selected country; coordinates skip the lookup.
Fields
- Common: Yatmo frontend key, Country, Language, Address, Latitude, Longitude.
- Map: Layout, Zoom, Map style, Accent colour, Marker (pin or circle with its radius), Rounded corners, Isochrones, Routes.
- Places: Categories (education, transport, shopping, tourism), Travel time shown, places per category, heading level.
- Text: Paragraphs, heading level, headings naming the street and the city, the city only, or neither.
Events and states
Each element triggers a loaded event and exposes an address_found state (yes/no): show a message or hide the element in a workflow when Yatmo does not find the address. Without a valid key or domain, the element shows a dashed red notice with the reason.