I’m happy to present a new flexible and powerful map plugin for Bubble!
It’s made of a map engine called Leaflet that coordinates everything and the ability to get maps from different providers, right now they’re Mapbox, Stadia and Openweather (provides an overlay to the maps).
The map engine is free to use, both in price and in license and the map providers have generous free tiers. Choose one or more!
Check them out and make sure you grab an API key from each and also enable your domain with Stadia:
Technically, Leaflet is responsible for pretty much everything, except for the map itself.
“Wha?”
Take a look, this is Leaflet without a map:
It correctly displays a marker, but, where is that? What’s that marker about?
There enters the map!
Oh great, now we know these markers are talking about something in the city of London.
And where did this map came from? This one specifically came from Mapbox.
But it could have come from Stadia or any other future provider.
That’s freedom right in front of you (and also why I considered calling this plugin Freedom Maps).
Just a few concepts before we continue:
- A point is a coordinate, which is a pair of numbers, for example 40.107274, -74.665201 (that’s New Jersey).
- A line is a group of points.
- A polygon is the same, but will paint the inner part.
- A boundary is a rectangular area that encases the line or polygon.
Current implementation is able to:
- Use maps from different sources.
- Overlay weather imagery on any map.
- Draw lines.
- Display markers.
- Customize marker icon, for example inserting one of these instead of the marker.
- Programatically set zoom level.
- Zoom to specific line, route or polygon.
- Pan to a view.
- Provide more information on clicking the marker (popup).
- Draw polygons.
- Draw routes on roads (instead of just straight lines).
- Locate user.
- Continually track user.
- Check if a point is contained in a rectangular area.
- Fits perfectly with Bubble’s responsive settings.
- Is mobile ready.
- This plugin is highly extensible, let me know if you have a specific demand and want to know if it’s possible.
To get coordinates you can use my other plugin Geocodio (US and Canada only), but any API out there that provides you with geocoding services will do good.
Here’s another map tile with a sample red line drawn over it:
And here’s some more visual possibilities:
Now some quick demonstrations:
Now a more detailed explanation on the workflow actions offered by the plugin -
Show map: Creates a map on the page. It works on web and mobile, is responsive and displays two buttons (+ and -) to control zoom with a click (or tap), also the zoom can be controlled by rolling the mouse wheel or doing pinch movements on a touch screen. The map view can be dragged around with a finger or mouse as expected. You can have as many maps as you want on the same screen.
Remove map: Removes a map and any lines and markers on it. Leaves a grey space. It’s the first step to refresh a map, the second is to use “Show map” again. You’ll want to refresh a map whenever you want to remove a marker, a line or display another tile. Oh, and a tile is the image of the map, for example “Satellite” is a tile, “Streets” is another tile, “Dark” is another one.
Set zoom: Zoom level goes from 1 to 20, with 1 being as far as possible from the ground. This action allows you to programmatically control the zoom level by inputting a number.
Pan to: Pans the map view to a specific point.
Add marker: Adds a marker at a point (coordinate) in the map. Optionally you can show a popup with text right above the marker that is opened or closed with a click (or touch) on the marker. You can use custom images instead of the plugin’s marker, but it’s tricky to get them to point correctly and also align with the popup upon it, so I’ve made a few different marker styles so you can mean different things with precision, check them out below.
The custom image option is best used whenever you don’t need to point something of interest with high accuracy, for example display a weather icon upon a city or other region. Now these are the custom markers I’ve made, I pinky swear that they’re not the Power Rangers in disguise:
Draw line: Draws a line between two or more points. You provide a list of latitudes (list of numbers in Bubble language) and in another field a list of longitudes (another list of numbers).
This means you’ll want to structure your database to contain a Coordinate thing with two fields, one being a number Latitude and the other being a number Longitude, then whenever you need to draw a line you can simply use “List of coordinates’ Latitudes” expression in one field and the equivalent for the other field.
In the example I’ve set up I don’t use the database, so you’ll also see how it can be done with custom states.
Here’s an image of a line without markers, on Stadia’s smooth tile.
Zoom to line: Write a name of a line, which you specify at the workflow action that creates it, and this action pans and zooms to that specific line.
Draw route: It’s actually an option within the draw Line action, so whenever I say “line”, remember that it includes route. It begins with the action “Create Stadia route request” in which you’ll input a list of Latitudes and a list of Longitudes, which will be matched to create the coordinates of every point of the route, in the same way you provide those lists to create a Line or Polygon. Then you’ll choose costing model which is how the route is going to be traversed (car, bike or by foot).
This action will publish a text to the state of the Leafy Map X element you’re working with, which you’ll need for the next action.
On the “Draw Line” action check “use encoded shape” and in the field below provide the encoded shape. You can feed it by using the new API call “Get route from Stadia”, and that call will ask for a JSON, that JSON is the text you prepared in the previous action and published to the element “Leafy Map X” state “Stadia route request body”.
Here’s the example, make sure you check it to understand what I mean!
Editor: pdf-conjurer-testbed | Bubble Editor
Here’s a possible visual of an actual route, keep in mind it can be fully customized in width color etc:
In case you’re too lazy to open and try the demo
Draw polygon: Provide lists just like with a line, however this one paints the inside part to make it a shape. There’s no need to specify a last point equivalent to the first one to close the geometric shape. For example, to make a rectangle, specify four points and that’s it. Same example page as above.
Remove element: This allows you to remove a marker, a weather overlay, a line or a polygon without removing the entire map and restarting it. That’s also where the unique names field enters the game. You can give a unique name to each element you put into the map and then refer to them later on. All elements share the same name base, so don’t name a line and a marker with the same name. Same example page as above.
Weather overlay: Allows you to cast an overlay from Openweather upon any other map. Some overlays works best with brighter and less detailed maps, other with darker maps etc. It works like this: You show the map normally with whatever tile you want and with this action you choose whatever overlay you want to.
The first option of tiles shows their tiles that are behind a paid subscription.
Some tiles allow for historical data and forecasting, that’s the “Requested date” field, which allows you to input a time in UNIX format. Soil temperature doesn’t allows forecasting.
To get current, forecast or historical weather maps you just need to input a date:extract with unix under the following rules:
-
Current weather maps. Specify the current date and time and to get Current weather map. The date and time specified in the request will be rounded to the previous 3-hour interval.
-
Forecast weather maps. You can specify any date and time within the next 10 days to get the Forecast weather maps for the specified time. If you do not specify any date and time, you will get Current weather map.
Not available for Soil temperature layers. -
Historical weather maps. If you specify any date and time since 9 February 2018, you will receive Historical weather maps for the selected date and time. If you do not specify any date and time, you will get Current weather map.
Their free tier tiles shows only current data.
Editor: pdf-conjurer-testbed | Bubble Editor
Check if point is contained in rectangle: Quite self explanatory, you run the action and if a point is within an element’s (marker, line or polygon) boundary area, which is a rectangle containing that element, this publishes Yes to the Leafy Map X state called “Is the point contained in the rectangle?” or no if it’s not, there’s more explanation in the action itself, check it out!
Editor: pdf-conjurer-testbed | Bubble Editor
Locate: Locates the user! Locates once and also has the ability to continuously track (a locate is fired every 5 seconds in my testing) and optionally center the view of the map on the user location. Opens up for several use cases, here are some suggestions, but honestly anything can be done.
It publishes several interesting data obtained from the location action to states on the element Leafy Map X, check the example page, I show them in some texts. Also it fires two events, one upon location found and another upon location error. The “Location found” fires once (with new data published to the element states) everytime the user is continuously tracked if that’s activated, so once every 5 seconds in my testing.
To stop the continuous tracking, use the stop locate action.
Editor: pdf-conjurer-testbed | Bubble Editor
Make sure you read the information in the workflow actions too.
And this is it for now!
