Trigger action with marker click - Bubble.io x Mapbox tutorial

in this video I'm going to show how you can trigger a workflow action when you click on Amer on your mapbox map so a common use case of this might be that when you click on a marker you want the relevant entry in the repeating group to be highlighted and you'll see here if I click on a marker that's exactly what happens we zoom in on the marker but we also scroll through the relevant entry in the repeating group and highlight it toate this tutorial I'm going to be using map box and more specifically I'm going to be using the beautiful Maps mapbox plugin this is a cran fortech plugin now I've already gone through in another video how to build a store locator like the one we have here I'm going to link to that below so I'm not really going to focus on that I'm really going to focus today purely on how you drive those workflow actions based on marker clicks and what you're going to want to do is once you've loaded your markers which we're doing on page with this add list of markers to mapbox a map you're going to want to first of all figure out how you can set a repeating group entry here to be highlighted when the marker is clicked so you know at the moment if I click on something we're not getting any kind of corresponding highlighting over in our repeating group so what we're going to do is we're going to go to our page and we're just going to click on the page itself and I'm going to set a custom State and the custom state is going to be selected location and the type is going to be location which is a custom data type that I've created and then what we can say is first of all if we go to the group here we can say when this group location is clicked we're currently flying to the location on our map but we can also set the state of an element and the state is going to be the state that we've just created and this value is going to be the current cells location and then what we can do is we can say when that custom state so when let's look for that page when the page is selected location is the current celles loccation we can set the background color to be equal to this we refresh our application and now when we click on a specific entry we're flying to it and we're leaving it highlighted but the next thing we want to do is when we click on another marker we want to flight to that marker and then we also want to highlight the relevant entry here and scroll to it so at the moment nothing's really happening we're just showing the popup but the plugin does have a custom event that we can use and that custom event is called when a mapbox map marker is clicked so every time a marker is clicked this event is going to be triggered so the first thing we're going to do is we are going to set the state of an element we're again going to go to our store locator demo selected location State and we're going to give it the value of do a search for location and we're going to take the first item now if if we just left it here it would simply take the first entry in our database which is of course not what we want so what we want to do is use a few constraints so that bubble knows it's the marker we just clicked on that's the relevant one and what we can do is we can say we only want the location where the latitude is equal to this mapbox map last clicked lat so what's happening is every time we click on a marker I'm setting an exposed State on on the mapbox map element itself that's going to give us this marker's latitude and longitude values we can then access them and use that to let bubble know which location we want to set the custom state for so that's the latitude and then the longitude is going to be equal to this mapbox map last click long so let's try that now hopefully when we click on a marker we're going to see one of the entries here become highlighted let's click on this one and you can see sure enough we're setting the custom State and the result this is becoming highlighted so we are triggering a workflow action based on the marker click that should be one further down but what we can do is a couple of other things first of all we want to fly to the location that we have just highlighted so what we're going to do is we're going to go to element actions flight to location and the location it's going to be the exact same as what we're doing here we're going to search for locations first item so we'll do a search for locations the first item where uh it's first item longitude I should say but the search for locations where the longitude is equal to this map back Maps last click long and then we'll copy that and we'll just change it to Latitude so we'll say search for locations it's going to be latitude is equal to this mapbx Maps last clicked lat and then change this here to lat so let's refresh and this time when we click on a marker we're getting taken to it showing the popup and it's a bit more obvious that we're flying to the specific one and then the last thing I'd like to do is in terms of the the UI supposes I could probably want the entry that I have clicked on to be at the top of the repeating gr list because if for example I was click on one further down then it wouldn't be obvious to the user that that is the one that we' have chosen so what I'm going to do is I'm going to add another condition here and I'm going to say scroll to entry of a repeating group the repeating group is going to be repeating Group location which is this repeating group over here and the entry we're going to scroll to is do a search for location and again we're going to do the exact same thing we did for other two steps we're going to put in our constraints to be equal to Latitude equals this mapbox Maps last clicked uh L and the longitude equals this map box Maps last click long and then we're taking the first item so let's do that again hopefully now the entry that we click on is going to show up at the top of the list here so let's click on that and you can see it's at the top but if we click on another one that's the one that's brought to the top so just a nice thing to add in from a kind of user experience point of view so the last thing I'll say is you don't need to link this just just to you know changes in the repeating group you could also make changes to the thing itself so for example here in my database uh I've added in this field to my location data type called click count like let's say you wanted to count the number of clicks on a specific marker at the moment you'll see my database I have two that are on one uh but what I could do is if I go back to my workflow I could say click here to add an action could make changes to a thing we're going to go do a search for location and again the first item uh and what I actually could do is I could just copy the expression this time rather than doing it out again so we clear that and then we'll paste it and yeah just to make sure those constraints come across and we're just going to say the click count is going to be equal to this location's existing click count but we're going to add one every single time and now hopefully when I click on Amer we're going to add one more to that click count and if I just say one two three this 525 7th Avenue one should have at least three clicks now if I go back to my database and refresh that sort from top to bottom that's the one there you can see that now has three clicks so you can drive any workflow AC you want really um using these expose States and using that custom event so hope that's been useful I'm going to link to the longer tutorial that describes how to build a store locator demo in full below and if you have any questions you can let me know

Channel: Cranford Tech

Views: 135

Keywords: bubble.io tutorial, bubble.io map, bubble.io google maps, bubble.io mapbox, bubble.io map marker

Id: uJtFK60gg1E

Length: 9min 4sec (544 seconds)

Published: Wed Apr 10 2024