Forum Documentation Showcase Pricing Learn more

Leafy Maps 🌿 (new free plugin)

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:

Mapbox
Stadia
Openweather

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:

Demo one

Demo two

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: https://bubble.io/page?type=page&name=polygon_and_route&id=pdf-conjurer-testbed&test_plugin=1562697922620x934462587697889300_current&tab=tabs-2

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:

  1. 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.

  2. 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.

  3. 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: https://bubble.io/page?type=page&name=open_weather&id=pdf-conjurer-testbed&test_plugin=1562697922620x934462587697889300_current&tab=tabs-2

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: https://bubble.io/page?type=page&name=contains&id=pdf-conjurer-testbed&test_plugin=1562697922620x934462587697889300_current&tab=tabs-2

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: https://bubble.io/page?type=page&name=locate&id=pdf-conjurer-testbed&test_plugin=1562697922620x934462587697889300_current&tab=tabs-2

Make sure you read the information in the workflow actions too.

Here’s the plugin page.

And this is it for now!

23 Likes

Nice! Is there a way to add proximity - i.e. show locations within a certain radius of a point?

2 Likes

This looks VERY interesting. Nice job, @vini_brito! Love the detail in this post. ALL THE THUMBS!!!

3 Likes

This is great - top work! @vini_brito and clearly documented.

You mentioned about extensibility with this plugin, whats the possibility of introducing map clusters e.g. https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html

1 Like

Interested in this as well.

Great job on the plugin! Nice to have options outside of the big one.

1 Like

@shot and @eli

Yes! Took a look at the clustering addon and unless it got deprecated by its maintainers (or lack of), it’s completely possible. However I don’t think it’s deprecated since it says nothing about that and seems to be in Leaflet’s main account.

And proximity is already doable through the feature “is this point contained within rectangle X?”

2 Likes

It shows blank maps on internet explorer. I guess most things don’t really work on here but I’m trying to view it from my office computer. I guess I have to wait till I get home to take a look.

What version of IE? It’s supposed to be universal.
Not if you’re using IE6 though :joy:

I am using IE 11. Hmm, I wonder why it doesn’t work.

This is all I see…

Weird, can you tell me if something gets logged to the console?

Hi, Vini.
Is it posible to create an interactive map with leafy? I want my user to click a marker and listen to an audio. Can I do that?

Thanks!

1 Like

@glocalaudioguide
Not at this moment, but with more work on the plugin: Yes it is! There’s a whole world of interactivity and also about data visutalization that I didn’t implemented, but it’s there in a latent form.

For example, what can be implemented is an event that is fired when the marker is clicked, then you do whatever Bubble workflow you want on that event.

1 Like

Hmm, that seems to solve my problem. How do I learn how to do that on leaf maps?!

Well done sir, please I want to know if it’s possible to add a geojson file

2 Likes

Wow, I love this.

1 Like

@horlartom2013
That’s not currently implemented, but it’s possible to be implemented.

@glocalaudioguide
Well, as I said, it has to be coded in, still not implemented. If you’re interested in contributing code to the plugin just send me a private message!

This really sound exciting as I work in the UK charitable sector and we are looking to use clustering as a way to target poverty and hotspot areas our work can benefit those in most need. Would you need to do much more work to get clustering working ? or is it already in there and requires some hard work from my side?

@it1
It requires more work on my side. However, you can do a pseudo-clustering already with custom icons and Bubble’s logic if it’s urgent.

This is really nice, quick question and maybe I missed something but is it possible to add a list of markers after the map has loaded?