0:00:00
What’s up Inner Circle? Welcome back to another premium training. Today we are doing an advanced development tutorial. We are going to create something that is useful for any multi-location website, any multi-service area website, and there’s probably some other use cases in there as well. We’re going to be creating a dynamic map for locations. It’s going to have a list of locations. It’s going to have dynamic markers. All of this needs to be query loop compatible. In fact, let me share my screen and let’s show you an example of what I’m talking about.
0:00:37
So here is the world map. Now, this could be any map. It could be a map of the US, a map of Europe, it could be a map of the UK specifically, it could be a map of the state of Georgia, and you can use cities for this. You can do states, you can do the entire world as you see here. What I’m going to show you is how to build this from scratch and you’re not going to be limited to like just a world map.
0:01:03
Now, a couple of things, we need this to be accessible or at least as accessible as possible, which means keyboard navigating the stuff in the list. I put this list in a carousel and we’re going to be using the frames carousel to do this. Now if you don’t use frames you can use the bricks carousel to do this. You can use the bricks extras carousel. You can use oxy extras. It doesn’t really matter what builder you’re in. A lot of the techniques that we’re going to cover in this tutorial are going to be applicable across many different builders. You just may have to swap one component out for another. We are going to end up writing a little bit of JavaScript and you see the markers here have little hover effects and we got to talk about how they’re positioned and how to make all this query loop compatible. As you can see this is going to be a fairly advanced tutorial so we need to get right to it. We need to get to work and we need to start making some progress. Now as you’re gonna see I tend to approach things like this with a let’s just make one step happen then the next step happen then the next step happen even if some of that progress we then have to undo. Why? Because we got to make progress and then we’ll figure out how to tackle the next thing that needs to happen. And so for example we might just position these markers manually and then undo some of that in order to figure out how to then make them position dynamically, right?
0:02:35
So and this is the process that I recommend you go through. A lot of times developers get stuck because they think, I don’t know how to make that thing dynamic, so they don’t even do any of the work at all. They don’t even make any progress. You’ve got to just do what you can do and then figure out the answer to the next question. And so that’s exactly the process that I’m going to lead you through. All right, so I’ve got a completely blank slate. And the first thing that we need to do is just get this little heading section in. Can we get a box on the page for our container for all of this? Let’s go ahead and accomplish that.
0:03:08
So I’m going to add a section. I’m going to duplicate this inner container right here. And as you can see, I appear to be getting, let’s go to section. We have a, yeah, we have a row gap set by default in this particular install. I’m going to go ahead and take that away. And I will use my container gap contextual utility class to just make a gap between those two containers.
0:03:34
One container is for this heading right here. The other container is for the big the main map and locations list container and all of that. Okay so this needs to be I’m just going to use grid to put a heading and text over here and then a button on the right hand side and so I’m going to use I won’t I’ll try not to use utility classes and all of that as much as possible. So what I would do is this is an intro and this is the map we’re gonna be using, by the way. So you’re gonna see everything. We’re gonna take this thing into Illustrator and we’re gonna get rid of all this nonsense that’s going on here. But anyway, what we wanna do is create almost like a global component out of this introduction because it’s an intro that you could use in a lot of different sections.
0:04:19
And so you kind of wanna have global control over it. So I’m just gonna create a class called section intro. And that class is going to become a two column grid. Okay, so I’m going to display this as grid min-max 0 1 fr 0 1 fr and then copy that duplicate it and this is going to be 2 fr except I’m dyslexic and I need to flip flip those around. So 2 fr for the first one 1 fr for the second one. Let’s go ahead and add our blocks in and now you’re going to see this is our basic grid structure right here a wide left column a narrow right column. All right, this is going to be content and This is going to be the CTA wrapper. Okay, so content is going to get a heading It’s going to get text and then over here. We’re gonna get a button Perfect. Oh, I meant over there. We’re gonna get our button. I don’t want our button to be in the grid Oh gosh, let’s drag that in there okay good now I need to give everything a BIM class so this is section heading section intro is what I called it double underscore content wrapper and then over here we want section intro double underscore CTA wrapper on our CTA wrapper we can center center good I Good, I actually don’t need to center that.
0:05:41
I can just come over here and all of that is good. Let’s grab our main intro. I’m gonna call this section intro. I like to label everything up accurately so it matches all the classes. You can really see what you’re working with here. So on our section intro, I can just align all items to the center on that main parent. Okay, all right, I’ve pretty much got this down. This is gonna be called to action.
0:06:07
I do have a button class that I’m gonna use to style up this button. We’ll do button action. All right, and we’re gonna go ahead and hit save. Now, on content wrapper, I want a variable of content gap. You’re gonna need to make all these own variables and if you haven’t already made them, I show how to do all of this in page building 101. I don’t want to do a lot of the basics because this is advanced enough and I assume you just want to get to the more advanced stuff. So I’m going to be whipping some of this up as quickly as possible. Okay, let’s view on the front end exactly what we have so far. And as you can see, we just are going to slap in some dummy content here. Perfect. This is going to be the section heading. This needs to be an H2 and we are going to put a we can actually put a width on this container even though it’s in a grid so I can come down here and say a max width I can I can do like a character count. Let’s do like 20 characters. That’s clearly not big enough 40 50. Let’s do 50 60 60 works. Okay so a max width of 60 characters put 100 width on there by default, and now we more or less get exactly what we have in our example.
0:07:19
Now what I want to do is down here. I want to create this map container and we’re going to call this our locations. Let’s let’s call this will just call this main locations and I want to make this a grid so I’m going to start out by doing a small left column and a large right column. Basically the opposite of what we did up here. So I’m going to go down to display of grid. We’re going to go min-max and we’re going to do a 1FR, excuse me, 1 min-max, 0, 1FR.
0:07:56
Then I was having a brain fart there for a second. Then a min-max of 0, 2FR. We’re just going to see what kind of ratio that gives us. Let’s put two blocks in here. It’s fairly, fairly close. I also want to put a gap in here. And we’ll just do 3M on our gap for right now. You can use variables, of course, if you have variables all created, you can use variables. I’m trying to make this as raw as possible, especially on this part, because this is really what you came for. Alright and then on this main locations I want to give it a background color and I’m just going to kind of do what we’ve done with our wireframe which is you know the colors and all of that it’s it’s really up to you what you want to do there. I’m just trying to get the general structure down. I also want to go to my border radius on here and we’re going to say a 1M border radius. It’s actually hmm let’s do 0.5M. I don’t want it too rounded. And then if you look at this one, it looks like it has some padding all up in the inside. So content is not going to touch the edges of our box. Let’s go to padding and do 2M of padding on all sides. And that looks pretty good. I think we might be able to get away with even 3M. I think 3M looks pretty good. And so now let’s go see what we have. So we have our intro and we have a giant box for stuff. And it’s a grid so we can put stuff on the left and we can put stuff on the right. Let’s get our map in there. Let’s get our map in there.
0:09:31
First let me get some BEM classes on here. So we have main locations and this locations Location list Or we’ll say locations. Yeah, let’s do location lists and then over here. Let’s do our map wrapper So locations main locations map wrapper That seems that seems good. Okay, we need to get our map in here. So what I need to do I’m in Envato elements, which I highly recommend. It’s very very good for stock photos, stock illustrations, all of that good stuff. I’m gonna go ahead and download this and I’m gonna say that we’re licensing this to our frames project. I’m gonna go ahead and open this and see what we get. So I have an EPS file and a JPEG file.
0:10:15
We clearly don’t want the JPEG. I’m gonna open the EPS in Illustrator and I’m gonna bring this in right here. So here is Adobe Illustrator and this is the file that we were given and oh my do we have some work to do here. Okay so and in all these files that you download you know you’re gonna find that they they’re very different like ways of assembling this some stuff is grouped some stuff is not grouped some stuff is blended and oh my god some of these things are an absolute disaster. I’m just gonna highlight this and delete and you see. So for some reason everything was grouped except these tiny islands. So what I’m going to do is ungroup all of this, right click and ungroup, and then I’m going to get rid of these vertical lines. We definitely don’t want those. So I’m just selecting them and hitting delete. We don’t want these paths right here. We don’t want any, we don’t want that background either. We don’t want any of this, any of this, any of this.
0:11:15
We don’t want a sailboat. Okay, we don’t want any of, we don’t want Antarctica. It doesn’t need to be in there. How much of this can I, oh, see that I can’t really select. Why, why can’t I select it? Let’s ungroup all that. Okay, deleting Antarctica, deleting all this nonsense down here. Let’s delete all of these characters. Getting rid of all of the, we don’t need the labels either.
0:11:38
We want to get to a nice clean map. I don’t know of any better way to do this than just selecting them and deleting. I am not an illustrator expert by any means, so I’m just going to keep rocking and rolling like this. It’s getting the job done. Might not be the most efficient way, efficient way to do it, but it’s working. All right, delete that. Oh, there’s another sailboat we don’t need. We don’t need a shark fin. Okay, that’s not helping either. Let’s ungroup all of this Can I select the oh, there you go. I was able to select the outlines. I Don’t think we have outlines on our regular map. Let me let me go check Our nope, no outlines on our regular map. All right Let’s get back into Illustrator. Let’s ungroup all of this and let’s see if we can select those lines and get rid of them.
0:12:29
We can get rid of those, get rid of those, those, those, get rid of this, get rid of the Australia label. We don’t need these outlines in here. Okay, we’re just trying to get to a nice clean map structure. I think we’ve made our way there. And actually, all of that is still grouped together, which is good. I need to group that little island group down there. And now I have one object that I can export. So I’m going to go right-click, collect for export as single asset. We’re going to call this our map. Now keep in mind, we’re doing a world map. You can use the exact same process, the exact same technique for any map for just this isolated portion right here you could find another map of a single US state or a single country and use that and use all these same techniques I’m just going to show you with a world map though. Alright so I’m going to export this as an SVG and I’m going to export this to desktop and we’re going to call this map project. Okay so I’m gonna choose and then I’m going to hop back into Chrome Okay, so let’s go ahead and we’re gonna import this image But we’re gonna do something special now depending on the builder that you happen to be in is gonna determine How you’re going to do this you can do this with SVG code. I’m in bricks and there’s kind of a shortcut Where we just do an SVG like this or you can actually do an icon.
0:14:04
So I’m going to, I’m going to select file. If this doesn’t work, I’m going to try doing the icon. So I’m going to grab our main map project right here, SVG and drag that in and let’s just insert that and see what happens. Okay, perfect. Notice on this, there’s controls for fill and what I want to do, aha, see, I can fill this with any color that I want, which is when you are going to style this up, this is going to be absolutely critical and fantastic that you can make these maps any color. This is really what you want. I don’t know if there’s a stroke on here.
0:14:41
There is a stroke. You can even stroke it. See, like this is fantastic. Gives you a lot of possibilities. Okay, I’m going to get rid of that fill. And I’m going to say that this is our map. So it’s our main locations and actually we want to treat this almost as its own unique component because we want to be able to use this anywhere not just in a main locations wrapper. So let’s do this. Let’s call this a, let’s just call this a map. That’s it. That’s going to be our map. That’s going to be our map component for this website.
0:15:16
And for here, main locations, locations list, I’m just gonna change this to locations list. It doesn’t need to be attached to this main locations wrapper. It just needs to be a locations list. Location list. Should I make it plural or singular? I think I should make it singular. Let’s keep it singular. Okay, so guys, we are, let’s go ahead and now that we have our map Let’s go ahead and give it a fill and We can go to shade family, and then let’s just do shade light shade medium Hey, let’s do shade medium that way it’s gonna be a little bit different looking than that map right there We can get a little bit of a different look okay. Oh I’m liking this I’m liking this all right. We are making good progress. Is it mobile responsive?
0:16:05
Yes. I am seeing a little bit. Okay, no, that’s fine. That’s fine. That is mobile responsive. Okay. Everything is coming along. I think what we should tackle next is the cards. Those are going to be fairly easy. Actually, this is looking a little dark to me now. I’m going to change this. Let’s go ahead and keep it light. Okay, I think we should handle the list of cards now. So we have our location list. I’m gonna go ahead and drop a block in here which is going to become our card. I’m gonna call this locations list. I’m gonna call this location card. No, no this is not locations list. This is main locations. This is locations list and this is location card. All right, perfect. This is our map wrapper. And you know what?
0:16:57
I’m just gonna edit this real quick and call this map wrapper. And then this is our map. So let’s say map, if I could type, that would be fantastic. That’s our map. So I’ve got our map wrapper and our map. All right, fantastic. Now, this is going to be our location card, just like that.
0:17:18
And I want to see what this needs to have. So a heading, text, and a phone number. It’s going to need a wrapper for all that content and then a wrapper for our media, what we’re going to call our media. So I’m going to add two blocks in here. This is going to be our content wrapper. So location card content wrapper. This is going to be our location card, double underscore media wrapper.
0:17:46
Perfect. Just like that. I need to drop some media in here. So let’s do an image. This is good. We’re just going to choose. What are we going to hear? Here we go. This looks like a location. Good, there’s our location right there. So I’m gonna say location card double underscore media. And I’m gonna make sure that this is 100% width, perfect.
0:18:15
And then in our content wrapper, we need our heading, we need our text, we need our phone number, that’s just gonna be another text item. All right, this is gonna be our address right here. And so what I want to do is, let’s just put in an address. So let’s say 123 Atlanta Street. And then we’re going to say Atlanta, Georgia. And 12345. Perfect. Okay.
0:18:44
And then this is going to be our phone number. So this is going to be 123-456-7890. There you go. four five six seven eight nine zero There you go and We’re gonna link this so there’s gonna be an external URL to a tell of one two three four five six seven eight nine zero So now that that is actually a link that’s good This is gonna be an h3. Let’s get BEM classes on all these things so location card heading This is going to be location card address Awesome and then this is going to be location card phone. Perfect. And then this needs an actual address tag on it, which you can see also as default styling. So we’re going to go over to typography and we’re going to do normal for this. Phone is good as a, we can just put in a P there.
0:19:35
And then our heading is a heading, which is fantastic. Let’s go ahead and row gap these. So 0.5 M should do the trick on that. Let’s go to our location card parent wrapper. We’re going to use grid for this, and we are going to say that this is a min-max 2, 0, 2FR and then a min-max 0, 1FR, just like that and then we see here that our image is not the full height of this container so what i’m going to do is go in and flex grow one on this uh let’s find our flex grow of one there you go we need to also make sure that this is a figure element with an object fit of cover no caption. Okay. No caption, just like that. And now if we just make the whole location card have a background color of white, this would be exactly what we want.
0:20:33
And then we see the distinction between the card and the actual background that it’s on. But of course it needs a little bit of padding. Now the whole card doesn’t need padding because if the whole card has padding, it’s going to look something like this where we have padding around the image and I don’t want that. And the reason I created a wrapper for my content is so I can pad the content separately from the media. So I’m going to do 1M on our card padding there and I think we’re looking pretty good. Now I want this to be the size of my h4 just with that variable in the font size field I want all the other content to be small so I’m gonna do my text s this is looking good what I want to do is put a border radius on this card so location card border border radius let’s go 0.5 M on that you should definitely tokenize all of these things right have a radius token that you use on all of your stuff to make your radius consistent.
0:21:42
Have spacing tokens for all of this rather than using, you know, Ms. I’m gonna do 1.5M here. Okay, this is looking really good. Notice the border radius is only affecting this side of the card and not where the image is. That’s because the image is overflowing the radius. And so what we need to do is come to Overflow and set that to hidden on our entire card, but I’m not on my card. So that’s not gonna work Let’s actually select the card Overflow is hidden and now you see we have rounded corners. Let’s go and check how we’re looking on the front end This is coming along my friends. Alright, so now that we have our card created. I want to put it in a carousel Like I said, we’re gonna use the frames carousel for this because or really the frame slider it can be either or because it’s it’s the most accessible it has the most features in my opinion it’s got a good UX and there’s a lot of people who also want to see this in action so inside of our locations list right here I’m going to add a note that is the normal brick slider I do not want to add that let’s command Z that this is the frame slider right here.
0:22:50
I can actually delete these slides out of here. And I want to take a locations card. This is gonna say content wrapper. This is gonna say media wrapper. Let’s cross our Ts and dot our Is while we’re here. This is phone, this is address, this is heading. That’s all good. Okay, so I’m taking my location card right here and I’m just gonna drag it into the slider. And now that card is in the slider as easy as that now I want to come over here, and I want to say locations Slider for controls. I want to get rid of the controls. I’m going to use a separate controls element for this That’s what’s going to give us these arrows underneath down here. Okay. Let’s get out of the ACSs dashboard. We don’t need that anymore Accessibility I want this to be an unordered list, which is absolutely correct.
0:23:39
This is one of the only sliders you can actually control and create a proper list structure with. All of this is good as default. Okay, so under my location slider, I want my layout to be vertical. And then notice that it’s automatically going to expand. There’s a default slides height of 50 VH in here. This is actually a slider height. This is a slight little bug in the label that we’re gonna be fixing in the next version.
0:24:07
But I wanna set a fixed height on my slider. This is how it doesn’t overflow, right? I’m gonna have a list of locations. I need a fixed height so that there can be a scrolling effect within that box, within that container. So I’m gonna just say like 600 pixels. And that was a pretty good guess. Let’s say 300, that’s there, 400, 500, 600. There you go. 600 is a little big actually.
0:24:32
So let’s do 550. Okay, just like that, that works. And now I don’t want the slide, I don’t want the visible slide count to be just one slide. I want it to be three slides. And now I get a card size that looks about like that. I’m going to come into the content wrapper and align everything to the center and this is really, really, really good.
0:24:56
OK, now I think I just need two more cards in there, so let’s do card card. Oh, and then I’m seeing a problem. There’s no gap, so I’m going to go to my slider and notice there’s a gap between slides field, so I’m going to go ahead and put one M as our gap. There we go, and now we’ve got three nice cards in there. Let’s go ahead and refresh.
0:25:17
Those are three cards in a slider. Now I can move on but there’s nothing else to see. So for now what I need to do, and remember all this is going to be driven by a query loop eventually, but like I said let’s get the manual thing working first before we go crazy and make everything dynamic. All right so this is gonna be one, two, three, heading, this is gonna be four, then the other ones don’t really matter. I just need to be able to see if I can drag this around. Yes, look at all of my cards. Look how easy this is, it’s so easy. Use the right tools, things are easy in life, all right?
0:25:54
You could, again, though, you could do this with the bricks slider, it’s not gonna be as good, okay, but you can do this with the Bricks slider. You can do this in Oxi, Extras. You can do this with Bricks Extras. You should be fine, right? There’s a bunch of different tools that can help you with this. All right, what I need now is the slider controls.
0:26:13
So inside of my locations list, right under my slider, I’m going to add the slider controls element. And this, did I actually add it? Let’s minimize, minimize. I wanna make sure I didn’t hit the button. Yeah, I did. I’d add it in the wrong place. I want to add it below my slider. So now you see I have slider controls. Let’s go ahead and hit save there. I want to center these controls, which I honestly, for a vertical slider, I don’t know if that’s an option for a vertical slider. Let’s go to layout, display of flex, and maybe we can. Oh look at that we can with the normal bricks controls. Okay this is good, this is good, this is good, I like this. All right I used 0.5 m between those cards or did I use 1 m? This is why you should tokenize things.
0:27:07
I use 1 m gap between slides. So in my locations list right here I also need a row gap of one in and that’s going to create the exact same gap that is between my cards between my controls. Okay, let’s save and then let’s go into our slider controls, go to arrows and for the previous arrow we need an up arrow. We’re going to use that and then for our next arrow we’re going to use a down arrow, which is this one right there. Perfect. That’s all looking really good. I need to call these location slider controls. Then icon size 24, 32, 28.
0:27:53
Let’s go with 28. I don’t think I need to do anything else with these. Let’s go ahead and hit save and just see what we’ve got on the front end. All right, perfect. Do we have equal spacing above and below this? Is there anything else causing any spacing issues? No, we’re good to go there. You did see there that our grid is not responsive yet. We’re going to take care of that. We also need to get these controls working. They’re not linked to anything, right? So these controls need to know which slider to talk to. And so what we’re going to do is give this slider a name, okay?
0:28:31
What we’re going to do for controls is we’re going to toggle on sync with other sliders. And then it says slider name to sync sliders. We’re going to call this our location slider. And then I’m going to come down here to the slider controls and say sync with location slider. All right, so I have location slider here and I have location slider here. Let’s go ahead and see if they’re linked up. Hey, hey, hey, look at that. Fairly simple, fairly easy. We’re coming along very, very, very quick. Now we haven’t gotten to our deep doo-doo yet, okay?
0:29:09
We got a lot of deep doo-doo coming you know with JavaScript and markers and a bunch of other stuff so data attributes they’re just that we’re doing the easy stuff right now okay how is my map let’s let’s go ahead and grab this whole main locations parent make sure all this is aligned to the center so this is always in perfect Center alignment with the list and the map stuff going on but I think this is good we might even be able to get away with changing the height on our slider. So let’s go back to layout, slides height, let’s do 500 pixels. I think that’s actually even better. All right, 500 pixels seems to be the sweet spot. Okay, that is really good. Let’s try to get a marker on the page. Let’s try to get a marker on the page. Okay, so what we need is under our map, here’s our map wrapper, so inside of our map wrapper is where we’re gonna put our markers. So I am going to take our, and these are gonna be absolutely positioned, so the first thing I’m gonna do is our map wrapper layout position relative. That’s gonna be the catch, the net for our markers that are positioned absolute, okay?
0:30:26
Let’s go ahead and add a marker. So I’m gonna add a div, and we’re gonna call this marker. Now there’s gonna be more things than just this little div, okay? But this is gonna be like a wrapper for things, but it’s effectively gonna be our marker because this is gonna control where all that stuff goes. All right, so what I need is our map double underscore marker that’s gonna be our class for this, map marker. Excellent. What else do I need in here? Do I need an icon or is the div itself going to effectively be our icon? I definitely need a label in here. All right, so we’re going to go text and this is going to be our label. And so we’re going to call this Atlanta, Georgia. Perfect. Okay now what I’m thinking is should we use a pseudo element? Hmm.
0:31:28
Oh you know what? We maybe shouldn’t even have a label. Maybe we should just use a pseudo element attached to the marker. I don’t know if we need anything in the marker to tell you the truth. Let’s give this a background color so our map marker let’s do it as our as our action color like this okay all right I’m down with that let’s go to border radius we need to make it a circle so let’s make it just 50% border radius on all sides that’s gonna make it a circle. Let’s go make it a specific width and a specific height. Like, how about five rem? I don’t even know what values to use yet. Five rem.
0:32:13
And there’s a problem that this is an empty div and empty divs in page builders are typically a minimum width by default. So we actually need to set this minimum width to zero. And I actually don’t know if we can target it like this. We’re gonna have to right click, right click, I gotta be able to inspect this. Okay, get out of mobile mode. Where are we in this thing? Okay, inside of this section, let me find my map marker.
0:32:41
Div, div, okay, it’s in this div right here. Down here, down here, there it is, right there. Yep, see, BricksDragableEmpty has a minHeight and a minWidth of 90 pixels. So what I need to do is in my map wrapper right here, I’m just gonna go into CSS, and I’m gonna target that. And I’m gonna say the minWidth is zero and the minHeight is zero. And now it’s gonna effectively be exactly what I wanted. Okay, which is still way too big for a marker. So I’m going to go to layout and we’re going to do two rim and two rim and I’m actually going to probably have to make these markers. Does that have a border on it? Border, let’s go to border, border. How about none? Let’s just make sure that that does not have a marker, a border.
0:33:36
I still feel like it has a little border on it. Does it have a border on the front end? No, on the front end it does not. In the builder it kind of looks like it does. All right, whatever, we’re not gonna worry about that right now. All right, let’s think about this. I wanna make it pulse, but I also want it to have a little bit of a, maybe it should have a border. What if it had a little light border, like a very light border?
0:34:01
So let’s click on this, let’s go to border, let’s go to two pixels, solid, make that all sides, two, two, two, two, two, and then our color is gonna be action, but it’s gonna be a shade, like action medium, action light, let’s do action light, or actually, no, no, no, no, let’s do a transparency, maybe dark trans 20 10 oh that may not work with border let’s do this that’s not gonna look the way that I thought it was gonna look yeah that’s gonna be over top of the other color that’s not what we want I think we’re gonna have to use a pseudo element to position that okay let’s do that. Let’s quickly do a pseudo element for this. So I’m gonna go take away the border. I want the border to be none. Border to be none. Okay.
0:35:00
And then I’m gonna go to CSS. We’re gonna do, I’ll zoom in for you here, we are going to do root before. All right. Content is gonna be blank Width oh, oh, what’s the width going to be? Calc of a hundred percent plus 1m I Don’t know yet height is going to be the same Background color is going to be red display is going to be flex Okay is going to be flex. Okay. So clearly one, now this needs like five pixels. Okay. All right. Display a flex position of absolute. And then as you see, it’s absolutely gigantic. So we’re going to come up here and we need to attach this pseudo element to our actual map marker. So we’re going to do a position of relative. There we go. So now it’s attached to the map marker. Alright, now what we need to do is we need to go a z-index of minus one to put it behind our marker. And now it disappeared, which means we have a layering issue. It’s probably going behind the background of this right here. So I actually need to select this main locations and do a root isolation of isolate. There it is. Now I just have to position it properly. Okay so I need to go top 50 percent left 50 percent this is what’s going to center it, but in absolute positioning, top and left don’t actually center even at 50%.
0:36:56
You have to transform, translate them back to where they need to go. And so I’m gonna do minus 50%, minus 50%, and that’s gonna perfectly center it with my dot. And then I need to put the same border radius of 50% on here and my friends, we have a red circle behind our marker, but why did our, oh, our marker, because I got rid of the border. I hit that thing to clear the border, and it cleared the border radius too.
0:37:22
So let’s just put the border radius back. And now my friends, we have a red thing, a red circle that’s behind our marker, and now instead of red, we just need to change its color. So I always make it red so it’s obvious, right? And then I go back and adjust the color. So instead of red we want Action dark trans 10 or even 20. I’m not even really sure yet There we go. So what makes it like a 3d kind of effect almost like a button. I think that’s still too dark We’re gonna go with 10 All right. And actually I don’t want our action dark trans 10. I want action trans 10 I don’t know what I was thinking with the dark, but that’s actually now that it’s not dark. It’s not dark enough There we go now you can see it. That’s really really really good I don’t know if you guys can see it with the resolution, but it’s giving me the effect that I wanted Now what we need to do is we need to go to map marker and We need to position this so right now. It’s position relative That’s not going to work. We need a position absolute now now jump to the top now I put it relative to contain this before but remember absolutely positioned elements, which this is will attach themselves to parents who are also absolutely positioned.
0:38:53
It’s just something that’s not statically positioned will catch and contain. So this works just fine. So now what I need to do is give it coordinates. So I’m going to say top and then we’re also going to change these to logical properties in just a second. So top let’s just say 24 percent. All right that’s clearly not enough, 34%. And we’re almost there, 38%. 30, 42%. 40%. Okay, now let’s come in from the left, 18%. Oh, I was so close, 16%. That’s good, but this marker is way too big.
0:39:38
Marker, marker, marker, where are you? Layout, this is why I don’t like doing this in all these panels. I’m getting rid of this width and height. We’re gonna come down here to CSS and we’re just gonna put it right in here. So width is one rim, height is one rim. Okay, save. Hey, we’re almost there. That’s actually a little too small. 1.5 rem, 1.5 rem, save, refresh.
0:39:59
That’s about, that’s about right. That’s about right. Okay. I don’t like the fact that this is the action color right now. We need to, because it’s kind of blending with that dark gray. It’s not a good contrast. Let’s do action ultra dark or even action dark. Refresh, there we go. Now we can see that much, much, much better. Now this can actually be action dark trans 10. See how easy it is when you have these tokens and shades and opacities and all of this stuff available to you?
0:40:38
I can’t see the action dark trans 10 right now, or trans 20. Let’s put this as red and see if it disappeared. I have a sneaking suspicion that this disappeared. It did. I cannot freaking see it anymore. So what happened to our root before? Oh, when it’s relative, our pseudo element is there. And when it’s absolute, it’s not. But that shouldn’t be the case. All right we’ll have to revisit this. That should still attach to itself even with position absolute. We’re not gonna get hung up on that though.
0:41:25
Don’t you can’t let this stuff trip you up. You just got to keep marching forward. That is something we can fix later okay. All right so I’ve got a marker like in position. This is really really really good. That’s still not on Atlanta really. But you can use decimals here. You can use like 40.5, 16.5. Uh oh actually it doesn’t need to go over there. It just needs to come down more. So 41.5. Let’s see where we’re at. That’s more like Atlanta. Now it can come over 16.25 even. You can really dial this in. Great, there we, that’s Atlanta right there. Now what we need is, can we hover and see a label of some sort?
0:42:15
For our label, what we’re going to do, and this is really going to help with query loop compatibility also, we’re going to go over and start using data attributes. On my marker, I am going to use a data attribute of data marker label. Okay, and this is gonna be Atlanta, Georgia. Perfect, save, refresh. Let’s go inspect this and make sure that we can see a data attribute on there. And we can, data marker label equals Atlanta, Georgia right there.
0:42:45
Okay, so now what we’re gonna do is display that label on the hover of the marker. So we’re going to do this with an after pseudo element. Our content is going to be attribute data marker label. Perfect. Do I have to put this in quotes? I always struggle with what we’ll see in just a minute, okay? Position this absolute as well, which I’m just gonna do actually, position relative first, just to make sure I can see it. Display of flex, width of max content. This is a trick you use with tooltips and such so that it can actually dynamically be the width of the content. I shouldn’t need that though. I feel like I should already see my my label. So content attribute data marker label. Oh, you know what?
0:44:05
It’s there. You can’t see it in Bricks Builder. I always forget that data attributes don’t show up in Bricks Builder. Okay, that’s fine. So unfortunately what we’re going to have to do, and last let me refresh. I think styling of data attributes doesn’t show up, but I thought the content does. Data marker label. Content, okay, well, whatever. All right, so let’s do font size is text S, so small text.
0:44:34
And then let’s give it a background color of var action ultra dark. Or no, it was action dark. And then let’s give it a font color of action ultra light. And then let’s just go view assuming there we go. Let’s give it a border radius. Of.5 M kind of match everything else that we’ve been doing.
0:44:59
We need to give it some padding. Why do I feel like that’s not small text? Font family, I also feel like it’s the wrong, no, it’s the right font, it’s the right font. Obviously, I’m used to working on my other site. Okay, padding of 0.5em1em and then line height of one, because it’s like a label. Hey, now we’re getting somewhere. Let’s make it text XS, make it even smaller. Hey, now we’re getting somewhere.
0:45:36
Let’s make it text XS, make it even smaller. Doesn’t need to be quite that big. I feel like our padding may be a bit much, especially on the sides. So let’s do.75 M on the sides. Okay, that’s getting better. Let’s go top zero, left zero, just to make sure it still appears. It does. See, this absolutely positioned pseudo element is still attached here. I don’t know why that other background one wasn’t. Let me just try something real quick.
0:46:21
Let’s just make it big. I just want to make sure I’m not losing it because of the size or something. Oh I am! Oh it’s behind the, it’s behind the actual map. That’s why you can’t see it. Okay, okay, okay, okay, okay, okay. All right so our map, our map needs to also be negative one. So map z-index minus one. Okay let’s put this back. Let’s go to CSS. All right where were we? So instead of five rim we need to go back to what we were which was calc a hundred percent of the size of the parent plus five pixels. Do that for both the width and the height. And I feel like we’re still… Okay, alright, that’s good, that’s good, that’s good.
0:47:20
I just need to move my label out of the way. This label needs to be like 1M and 1M. Yes sir! Yes sir! Now, this doesn’t have to be red. So, let’s make this… Action Ultra… Action… Action Dark Trans 20. There we go. Fantastic, guys, we’re making progress.
0:47:46
Now I only want to show this label on hover, right? So root, hover after. Refresh, yes sir. Now, that’s not all though. That’s not all. That looks really janky. We want it to kind of animate or transition in, right? And so, we need to think about this. Root after. This is why I write the CSS in these bricks fields, by the way, because of this root referencing, this is ingenious.
0:48:23
It makes things so easy. So root after, I actually want this opacity to be zero. And then when you hover, oh dear, oh dear, okay. Root, oh no, I lost my whole after statement when I, oh, Command Z and bricks killed me. Command Z and bricks just killed me. No, no, no, refresh. What else do I lose when I refresh? We might be okay. Map marker.
0:48:53
Okay, let me collapse all this so you guys can see what’s going on here. Map wrapper, marker, okay. Map marker, map marker, style, CSS, what do we have? Before, hover, yes, we’re back, we’re back. See, I save a lot which is really really good. You want to save a lot Okay, let’s get rid of hover so opacity is 0 save refresh So now you can’t see our label So now what we want to do is come down here and say root on hover Target the after element and now we’re going to say opacity is 1 with a transition of the opacity of 0.3 seconds, easing, save, refresh.
0:49:42
Hey, look at that, look at that, look at that. We also probably want to go with a cursor of pointer here. That’s going to give us the, or should have given us, oh, I put it on the wrong thing. Yeah, I put it on the wrong thing. It needs to be on the parent, right there, save and refresh. And that’s going to give us a little hand when we hover. Guys, we’re coming along, we’re coming along. What do we need to do next? I feel like we need to maybe start getting this to be driven a little bit by a query loop or we can start to tokenize everything.
0:50:21
Maybe, maybe let’s tokenize everything Let’s tokenize everything okay and logical properties, okay, so width becomes inline size height becomes block size Top becomes inset block start no no no In yeah, yeah, that’s right inset yeah inset block start Inset inline start is what left is. Okay, because it’s the inline axis starting, which is the left hand side. And then block is the top bottom axis and the top is the start, okay. All right, now we are going to go to same thing here.
0:50:59
So width is block size, height, no, height is block size. God, I am so dyslexic. Width is inline size, background color display position z-index here’s top again inset block start, inset inline start okay good. Transition transforms all good, border radius is all good, position top is inset Inset inline start display block size font size background color color border radius padding line height opacity Opacity transition all of that is good. Okay. We’ve converted this to logical properties now I Want to do another root statement up here?
0:51:54
And we’re going to start doing some tokenization. So what I need is first of all the marker size right so we’re gonna say marker size and I’m gonna do where is our marker size it’s right down here 1.5 rim so 1.5 rim and then you replace both of these things with my token so this is gonna be marker size. I’m going to grab this, come in here, that’s going to be marker size. Now I need marker, we’ll just say marker top position. Marker top position 41.5% and then marker position Left left is going to be sixteen point two five percent I’m going to come in here for the top position and say var actually I can just delete all that We’ll just say marker Position top and then right here marker position left, cursor pointer. All right so I’ve tokenized all of this stuff. We can save and refresh on the front end. Nothing is broken.
0:53:21
Oh look at this Atlanta, Georgia that broke. Why did that break? Max content. Ah is it, oh it’s inline size. See dyslexia, dyslexia, dyslexia. That’s fixed now okay all right um marker label size is going to be text xs we’re going to come down here marker label inset let’s just use one token for this so it would be top that’s 1m right of auto this is actually going to allow us to reposition these markers. Top right is auto, bottom is auto, left is 1M. And now I can come down here and take away these and just say inset var of marker inset. Marker, oh sorry, it’s marker label inset. Marker label inset save, refresh, did anything break? No, fantastic, okay.
0:54:54
All right, we’re tokenizing really well, position absolute, so marker, marker label radius, 0.5M. And this is the, let’s just put some comments in here. So just so we can just remember what everything is. This is the marker label. This is the, yeah that’s the hover after, that’s all fine. This is the actual, what is this by the way? This, oh this is the background for the marker styling itself. All right, and then this is the marker variables. All right, label radius, we’re going to come border radius is var marker label radius and then for padding Let’s do marker label padding and then that was 0.5 m 0.75 m Come that come down and do var marker label padding Great Line height. I’m just going to keep that fixed at one Opacity is fixed. Nothing else needs to be tokenized.
0:56:29
Okay this is fantastic. Great great great great great. Let’s start looping. Let’s start looping. All right let’s go back to admin. Go out. Everything is looking good on our okay I need to get rid of our hate that icon deck that shows up at the bottom. All right, let’s go to MetaBox, post types, new post, locations, location, locations, supports, all that’s good, advanced, whatever, publish, go to custom fields, add new, locations, we’re gonna assign this to the locations custom post type and we are going to add some fields. We’re going to add a text field or are these going to be number fields? Okay this is we’re going to call this top position. Yes, this is what we know, marker position. There you go. I’ll just put map in parentheses for the map. Alright, so we have a marker top position and then we Another number field, this is going to be the marker left position.
0:58:04
Okay, and then you have to do something to accept decimals. It’s the step value. Meta box number step value. Step accepts an integer float number or the string any if you want to enter any value. Okay, so the step needs to be any. And let’s go down here for marker left position, step any, go ahead and hit publish. Okay, so now we can do marker map positions. We probably just want the name of the location, but I could also do a field for, oh, this is a marker position and this is marker. Map marker, map marker, update. Because now along with the positions in there, I want to do the label.
0:59:03
So marker label, oh, it’s just a text field. Marker label, and then I’m going to move that up to the top. Let’s update this. Let’s go to locations, add new. Oh, we need an image. Okay, so add field, image, image, image, image, just do image, map image, or how about location image? Location image, just like that. Put this above the map marker. Let’s hit update on that. Let’s go to our locations, add new, we’re going to add Atlanta, GA. Here’s our stuff down here. So let’s go to unsplash Atlanta, Georgia.
1:00:00
And we don’t need to look too hard in here. What is going on, dude? Atlanta skyline? What do I have to do? Okay, there’s Atlanta right there. And I wanna purposefully get an image like this that has an abnormal aspect ratio. Let’s download this. Because this will help us make sure our cards aren’t gonna break depending on the aspect ratios that get used.
1:00:27
Because you know Bev. You know Bev going to throw in some crazy ass aspect ratio image, right? You know she is. Alright. Add new location, upload file, let’s get the Atlanta map in there. Where did that go to? Okay, right here. What am I doing? What am I doing? Oh, downloads, here.
1:00:49
It’s right here. There’s Atlanta. All right, so we’re going to go ahead and hit publish. Marker label is going to say Atlanta, Georgia. So I’m going to make this different from the post title. Post title is GA, this is Atlanta, Georgia, all spelled out. Marker position is 41.5%, 16.25%. These are just raw numbers, raw numbers here. Okay, update. Perfect.
1:01:26
All right, so I’ve got a photo, I’ve got a location, I’ve got marker label text, and I’ve got a marker position. Let’s go ahead and refresh our builder. Let’s zoom out so we can actually see what we’re doing here. First thing we’re going to do is loop our cards. Let’s collapse all of this, open, open, open our locations list, open our sliders, get rid of all these cards. We just want one card. We’re going to make that a query loop.
1:02:01
Our HTML tag for this for sure is gonna be an li. Remember we made the slider a ul? So these are gonna be our li’s. I’m also gonna need list none on this. That just gets rid of the bullets and default margin padding, things like that. And I need to go to our query loop now and say we’re gonna do post type of locations, which we only have one location. We wanna do post per page like 99. I don’t really care and That’s all we have to do I’m gonna go into our heading and we’re gonna replace this with the post title. We should see Atlanta GA. Ah Look at this. We need an address and a phone number field. What am I thinking?
1:02:39
What am I thinking? I forgot The most important well, they’re not the most important things but metabox custom fields Custom fields, locations, add new. Oh no, no, no, no, no, not a new field group. Add field. So this is gonna be a text field, text area field, text field. Let’s do, let’s do another group. Let’s do a group called address and or contact info like that.
1:03:10
or Contact info like that and let’s say in inside of here. We’re going to do a street Okay, so it’s going to be street address Then we’re going to do a text field for city Then we’re going to do a text field for state then we’re going to do a text field for state code. State code. We’re gonna limit that to two. I’m not gonna do all the limitation of all that. That’s beyond this tutorial. It’s not really what we’re interested in here.
1:03:47
Let’s do a text of zip code. And let’s do a text of phone number. Update. Okay, back to locations, back to Atlanta, Georgia. Scroll down, here’s our contact info. So we’re going to 123 Atlanta Street. City is Atlanta. State is Georgia with a state code of GA, a phone number of 1 2 3 4 5 6 7 8 9 0 update dynamic locations save this refresh okay now I’m going to grab this we’re going to put in our street address let’s space let’s use so that was the street address, city. Let’s do another dynamic data entry, state code. Another dynamic data entry of zip.
1:04:58
Save. Atlanta street, Atlanta, Georgia, one, two, three, four, five and I accidentally put too many characters in the zip code. Okay, update that. Now what we need to do is get a line break going after the after this right here. So br. Let’s look at this. There we go. Perfect, perfect, perfect. Now we select our phone field and we’re going to insert dynamic data for phone save refresh all is well in the world now we need our featured image dynamic data is location image hey hey hey hey okay media object position 5050 that that should work for most locations.
1:06:04
All righty, friends. Let me go ahead and duplicate our locations. So we’re gonna duplicate, go back, duplicate. Oh, top of my head, top of my head, top of my head. Where are we gonna go? Shout out to Jiu Jitsu land, Brazil. Where it was, Sao Paulo. How do F-U spell Sao Paulo? Sao Paulo, I’m just gonna get close. There it is.
1:06:30
S-A-O, Paulo, S-A-O, all right. S-A-O, Pa-ulo, is that it? Yeah, Sao Paulo, Brazil. All right, let’s go ahead and publish that. Let’s come down. Shoot, I don’t wanna type that again. All right, Sao Paulo, Brazil. All right, Brazil Street and refresh me. London, Sao Paulo, check it out.
1:06:56
This is looking really really really good. Now what we need to do is drop a loop on our marker. So we’re gonna say use query loop query. What are we gonna query guys? We’re gonna query locations again. And we’re gonna query 99 of them if we need to. And then we just need to fix their positions. And here’s the thing. We got to talk about this for a second. So the position is based on coordinates. These coordinates right here. And what we need to do is actually set this to dynamically override on a per location basis, what we’re going to have to do is use inline styles. And we need to change this marker position variable inline. So let me show you. This is, it was 42.5%, like 16.6% or something.
1:08:04
So if I make that zero, zero, it’s gonna be up here. Now imagine that I can take JavaScript and inject inline styles on this one specific div. So I can add, edit as HTML, style equals, and I can override our marker. So marker position top and we’re going to go 42% and then marker position left of 16.6% and then I can hit enter now. I think I’ve screwed this styling up Like that.
1:08:44
And see, look at that, it moved it. It moved it. I was off a little bit on the percentages. But it moved that marker. See the other markers stayed. These are all the markers for our locations are sitting right there because I turned on the query loop, right? So I went up here, I turned on the query loop. It’s querying five markers in the same exact position. But on that one marker, because I changed the value of these variables with an inline style, it only applies to that one div, that one marker div. Oh, let me show you this too. Ooh, yes. Okay. So let’s go to content, HTML tag, just to be fancy, just to be fancy like, we’re going to go ahead and make that, um, make that a map marker, just like that.
1:09:38
Custom elements have to have a dash in them. Now watch this, in the HTML, it’s gonna say map marker, and that’s valid HTML. Isn’t that just so fantastic? Instead of just having a stupid div there, it’s gonna say map marker, and you can actually style the map marker, but we’re not gonna worry about any of that. Okay, so now you can clearly see all of our map markers in here.
1:09:58
It’s not just like random divs. Isn’t that nice? Fantastic. I think it’s fantastic. Okay, anyway, you got the gist of the idea. We need to use JavaScript to dynamically, but where are we going to get the values from? How are we going to get the values out of those custom fields? Remember, let me go back to edit location.
1:10:17
There’s the values of the marker right there. That’s the marker position values. How do we get them? We’re not going to retrieve them from the custom field. In Bricks, we can just assign those values to data attributes, and then it’s much easier to get the values from the data attributes and inject them dynamically. So we’re going to go to style map marker. Remember, we only have one physical marker because the rest are controlled by a loop. So everything we do to this one marker is going to apply to every marker in the loop. So I’m going to go to attributes, and I’m going to say data marker position top.
1:10:53
Your data attribute values have to start with data. And then what is our value going to be? Just leave it blank. We’re going to insert this down. Oh, no, no, no, no. Sorry. We’re not leaving it blank. Again, I was thinking, I was thinking ahead. We need the marker top position right there. We’re going to insert that dynamically. And then we’re going to go look at the HTML in just a second. This is gonna be data marker position left. And then we’re gonna go value of marker position left, save, refresh, inspect. And look at this, data marker position top, data marker position left.
1:11:32
Now all we have to do is pull those values out of the data attributes with JavaScript, add a percentage to them and set them as the value in the HTML element style tag. All right, so let’s make this attempt with JavaScript. I’m gonna go ahead and I’m gonna select my map wrapper. I think that’s where I want my code block to go. I think it would make sense. Yeah, the code block needs to travel with the map and with the markers wherever those things should be.
1:12:13
So I’m going to go ahead and insert a code element into that container right there. I’m going to go to the content. We’re going to get rid of all this and I’m just going to put in some script tags, okay? All right, I wanna preface this next segment of this lesson with the fact that I am not, by any freaking stretch of the imagination, a JavaScript expert, okay? It takes me a lot of time and tweaking and a lot of work and headache to get to a working JavaScript snippet.
1:12:47
I am not the guy to come to for, yeah, yeah, yeah, I’m practicing, I’m getting there okay but I’m not the guy to come to for JavaScript tutorials right I’m just doing my best I’m gonna do my best to explain what I’m doing as I do it but I’m not an expert okay this is the weakest part of my game is JavaScript this is the weakest part of my game but I still I still managed to get things done. Okay, so let’s go ahead and let’s try to get going with this. First things first, you’re gonna have your code snippet right here, we’re gonna execute this in a minute. We’re not gonna worry about executing right now, but we are gonna execute this in a minute.
1:13:30
The first thing that I need to do is I need to create a variable for my markers and I need to be able to select the markers that are on the page. So what I’m going to do is I’m going to define a constant variable, it’s const, okay, and I’m going to do markers and I’m going to make this equal to document.querySelectorAll and what this basically does as far as I know, right, is it goes and selects any, like by a class or ID or whatever. And so you can specify a class to put here. Now I need the class of my markers. So I’m gonna grab my marker and just double check. It is map double underscore marker.
1:14:14
So I’m gonna say, go find map marker. All of these, every map marker that you can find, find them and assign them to a variable called markers. So this is like all of my markers. The next thing that I’m going to do is loop through the markers. So basically what this has done is it’s created an array of markers, right? And now I need to tell the JavaScript to loop through the array. So we’re going to do markers for each and then marker. And we’re going to do what’s called, I believe this is called an arrow function. Okay.
1:14:47
And then we’re going to open our curlies and come down here and give us give us some more space to To work in down here alright, so we’re going to do two new variables We need a variable for marker top and we need a variable for marker left, so I’m going to do const marker top Not with not with all right there That’s going to be equal to something and then I’m going to come down here and say const marker left. And that’s going to be equal to something. Now, the question is, what are these things going to be equal to? Well, remember, we put the values. Let me go to my marker, style data attributes.
1:15:28
We put the values in these data attributes right here, right? So what we need to do now is assign, let me go back to my code block. Where is it? Code block right here. So we need to make this variable right here equal to the value of the data attribute. So we got to get the value from the data attribute and assign it to this variable right here. So the way that we’re going to do that is marker.dataset. and then the name of the data attribute value. But here’s the thing. With this data attribute value, you don’t use the dashes and you don’t use the word data, okay? So I’m just gonna copy this as is, go back here, and I’m gonna paste it in, but we’re gonna get rid of this, okay?
1:16:18
And then I need to make this position top with no dashes in it, okay? So we’re gonna do marker position top, close that off. I believe I can just copy this, paste it, because this is gonna be marker position left. So now what I’ve effectively done is I’ve looped through the markers and I have assigned the value of those data attributes to new variables called marker top and marker left. All right, the next thing I need to do is make the style property equal to these values right here.
1:16:51
Okay. These, uh, these variables, right? So the way that we’re going to do this is we’re going to do marker dot style, dot set property. And then I need to give this the, uh, variable names, right? So it was marker. In fact, I don’t even remember what they were off the top of my head. So let’s go in style. You want to make sure you don’t make mistakes in these names because obviously stuff will not work.
1:17:16
There’s marker position top and marker position left. So I’m going to go in here, marker position top, and then there’s marker position left, but we can’t do that yet. We’re going to do a comma, and then we’re going to do the variable. So what is the value? Marker top plus we are going to add the percentage onto the end because remember it’s that’s a raw value. It’s like 42.2 but that doesn’t give us, you know, the CSS needs a percentage to go with the position. Okay so we’re going to put that in and then we are going to close that off. I’m going to do another one of these. All right, so I can just paste that in. I think I am missing a bracket somewhere, which is why it’s like throwing errors and behaving weird.
1:18:11
I might have to look for that in a minute. So this is marker style set property marker position left with marker left. Okay, plus percent. Nice. Okay, I think I just need to close all of this off so after this I’m going to end with my remember this parenthesis that I opened earlier I’m going to finally close that and I’m going to put a closing semicolon my brain doesn’t even work anymore JavaScript fries my freaking brain okay so I’m going to put that in and then what I’m going to do is I’m just going to kind of review everything we can execute and like cross our fingers.
1:18:51
I’m also gonna say render without the wrapper. And then I’m gonna go ahead and save. And we’re gonna see, ah, okay, it does not work. All right, so we’re gonna inspect this. What we should see is a style tag, and we don’t see a style tag. We should see a style tag up in here. So I’m gonna go back through, set property, marker position top. Oh, I bet. Yeah, that percent has to be in its own little parentheses here.
1:19:27
All right, I still don’t know if this is going to work. Oh, oh, it worked. Look at this, look at this, look at this, look at this style right here, right here, right here. Look, look, look, look, look. It put in style, marker position top 41.5%, marker position left 16.25%. Guys, this is fantastic. Hold on though. Why am I only seeing, why am I only seeing one marker? Shouldn’t I be seeing many, many, many markers?
1:19:58
Where are my other markers at? Oh, they all have the same value. Okay, I also need to get the marker label. Okay, all right, let’s think about this. Marker, let’s go to attributes, data marker label. Ah, there we go. We didn’t insert the dynamic data, so I need marker label. All right, save. Map, Sao Paulo Brazil Maps Okay All right, we are So it’s South America. It’s like right through that tip and it’s To the right of this little jetting out thing. Okay, so let’s go Sao Paulo Brazil, so we’re gonna go down a lot Like 52 and to the left a lot 25 update oh we didn’t go we went to the left perfectly we got to go down more so marker top position 772 update Hey look at that I’d say just 70 and let’s call that a day That’s pretty good, okay?
1:21:09
It says Sao Paulo, Brazil. So we have four locations mapped. This is fantastic. Let’s make them pulse. Let’s make them pulse. So let’s go to Animista. Let’s choose our pulse animation. I think they have one under attention. Pulsate, right there. Okay.
1:21:30
Let’s go grab the keyframes for this and let’s go on to our marker class. CSS come down here, root. There’s our keyframes and then we need to grab this animation script right here. Okay, nothing is pulsing. Oh, we actually want to, maybe we can make our label before our background accent. Maybe we can make that pulse. These frames need to be inside of a root tag either. I think they could just be like that. Oh, there we go now we’re pulsing. Yeah, it just don’t put those inside of the root tag.
1:22:29
Alright, they’re pulsing, they’re pulsing, but I don’t want those things to pulsate. I want. I want let’s get rid of this animation right here. Let’s try putting that on our background accent. And then we can probably play, oh, now they’re gonna move too. Yeah, we don’t want that to happen. Hmm. Okay, let’s go ahead and get rid of that.
1:22:50
Cause that, I bet those keyframes use trans transforms. Yeah, they do. They’re transforming the scale which This already had to be transformed in order to position it. So that’s not going to work Okay, let’s just put it on the marker then Just to give them and just want to give some sort of motion here Let’s change the duration to 2.5 seconds. In fact this is not giving ping vibes, you know, that I want. So let’s go steal. I want it to be like a kind of ping, ping kind of thing. So let’s go into giri.co because I use this exact animation. Let’s go to wp-codebox. And let’s go down to, here it is, pulse box shadow. So on hover and focus, we’re just gonna change that to root.
1:24:09
We have animation pulse and here’s the key frames for pulse right here, which is a much, much simpler animation as well. So let’s get rid of all these key frames. Think we can just highlight all these, all of this keyframe nonsense. Okay. Paste this in. So our keyframes is pulse and it’s going to affect the box shadow, which should be good. We want that to be action trans 40.
1:24:38
That’s actually perfect using the exact same variable. But instead of root or instead of pulse, we want it to be root. We can actually take out the focus on that. So let’s save. So root on hover, so this class map marker, except we don’t want it even on hover. We just want it to be at all times. Pulse one second infinite And then box shadow 0 0 0 0 trans 40. Okay 1 M I think is our problem. How about 0.5 M? We don’t want that box shadow to be too crazy. Let’s refresh. Oh we’re getting it. I bet you guys can’t even see it though. Let’s do two seconds, infinite, box shadow, 20 pixels. Oh, that’s nice. It’s a little big, 10 pixels.
1:25:44
That’s better, let me view this on the front end. That’s actually really good, but it needs to be brighter. So let’s do like 80. Yes. 80. Yes, look at that. It’s kind of sexy, don’t you think? That’s kind of sexy. All right, so we’ve got this going. Let’s see if this is all keyboard navigatable. So, see I’m navigating through the phone numbers here. Now I can navigate through the slider with my keyboard. Now, you could make it so that these focus with the keyboard as well, but I don’t, people already looped through these locations. I don’t want them to loop through the markers as well.
1:26:33
So in this particular case, it would not be good, but you can absolutely make these focusable with tab index zero. And then you can show these labels on focus as well as hover. Very very simple to do. We need to check mobile responsiveness. And then we’re going to call this a day. And that is absolutely terrible. So we’ve got some work to do on mobile responsiveness. So what I’m going to do is I am going to check this on this breakpoint right here and say that, you know what?
1:27:07
That’s not fantastic. We’re probably going to break that to one column right there. So main locations, let’s go grid one. And then when we do that, when we break this to one column, we’re going to need the map to be on top. So now map wrapper at this breakpoint, I’m going to go style layout order of minus one. Where’d order go? Order, order, order, where are you here we go minus one there we go all right let’s check this out now much better much much much much much better now we’ve got a little problem with our cards it seems let’s go to this list, location slider, layout, direction, vertical. All right guys, I’m back. I figured it out.
1:28:20
The slider has a fixed height on it. What we were doing, you would have seen the problem. The problem would have been obvious if these cards were not in a slider. But because they’re in a slider which controls their height, there was overflow happening inside the card that I couldn’t actually see. And it was due to these images right here. So what I did to fix it is I chose the media wrapper and I put it to position relative. I chose the media and set the media to absolute because it was the media creating the overflow.
1:28:50
And now the media effectively only conforms to the wrapper height and it’s not permitted to cause any overflow whatsoever. And so those two adjustments right there give us this result right here. So on desktop, it looks like this. And then on mobile, we come down and it looks like this. Nice and clean. People can still scroll through, no problem whatsoever. The only thing is that these markers get very big, they look bigger on mobile, like, because the map continues to shrink, and the marker size is not shrinking.
1:29:27
So we can do one thing to just fix that real quick, or attempt to fix it. We’re just gonna go select our marker, and just see if we can use some math to make this work out better. So I’m gonna go down to our CSS where we have our marker size. And so our marker size is 1.5 rem. I want it to get smaller, but not get bigger than 1.5 rem.
1:29:53
So we could try putting a clamp function in here. Let’s try, maybe let’s try a clamp function. So let’s go to giri. Actually, I wonder if marker size we could just use text L, M, let’s do S. I don’t know if it’s going to get, it got bigger and I don’t know if it’s going to shrink down enough on mobile. It kind of does, it kind of does, but it’s not big enough range. So I’m going to go to giri.co. I’m going to go to clamp calculator. I’m going to say, remember 1.5 rem is our maximum value, and then I want the minimum to be 0.75 rem, 0.75. Okay, let’s see what that clamp function does. So let’s go in here and instead of marker size text s, let’s put in that clamp function, save, refresh. There we go. So now look how small they are on mobile but then they grow back to their 1.5 rim size on desktop. Guys this is a I think it’s pretty good I think we did a pretty good job here okay if you have any questions drop them down below I will be happy to jump in and help and that’s it for this tutorial I hope you guys enjoyed it hope you got a lot out of it I’ll be back very soon peace
