Vue + Boostrap + Leaflet Mapping

hello and welcome to this view jeaious tutorial the idea of this tutorial is to introduce you to view j/s i'm also going to be introducing you to a professional workflow i'm also going to show you how we can integrate bootstraps a Twitter bootstrap interview j/s and I'm gonna show you how we can integrate the leaflet mapping library into a view jas application so I just very quickly want to talk about PJs and its lineage so view j/s it's a framework it's fairly new in terms of JavaScript frameworks it's only been around for four years but it's hugely popular it's got over 100,000 likes or on github or 100,000 stars rather so shoo-shoo popular it's going places huge is actually when it was implemented to the best features of angularjs at the time and react both of which are essentially game-changing JavaScript frameworks so view dress took the best bits and put them together and what we were left us left with is kind of a hybrid between certain features from angular certain features from react and then we've got few GIS but good news though is the concepts are pretty similar so if you're just new to JavaScript development and specifically developing more complex JavaScript apps if you learn view j/s you can easily use the skills I'm going to teach you in this tutorial and pick up another framework such as react it's worth noting angularjs has now become angular and angular is very different from a grey jeaious so angular is for making a bigger wider more corporate type applications more enterprise applications view and react are still broadly similar however views got some nice features such as directives that we're looking to today which react doesn't have so before we go any further I just want to show you what we're building today I think it's really important we start with the end result when I show you what we're building I really want to think how would I do that if I didn't have a library like view so let's just have a quick look at what our building today so we're building the Arizona breweries list this is actually quite an interesting project because it's currently January and I'm doing dry January so I thought it might be quite nice to focus at least my programming on our code because I won't be drinking any alcohol this month so let's just very quickly go over what this application does so first and foremost it's pulling in breweries from a live API so this is real data we're pulling it home from an API which is free API stands for application programming interface and it is a way for us to interface with third-party data and third-party applications I just briefly want to show you what this does so pause it and it pulls in data from an API it displays it in this nice kind of table as we scroll over the table you can see we get some hover effects which is always nice and this is my favorite feature so as you scroll over so as you scroll over a brewery that's represented on the map and you can see if you look on the map we've got these custom markers I'm going to show you how to make those so that's really exciting so as you scroll over a brewery its location gets enlarged so this beer glass which represents a location of a brewery gets enlarged so what's really interesting about that is the way that events are handled so we're handling a hover event we're updating something on the maps it's quite a lot going on there but I think you'll find as we go through the tutorial you realize the power of you and just how easy it makes it for us to create an application like this and when you think about it if you had to manage all of this complexity and programming pretty much is just about managing complexity especially when it comes to complete creating non-trivial cones so when it comes to managing this complexity or and if you have to do it just using standard JavaScript it becomes very difficult it's a lot to think about you got to update the HTML you've got to listen for events view handles all of that for us and it does it in a very elegant way so now I want to dive in and start programming this from scratch before we get going there are some software prerequisites and I really would like it if you followed along with me so it's important you make sure you have a few bits of software installed before we get going so first and foremost you are going to need to install nodejs so as you can see it is just a binary executable that you download and run it couldn't be simpler to install so if you haven't already got no Jes installed make sure you do that now the reason why we need to install note j/s is because we will be using the MPM package manager so the node package manager in order to manage dependencies for our project so if I just pull up a terminal window very quickly skip this version and clear down my terminal window and type in NPM as you can see I have the NPM command line tool available to me and you get that through installing node so it's pretty simple and then finally there's one more thing that we need to install and that is view CLI so the view command-line interface so what this does is it provides a command line tool for us that allows us to easily and quickly create view apps and it puts in place all the scaffolding so we can get going really quickly and in order to store that install that you're gonna actually use the node package manager which hopefully you've installed previously or you already have installed and you're just gonna run this command in your terminal window sometimes if you're on a Mac you have to type in sudo before you run that command if you're on Windows it should be fine but you're just gonna run that command and once you've done that and once it's installed and I'll just clear down the terminal you should be able to have access to this view tool and that's hugely useful so we've got all these come and canoes and specifically we're going to use create in order to create an application so they're the prerequisites once you've got those installed we are now ready to go we're ready to get cooking and making this application so please do follow along with me there's a lot to go over but I think if you just concentrate and work hard on this tutorial you'll be absolutely fine okay so we're now ready to dive in and create our first view application so the first thing I need to do is tell the view our view CLI to create a new app for me and I need to name that app which I'm going to call brew which is fitting as we are making a breweries list so that makes sense we just need the default settings so we just press ENTER to go through the default settings so that's loading it is gonna create a a platoon for us within a brew directory and I want to open that directory in my IDE of choice which for me it is webstorm so let's just open up that directory so I'm going to go to my desktop and I'm going to open the brew directory so as you can see it's already started setting files up for me at this stage it's probably still running as you can see it's still running so we can't actually run our app yet but it's probably good enough for me to talk you through some of the varc files first thing I'm going to do is set my idea up though so I'm gonna just have the terminal window down the bottom here I'm gonna clear that down and I'm gonna use this to run my application once it's built a hard it's now built successfully creative new project brew and we can run yarn serve you can also run NPM serve which we're going to be using today let's come back to here cool so let's just very quickly look through these folders so we have a no node modules folder which is going to contain our dependencies so our node libraries these are documented in the package.json file so you can see at the moment the only production dependency is view everything else is dev dependencies these also have a number of scripts that we can use in here so I'm going to run these scripts you just run npm run and i am going to run serve which serves up my few application so i'm going to do that now so npm run serve also i've note in here you have the public directory within there you just have a single index dot HTML file this is a single page application so by its very nature we only need a single page so what happens is when this application is built whether it be in production or development our javascript is injected so our javascript is injected into this HTML page and it is web pack that takes care of that so the view CLI is of in effect an abstraction on top of web pack it makes a config seamless and easy we don't even have to worry about it but it is there behind the scenes ok so you can update some things on here so you don't have to have a title as brew you can say my awesome so let's have a look at what my awesome app looks like so i've run npm run build and they served my app up on our local server and here it is welcome to your first view application so let's just unpack how this is actually displayed and let's start making a few adjustments so we can begin with making our application so the first point of note is the main entry point to your entire application is main j/s main drop jeaious imports of view from the node modules file it then imports a view component so all view applications are made up of components and the route component is going to be app dot view so notice that's in the same file as main j/s and to import in javascript something that is in the same file i denote that import with a dot forward slash so doc forward slash means look in the existing directory if we just say import view from view that's going to automatically by default look in the node modules so this sets up some config stuff and most importantly it sets up our view instance and it mounts that instance to an HTML element with an ID of app so if we come back to index.html and we scroll down we can see there is indeed a div with an ID of app where our entire view application gets mounted to so we will never need to change that ok so let's take a look at our main root component app view so all components within view are made up of three parts so we have a template this controls the visuals of our page we then have a script which contains the functionality and it exports this default object so this is if you like the component instance and it is just a standard JavaScript object literal so object literals consist of name value pairs so here we have the first name value pair which happens to be called name and it names our applet and it names our component so as a minimum we need this in order to create a view component next we have this components property which lists the other components that we're going to use within this component so with view you get the situation where components can call in other components the components they call in our child components of this app view which is the parent component so you get this kind of tree hierarchy and then finally we have styles which are specific styles for our component now this may look a little bit strange specifically if you're coming from more a traditional HTML and JavaScript background but it's very common to separate concerns however the idea here is we have discrete components that sit largely in a standalone nature and in effect act as small applications within a larger application so what this allows us to do is create these discrete bits of logic that are simple and kind of compose themselves together to form bigger applications so our bigger applications can be broken down into lots of smaller applications which is really nice and is a very effective way of managing complexity so let's take a look what's going on here perhaps you haven't seen a HelloWorld HTML tag before that's because this is a view component so you can see I'm importing hello world from here I then can use this component so I can mount this component or bind this component to the template by calling it I could pass in an attribute here welcome to your view Jonas app and we can consume that attribute as a property on the hello world component all of my components apart from this one here the root component are going to live in a components directory so you're already sealing we can nicely separate parts of our application into these kind of discreet blocks and they can live in different areas we could be quite organized as we go along so as our app starts to grow being able to separate files out and place them in different folders is really handy so notice we have again this dot forward slash the top floor slash stairs I want to look in the current directory I then want to look in the components folder and there should be a hello world view file there which are going to import and I am going to assign it so I'm going to assign an instance of that component to this hello world variable here and because all components have a single default export we can name this variable whatever we like however it's considered good practice to name it the same name as the file that contains component so hello world and hello world so let's just dive into this component that have a local what's going on so I've already gonna have the sections of the component the only other thing I want to show you here is this so we have this handlebars notation so this is a placeholder for the value message so let's just get rid of all of this stuff here and let's just have a quick look at what's in message so if I say hello notice how I can easily combine how I can easily combine just standard HTML a long way of some placeholder value I don't know what that is so let's have a quick look so it's saying hello the actual message itself is saying welcome to your view j/s app so with us where is that information coming from well it so happens that information or that value is becoming from a parent component so you can see here we have this props property on the export for the component and we're saying this component can receive a property called message and it's going to be a string so we can give it a value we don't have to give it a value by the way we or a type even so this is a type non value so it's off type string but sometimes it's considered good practice to do that so let's just have a look at what we're passing down so this is how properties are consumed so we have this attribute on the component tag where we're calling the component we have this attribute message which is defined here within there we're passing in this string welcome to your view jsr and we can access that message using this handle bar notation so view takes care of that binding for us we don't have to worry about binding values from the component into its own template view does all of that for us so that's quite nice and that's one of the ways that we could pass information amongst components okay so we're ready now to get going and making our application but before we do so there are a couple of dependencies that we need to install so the first is Twitter bootstrap this is what we're going to use to make our website layout nicely maybe you know it's a CSS framework so all we have to say is npm install bootstrap and we can install multiple dependencies at the same time so we're also going to need to use axis which is an HTTP library we're gonna use that to consume the API and we're gonna save those dependencies into our package JSON file while then is why that's installing I'm gonna rename I'm gonna rename I think this is crushed actually while this is installing though I'm gonna rename I'm gonna try and rename if I could do it there we go I could do it now so I'm going to rename refactor rename this component to brew I don't want to call it hello world anymore so I'm gonna refactor that I'm gonna rename it to brew there's a couple of things we need to do so remember each component has a name I no longer want to call this hello world it's gonna be called brew and then within app you are gonna be importing now brew and I'm gonna update this variable to brew and finally I have to update the tag in the template to brew that should be okay so import proof on brew top view and I'm using brew there that's fine and I have to tell the component also that it is indeed using and if I come back now to my application it's still renders it's absolutely fine nothing really has changed apart from the name so I'm also just gonna get rid of this logo we don't need anymore I can also get rid of this property here so we don't need that anymore and in fact let's just clear this down and I'm just gonna say h1 welcome to my room ok so we've still got a few dependencies installing whilst this is going I'm gonna bring another terminal window up and there's also some dev dependencies that we need to install so you know but in my package Jason I have dependencies that I need from our application and then I have dependencies I only need in development so we want to use sass sass dozens the sass modules for compiling sass into CSS aren't installed out the bats but we don't have to do any further configuration we literally just have to install so we have to run npm install node sass and we also have to install the sass loader and then - - save and then we're gonna save that to our dev dependencies ok so i'm now going to do a little bit of structure into my application i want to have a directory called sass within there i'm gonna have a main dot s CSS file fact and hindsight I think I should call this s CSS and within there I'm gonna have 1/4 custom dice CSS and notice how I have this underscore so this is basically a partial sass file all of my partial sass files are denoted with an underscore it's just a good naming convention and they will be tied together by my main CSS file so let's just create that there we go so that's creative I'm just going to check that my dependencies have installed which I have I can also check in the package Jason though I now have no sass in the SAS loader install so that's great so let's open up custom that s CSS and I'm going to show you now something which i think is quite amazing and just how easy it is when we're using a bill package to import our dependencies such as bootstrap so now bootstrap I'm just going to go to the web actually and show you guys quickly failed to compile let's have a look at what's going on here so say no such file or directory so it's very quickly see if we can fix this the end of not no such far so I'm assuming it's struggling I wonder what it's doing come out here so let's come out to package up Jason and so sometimes you have these little problems so let's just double check what we're doing here so we're importing components and we do indeed have that component there so sometimes when you're setting up an app it goes a little bit funny so let's just see what we've got here so let's stop our dev server so I need to do is control see clear that down and run npm run serve again and let's just see what happens see if that rebuilds sometimes I can think fix things and yeah that looks better that looks like it's fix it now so that's weird sometimes that can happen when you're just setting things up to start with I don't have to see that happen when you're actually midway through development so all we need to do to get out of this dev server is press ctrl C and then you can rerun it okay so where were we have kind of lost track so we are in custom CSS and we need to import bootstrap which is a CSS and JavaScript framework really to control visuals so let's have a look at bootstrap for so you could read through the introduction here so if we just look at the dependencies that bootstrap has that you can see that there are some JavaScript dependencies we don't want to actually use any JavaScript any bootstrap JavaScript that is as you can see bootstrap has a dependency of jQuery we don't want to mix jQuery up with a view so we're not actually going to rely on any of the bootstrap jQuery instead we're just going to use the CSS now we could just copy this link here and insert it directly into index.html and insert that up here so that's one way of installing it but what I actually want to do is install the SAS version of bootstrap this way we can modify it easily so to do that I've set up custom underscore custom that s CSS and I can use this I can say imports a Lipson and then I'm gonna look in the bootstrap folder within my node modules and then I'm gonna look in s CSS and I want to import bootstrap from there so I'm importing bootstrap dot s CSS and then I just need to import custom so sup let's get these imports mixed up actually so it's got an app before it so I'm gonna import custom into here and notice I can omit the underscore there and then I need to import custom sorry I need to import mein into my application and I'm gonna do it in the main entry points my application main dock jeaious and check this out this is really nice so so far you've just seen me import JavaScript to my application but I can also do this I can omit the variable name because I don't need a variable name here and I can say grab for me after the SSS directory a CSS directory main dot CSS and if it all has gone well it should put it in for me so let's just check that has indeed happened so my horse an app so you're not gonna see too much but you can see the font typeface has changed there the nice thing about using sass is I could change any variable I like and it's a look whether variables are I'll show you where the variables are actually it's probably easier if I just show you so if I go to node modules and I go to bootstrap and let's see if I go to distribution if I get to SATs even and I bring out the variables double click on variables here any one of these variables I can override so you see this default this is almost like a fullback value so let's say for instance let's look at body so I want to change the body color I could do this and I'll show you I wonder if this will work so I could do this body color black save that come back to my app and nothing that's always happened towards getting on here let's just have a look at the variables here oh it's body BG I believe let's see if body BG body color is a text body BG a shoe is the background color so let's try this out there we go so you can see instantly I've updated the look and feel of my app so you can modify all of those variables I don't often use bootstrap but there seems like primary secondary tertiary colors you can indefinitely modify bootstrap to fit your needs so quite often you don't even have to write any of your own as CSS or CSS which is really nice okay so that is that that's done so let's get rid of that and that is pretty much all we need to do so we are now ready to start building our application so do make sure you got to this stage also think about how playing around with some of the bootstrap variables have a little play around with changing some things in the app but we're now ready to go and we're going to dive in in the next section and we're gonna install sorry we're not gonna install it we've already installed Axios but we're gonna consume the brewery's api so that's gonna be really interesting okay so before we consumed the API let's think a little bit about how our application is going to be laid out so remember we have imported bootstrap the bootstrap a SAS library so we can use all of those powerful layout features so the first thing I'm going to do is within app dot view I'm going to wrap my entire application which is currently wrapped in a div with an ID of app I'm going to wrap that in a container fluent it's gonna be a class so class container fluid and this wraps my entire application I can also give app level styles here as well and also remember we have a main dot sass file where we could also put app level styles cool but for now I'm just going to delete these styles here because I don't need them right now next I'm going to open up brew dot view and notice here I forgot to update the name so I'm going to update the name of this component to brew that was a slight oversight so do update that I'm going to come up to the template here I'm gonna remove the h1 here I'm gonna remove this div as well so I've got a container fluid wrapping the entire application I'm then going to set up another container here and I'll be using Emmet which is the browser snippet plug-in which you can download it's just gonna speed things up a little bit for me so I want the container within the container I want a row I'm gonna close off of a comment sorry its dot row so that set up a container and it's also set up a row word for me within the row I want a div which is going to take up all 12 columns of our grit so that's gonna be a coal 12 grid oh my lord I can type this morning I'm we're gonna have an h1 and we're just going to call it breweries list for now cool and that's really nice bootstrap as it gives us the option to have a class and all we have to do to align our Tech Center is this Tech Center so let's just check out that this is all working so it is indeed so coming back here we have our breweries list it's aligned to the center let's add a different style to it so I'm gonna say text you've got text info here and that changes the color so it looks a little nicer you can explore the documentation for bootstrap to see what you can apply okay so I've got the Col 12 I've got my heading that goes right across the top I've got this container here beneath this I want another row within this row I want two columns so one column on the left and one column on the right so the column on the left is going to hold a list of my breweries and the column on the right is going to hold my map that we're gonna implement later so remember a row is 12 columns in total so this means you should be now kind of understanding that we want a div the Col six and we want two of those divs there we go okay so for now let's just put in here h2 left and an h2 right okay so let's save that and check that it is all okay so yeah we've got this on the left and right we could say Tech Center here class Tech Center just so we know what's going on let's just see if that updates that's right it hasn't updated but see what's happening here so div class call six I see what's happening so we're missing the - there look okay left and we've got the right so this is our basic layout we also need some styling to place each brewery on so Twitter bootstrap comes with a lot of components the one I'm interested in is the cards so you can search from here and we're gonna place each brewery in its own card there's lots of different cards that you can use and you can just paste this straight into your template but we're going to use we are going to use this kind of list group here which is fine for us so I can get rid of this now I don't need this anymore so don't need this h2 anymore so that's pesos less Ruben I'm also gonna want to apply some custom styling to this less route so I'm gonna add a CSS class called brew list to my to my cul six and let's just check that that laid out properly my awesome app okay so that's looking pretty good you've noticed in the demonstration of the app of the beginning we have this hover effect and it's a final thing we need to do before we put in the breweries is set up that hover effect on the brew list so let's go ahead and do that now so coming down to my Styles down the bottom here I'm gonna get rid of these existing styles and I want to tell you that I'm using CSS now you don't need to use CSS technically in your components I just want to show you how it can be used in fact most of time sorry at SAS you don't always need to use SAS the reason being is our components are very common but compartmentalised anyway so it's not a huge amount of benefit I wanted to show you how it can be used so I have to attach this language attribute blank equals SAS as CSS to my style tag I can now use a CSS and everybody should be fairly familiar with that so I brew list is a class I set up I'm gonna set up a few things firstly I want the overflow Y to be a scrollbar so I don't want the list to get increasingly long very go finally don't I want the height to be basically the full screen and I'm gonna use the view height the view height measurement it's our hundred will be full screen ninety-five will be 95 percent of the screen that's pretty handy and then within each within the brew list we have these list items we could add a class to them but I am just gonna say in the brew list we have list items and we want to attach a hover effect to them so we use the CSS pseudo class hover and we will set the background color to dark gray cool let's just check that has updated there we go so we won't see the scroll yet because we've not got enough items in the list but this is not going to take up more than a house than the whole screen and it's going to allow me to scroll down when I've got many breweries in the list so that is looking good so that's our CSS styling done so let's now pull in our breweries okay so we are now ready to consume our breweries API and display our breweries in that nice list that we have created so if you go to open brewery DB org there is this free API league news where you can grab a list of American breweries by querying this API endpoint now in order to construct a get request you can literally paste it into your browser so when it browser visit so when a browser client visits a website issues that get requests so this should work so you can see here I get a list of breweries retired you can see that breweries are within an array so this is what we want to work with within our application so I've copied the API endpoint are gonna come back here to my application for now I'm just going to put a comment in and post it in here just below my script tag so let's consider what we need to do so we need to at some point make a call to the breweries API we then need to assign the resulting data to the component and we need to display that component within our template sorry we need to display that data rather within our template so how would we go about doing that firstly recall earlier we could pass information into our application via this idea of prop so information will be passed down for a parent component to a child component via this idea of props so props are passed down to components by pair components we do not want any we don't want any props for this particular component at the moment at least there is also another feature of view components called data rupture we personally like this so data returns a JavaScript object literal and hope you remember an object literal just looks like this it could be this it could be name equals Joe so it's literally just a name value pair and this gets returned from our data function so this is a data property and it has attached to an anonymous function that gets returned and I could do something like this message hello and within our templates we can access these data items in the same way that we would access props so it's C double mustache styling and then it's message and then we also have one called no as you can see here hello world Joe so we have these data items that we can attach to our component and I like to look at them as a way to kind of explain what our components going to look like so it describes what's known as in JavaScript the state of our component what state can it have what information can exist within it so obviously we don't need name we don't need message I can get rid of those but what we will need is a list of breweries and the breweries are gonna be represented as an array that's how we represent lists within JavaScript so we are going to set up a list of breweries and they are going to be empty to begin with because we don't have any breweries yet we have not consumed the API ok so we've got a empty list currently of breweries but how do we populate that so at some point when the component is loaded we need to query the API and assign the returning data to this array here now view has a number of what are known as lifestyle lifecycle hooks lifestyle hooks are hooks that you can hook onto as they sound like so you could hook onto them and you could run a function when certain events happen in a component life cycle so I've got them up here so there's different types of hooks such as before update updated before mount but what we want is mounted so this is when the component has mounted so I'll show you how we come to that so this is really useful it's really useful to know that these lifecycle hooks exist you can also check out the lifecycle diagram to see the lifecycle all of a component and you can hook onto any stage of that lifecycle which is really nice and this is how we do it so we're going to say when the app is mounted we want a function to run and for now it's just going to log to the console mounted okay so this seems like the perfect place when the console successfully mounted to make our API call so let's pull up developer tools check out console and indeed it has mounted there is some there is some warnings that we've got here that's not too much of a problem right now you can sort those out later on cool so we have our function mounted and this is where we're gonna make our cool before we do that we need to import our API library or our HTTP library rather so we're gonna import actually us from actually our said you should have installed this earlier and we have URL that we're going to query up here so access really simplifies the process of making HTTP requests we can just say Axios get to construct a get request if you want to just contract a post request you could do that so Axios dots gets and then we're gonna pass in our URL that this returns a promise which allows me then to call a then method on the returning promise so you could look up promises but there a way to deal with async requests now you might think you could do something like this this dot bruise equals axia still get that won't work because Axios returns a promise it doesn't return a resolved promise with data so to resolve the promise you have to run the then method on the promise and this takes in an anonymous function and I can use the echo script six big arrow function for this to make things a little bit more elegant so this takes in an anonymous function which passes the data into a parameter on that function I'm going to use R to represent the data so let's just do console.log see what we get here what's this actually so property name is not defined on the instance but reference to rin render okay so that's from reference atop there we can have a look at that so you need to get rid of these so you see that V is basically saying we're referencing name and message but it doesn't exist on the properties or the data of that class so let's get rid of that okay so here is the response from Axios so she could say as you can see it doesn't just pass back the raw data that raw data doesn't xizt on the data property it also has about things like headers and some request information things like status it was a successful to status at 200 is successful so we just want to access the data part of that result and there we go now we've access to just the data and we can see we have 19 elements in our array there so we have 19 breweries and you can have a look at the breweries and you have things like Bureau type you have a city that's in country you have things like state which is the state it's in so these are all bits of information you have a website URL so these are all bits of information that you can access just before we go ahead and display this on our list I just want to show you this so the application is compiled down to a single javascript file so i'll show you very quickly so if i go to network you can see this single javascript file is is loaded in but when we're in development node we have this source map and the source map maps parts of that single file back to our original pieces of our application so if I click here brew dot view you can see it doesn't just pull up the big app Gaius file which is massive and it is there it brings up a representation of my individual component so that's super handy for debugging I could do things like this I can place a debugger tag in there and I can do stuff like this refresh the page as you can see it now stops here so it's super handy for debugging once I'm in this part of the program or is it with our is within scope so I can have a look at what's in the brewery's how do I map through a brewery so I can really experiment with my application nicely okay so let's come back to our code so remember we set up this data item Bruges and we can access it from within our component like this this stop Bruges and it's gonna cool our dark data ok so we now should be able to display our breweries on the screen so for now I'm just going to dump them here I will do it like this so let's check that this has laid out ah this is quite interesting so I still got this breakpoint in you could see breweries are there but they are initiated currently to the empty array because this request has not finalized yet so let's see when that does come through if I can just continue through leave that so try and remove this and let's refresh this room ah interesting so we've got a buck breweries are not getting assigned to this brew so let's have a look ok so you can see I've got a typo here so I said this got brew when it should be this dot brews there we go so I now have this ArrayList of breweries this isn't obviously the nicest display so I want a way of displaying this on my HTML template that obviously resembles a bootstrap card for each brewery now we need a way of iterating through a list and luckily view comes with a number of what's known as directives so directives are a way of dynamically manipulating the Dom and displaying data based on the state of the component so there's a whole list of directives that you can use so you have custom directives and also directives that you can use the things like V if and this could react to a data attribute called scene and it shows this text if scene resolves to true but we want to use one called four so four is another directive which I'll just search for up here v4 by the way the search on the view documentation is fantastic I don't know if you remember back in the day when you used to search on websites you could pretty much guarantee this search bar would return nothing useful but view actually uses an elastic search implementation called algo Lea which is actually you can access for free and it is really well organized and intuitive so this is exactly what we want we want this v4 so it allows us to iterate through the properties of a object so it looks like this it allows me to set up a for loop that you're probably familiar with through programming but what's really nice about this is the for loop exists within our HTML so let's have a look at how we would do this so if you think about it when we iterate through we want to set up a separate list item for each brewery so I'm just gonna have a single list item to begin with I got a place to class down here and this is just the opening and closing section of the opening tag I like to lay things out like this because it makes my life a little bit easier okay so this is what we need to do we need to say V for brew in brews so this could be anything but it's just a singular representation of each item in our list of breweries Sophie for brew in Bruce okay so this is fine then we can access each individual brewery like this so for now I'm just gonna sprint the screen each brewery i'ma check that it is working okay so we get this instance here remember I've got this scrollable feature that is fine but we don't want all this information all we want is the brewery name and the brewery state so we have access to the brewery name and we also have access to the state which is here Alabama this one okay so brew dot name and just look how eases is if you were to do this in JavaScript pure JavaScript that is it will be a little bit harder I think state and I'm separating that by a colon so anything outside of these curly brackets is just standard HTML that you're all familiar with that's fine that's much better cool that's looking good I'm gonna get rid of this so I copied this in from bootstrap that style width 18 REM I don't want that I want this to take up the entire six columns so I'm gonna get rid of that just a little bit much better okay so we have a slight issue we have a complaint here so its own element iteration is expected to have a V bind key so lots of different frameworks like this require some sort of key in order to track each list item I don't want to rely on the IDS that the brewery is passed back to me so what I can do is I can tell view to track for me the index of each brewery now let's just see what this does I'm gonna place the index here so I enclose the opening part of this argument within parentheses and I place in a second argument called index and I'm just going to show you what this is so you can see it is actually just the array position so if I go right click inspect and I've installed the view browser extension which is really handy you guys should install it it's a free Chrome extension and I click on brewery's you can see 0 is my first brewery which corresponds to this which is the index and within it I have this Avondale brewing so that's what this is what that does so it allows us to set up an index and that will be useful later on and then we can solve this problem so what's it asking us to do it's saying V bind key ok that's fine so we could do this so we can do V bind key equals index and that solves that issue and this is also your first introduction to V bind we can bind various bits of data to HTML elements and view directives and we use the V bind to do it we can also lop off the V bind and just use the shorthand double dot which we'll be using in future okay so that's it just clarify what's going on before we wrap up this part of the tutorial we are waiting for the component to mount when the component has mounted we are making an Axios call to the open brewery dB we are signing the results of that call to a data property that we've defined on our component called brews we are then using the feet v4 directive here to iterate for our breweries and then we display brewery within a contact card or a cart and in order to track that and down the line you'll see how this is useful we are assigning an index and binding that index to rv4 directive using the bind property here we could also do the bind but this is a shorthand version cool so that's that wrapped up in the next session we are going to refactor this a little bit and then we are going to start looking at our mapping okay before we go about integrating the map into our application I think at this stage it's worth us refactoring our applications so far so refactoring is the process of going through and tidying up your code and more importantly making the architecture of our application better so I'm just going to come across here to the View j/s documentation so there's this whole article on organizing components that you can have a look at and it's showing here a typical app infrastructure even where we have this route components as app view you have sub components here and that sub components can have their own child components as well so the moment we've only got this one route component which is app dot view and then our Bruges component here which is going to get very large which we don't want so it makes sense that this stage to think okay so the list can live in a separate component by itself and the map can also live in a separate component bone cells they kind of require their own distinct functionalities and in that way we are reducing the complexity of our Bru's component so our Bru's component rather than think about display logic literally just lays out the kind of larger look of our application so let's go ahead and do that so you can see bruise list is being displayed in this card I don't want to control the column size within a sub component I think the parent component should do that so we need to move this class down to here and we need to check that that doesn't affect our layout or hover which it doesn't so I then want to get rid of this chunk of code and I'm going to copy it and delete it and I want to place it in a brew list component that will be inserted here okay so let's go ahead and create that now I have a snippet installed on webstorm which allows me to create a component a view component but you can just create one manually that's absolutely fine brew list so this is automatically called brew list view has a template and in this template we are going to paste in the code that was originally in our brew component so we've got we've got our components called brew less you know so I made a typo there I've put the list the cup of the eye as a capital I unless I'm just gonna read the factor and retains out there so the component is always named the same as the file so I need to update that okay let's see what we've got here so we need to import this brew list component so we can actually use it so easy to say import brew list from current directory through list dot view dot view on the end there next we need to grab the styling that was applied to the view list sorry which was applied to the list of breweries within this component that list is no longer here so these Styles become redundant so we can take them out and we're gonna place them in brew list here and remember you have to set the language equal to s CSS if you are using sass so this I'm just gonna lay that out quickly there we now can within breweries or within brews view we can use the brew list and we're gonna place it here and it looks like this I just use a self-closing tag there okay so already things starting to look a little bit cleaner I've removed a whole chunk of logic from within my application but let's see if that this actually works so coming back to here we've got an issue here okay I see what happens here it's saying I've done the import twice I didn't actually even noticed oh yes here we go let's get rid of that there okay okay so our list as you can see is loading in but there's no data so let's have a quick look at what's happening here so we've got this loop here which is trying to access brews however a child component cannot access data on a parent component and this is really good practice because a child component needs to be decoupled as much as possible from its parent component we need to be able to move this around our application easily it shouldn't be tightly tied to the parent component so we need to pass data down and this is quite common so you've got this idea of a component tree and view and data gets passed from parent components down to child components generally speaking we normally have a one-way flow of data so we have a one-way flow of data from the parent down to the child and that's considered good practice and it creates these loosely coupled components which we can move around and place wherever we like in this application or indeed any other application that we go on to make so how do we pass information down so one of the ways of doing this is by using this props component which you've seen briefly before this takes an object and then it go takes a list of properties within that object so we are going to take one called bruise and we can assign a type to it so it is type checked of a raise sorry of array so this can now receive brew so can now receive brews in the form of a property and we have to pass it in from the parent component now because we are dynamically grabbing the value of breweries so dynamically grabbing that from the API on Mount and assigning it to our brew components we need to use the V bind to pass the property in which looks like this V bind brews and we can omit the V bind and just use the shorthand notation which is as up is exactly the same and then we can pass in bruges so let's just check so brews our data item they are populated by this API call this doc brew is equals R beta we are then passing brews in to the property of brew list which is consumed by using this props attribute here and we defined on it a bruise property which is going to be of type array so fair bit going on there but hopefully it makes sense if not just go back and forth and have a look at how this relation work relationship works between the two components so let's have a look so we now have our breweries list back so finally we need another component so make sense to have our map in its own separate component and we're going to put it on the right hand side so insert insert map yeah so let's go ahead and create that in the same way that we created our brew list we are gonna create a brew map and this will be called up I need to go no I'm gonna just leave that there I need to do a new view component and it's gonna be called brew map and that is grated there it's brewed matte brew map view for now I'm not gonna play some app in there I'm just gonna have a div with a h2 in it and I'm gonna call that map okay there we go that's fine for now I'm not going to take in and any properties yet we'll pass in some properties later on and then I'm just going to import and use that and then I can use it up here so brew map you know what came up with that some weirdness is going on here where it's duplicating this I don't know why that's happening I've been let's get rid of that and just check the map that does indeed come in and our map component is now included in to our breweries component so to summarize we have our breweries component and then we have two sub components a brew list and a brew map those sub components are known as child components and we can pass as we've seen in this component here data down from the parent to the child component so let's go out now go ahead and probably do the most complex part of this application but believe me it's not too scary we're gonna set up the map itself right so we are now ready to add the map to our application so we are going to be using leaflet which is a Java Script mapping library which is built on top of Open Street Map which provides mapping data for free the thing is so we want a way of combining leaflet with our view application so we are going to use a view plug-in called view to maps which I'm going to pull up here sorry it's called a view to leaflet rather and it's a NPM package called view to leaflet it seems reasonably popular and it's built on top of the leaflet library and it allows us to easily bind leaflet to our view application instance so looking here we've got documentation to a go to the documentation and let's click the QuickStart guide here which seems like a good place to start okay tutto firstly it says install view - leaflet and this will automatically install as well the dependencies of this library which are gonna be leaflet as one so it's gonna install the leaflet library for us as well okay so in npm install view - leaflet - save and so what's going on let's just go down and see what we could do so we do not want to use its system-wide we only want to use it on a local component so it's saying we have to import this into our local component but firstly it's saying in the entry point here main key is we have to import L from view to leaflet so this is effectively the leaflet library and we also have to import the CSS so let's do that so I'm gonna open up 9j s which is which is here and i'm just gonna see where that imports i'm gonna pull that right at the top above my view application i think that's fine okay let's see what need to do next it looks like there's some issue with the library to resolve this issue we need to do this so it looks like it's something with the icons i don't know 100 cent what that is but let's paste it in bang so i've pasted that in there that should be fine cool okay so i noticed that there was a jsfiddle example on the MPM package page here so it says just fiddle if you want to hack around here with jazz fiddle click here to get started okay so this seems to work so let's see what we've got here says a data component here so we're just gonna grab these before we do that we need to import these elements all these components into our our component so let's go and I'm gonna open this up in a new tab then I'm gonna go back so here I'm gonna go back to the documentation go back to the quick start guide and it tells me how to import those elements here so I'm gonna do that so import L map L tire al marker from view to leaflet and notice it's within these curly brackets these are not default exports their singular exports and I'm importing each one so I can import any part of the library that I need which is really nice so let's go back to brew dot map and let's import them remember I also have to tell the component it's using other components so I'm going to do that here ok so let's look what else we need to do so we need to describe the state of our component and we'll remember we do that using this data function that is going to return you need to make sure we put comma here to separate the main value pairs it is gonna return an object literal and let's see what values it's gonna have on it it's gonna have these values here a point of no notice how these guys have admitted this bit here and they've just called the function data this is kind of shorthand it's a shorthand way of it's a shorthand way of achieving this I actually like using a shorthand way but I just fought for the sake of a bonus and understandability will just do it this way but that's exactly the same as this okay so we've got some various nature attributes here we have Zoom Center URL attribution and marker so they're the map attributes that we need the URL is a URL to a tile mapping service at the moment we're just using Open Street Map but later on we'll update that to a better provider cool okay wait so let's just see what we need to do right so we need to insert the map here so L map is our components that were importing from the view to view to leaflet library so let's just paste that in before I do that I want to tidy this up a little bit so I wanted to set up a div dot row I'm gonna apply map class to it there as well just do this here down here I want to set up a map to a view height of 95 just so it takes up the page width in here I'm gonna have my map and that should work fingers crossed I always get this kind of gut feeling it's not going to work so let's have a look I've amazed if it does actually work first time and it works first time so we have our map here so that's awesome so I pull in my map it's rendering this single marker so how is this marker picked up so the marker is here so we have this our marker and you can see what dynamically assigning to it values so we have here and I'll show you actually work so we have the L library that we've imported globally which you can see with imported it here and this just creates a latitude and longitude for us and then our mark again has a latitude and longitude and we can play around with things like this so we can have uh let's see zoom 20 what does that like I've no idea zooms in a little bit more so this mapping libraries fairly detailed but we want something a little bit more sophisticated so that's what we're updating in the next part and we will also start adding up breweries to the map ok so my understanding of mapping is OpenStreetMap provides the geo data we then have a tile provider which is denoted by this URL here so the moment we're using Open Street Map now it's not advisable to use this tile provider for anything but the most simple of testing so let's grab a better tile provider so if i go to google and i google for leaflet j/s it's gonna bring up the leaflet library so this is in fact the library were using but we've got this view plug-in that's sitting on top of it which helps us integrate it nicely into our application let's click on tutorials and QuickStart guide if I scroll down there is a list of tile providers down the bottom here and I'm going to be using Thunder forest I've tried a couple of these I've tried map books I found thunder forest is the easiest to get working so let's just click on that I'm gonna you're gonna need to create a new account but I'm just gonna log in there we go so I've logged in and it provides me with a API key down here more importantly it provides me with some tile URLs and I'm just gonna use transport but there are different types of map rendering so I can assign just by changing these URLs I guess it's a little bit the strange concept so I just paste that URL into here there we go so I've got my API key there and then the URL here so when you set up an account you have access to this straightaway it's pretty it's pretty straightforward so let's come back to my app I should see a slightly different rendering now so the rendering has changed although it's not entirely obvious but you can see it's now black and I it's over France but I have these like transport tie like these rows of these which is quite nice you can see I could see the roads in a bit more detail let's see what other types of maps we have so you could change it to Pioneer I've no idea what that is but let's have a look at what it is so you can play around with all of this as well so let's see what this might look like as you can see we've got a completely different rendering of our map so you can play around with different renderings and just see what those tile layers look like but for now I think Transport is fine for our needs okay so those we'll set up we have our tile provider we're using Thunder forest we're now ready to pass in the breweries so we could display them on our map okay so we're ready to feed our breweries into our maps that we can display their location so if you recall the breweries are actually consumed Virant API which is referenced in brewed view so the mountain function we are using Axios to get hold of the breweries and we're assigning them to the brew component and you can see here this dot brews is gonna equal to the resulting data of this API call so you maybe remember we're already passing this data down to the brew list so it goes without saying we need to do the same map so bruised so you're really seeing now how data filters down through components so bruise is gonna equal bruise and then I'm gonna open up my brew map and I have to add that as a property so here's my component declaration I'm gonna add hair props and I'm gonna add to it bruise and this is gonna be of type array excellent so I now should be able to access this on the component template so if I type bruise here I can see that my breweries do indeed come up and they're feeding down from my brew component so you can see here as you know this is an array of brewery so we can iterate through this you've already seen us do that here but we're gonna need to access this here the latitude and longitude but this isn't necessarily in the format that we want we want it so at the moment we've got this marker here and we're passing in the latitude and longitude in this marker property and you can see here walk down here rather we're using this owl library in order to set the latitude and longitude in a leaflet format in case you're wondering where L is coming from here is our library and it is basically the view to leaflet library and it's exposing this function on leaflet that formats the latitude and longitude for us so it can be displayed on a map so we want to have access so if I come back to brew map we want to have access to this on our template when we iterate through the breweries in order to format the latitude and longitude so whenever we want to interact with a function from within our template we need to set up what's known as a method and it looks like this so I'm going to come down here so after components I'm gonna have an attribute called methods and these are methods so I can easily interact with from within my template so I'm going to make one called lat/long and this is gonna be a function that takes in the latitude and longitude and it is simply going to return l dot lat long lat and longitude so all this really is is a wrapper around the lat/long function that is available to us via this view to library so I'm exposing it to the template and this is what this method does here okay so let's come up to the top here so we've already got this marker here but I want to turn this into a loop that loops through all the brewery so I'm just gonna do that now so you remember we've used a loop before and I'm gonna make this just a little easier to read because it's a few bits of information we need to put in here so what I'm gonna do is I am going to set up a V for brew in brews so that's gonna loop through my breweries and I'm also gonna set up an index so remember the index just tracks the array position and I'm just gonna V bind the key so I'm gonna be buying the key and I'm gonna make that index and that's just to stop us from getting an error and the key is what we use to track the loop so this is where things get a little bit interesting so before you saw us put information within the loop and that would make sense if you're from a programming background so we're doing things like this brew name and we're replacing that kind of within the loop however you can also place information from within each brew instance within kind of the opening loop HTML tag if that makes sense so within our marker so what we want to do is we want to set the latitude and longitude but remember it is on Bruce in fact firstly we need to actually call our function down here so a lat/long function which we have access to that long and then I have to pass in my latitude first so I'm gonna say brew dot latitude that's outside there and Rho dot long-long get I think that's ace but let me double check it I think that's how you spell it actually I'll get sued so there we go let's just pacer in there let me just make sure I spelled latitude right I don't do much mapping so I think I've spelt it wrong yes I have smelt it wrong there we go it's a little bit better okay so let's get rid of bruise from up here and just check that our markers do display on the map and we don't get any errors so I'm just gonna inspect just a check that I've got nothing I've got some errors coming out the console here let's see what we have here I don't know that is not very property lapped of No okay so let's just double check let's see what's happening here so I'm gonna zoom right out because remember all of our breweries are in America okay so yes they are being added to the map so that's interesting right so I don't know what that error is they're probably errors that were there before so keep an eye on that so my breweries are being displayed on the map which is awesome so the reason why if you remember I called it the Arizona breweries list is because while there are breweries across the country the vast majority are in these two locations so one is Arizona I don't know even those where is this ah the other is there's a few in Alabama there's some in Arkansas but the vast majority seem to be in Arizona I don't know why I don't know if there's a good beer scene there so what we want to do is we want to just filter the Arizona breweries and then what we also want to do is focus the map just on Arizona and then finally we're going to add in our map markers to turn them from these kind of blue markers into beers so into beer custom map markers so hopefully you've got this display now and then the next part of this we're going to filter them so we just see Arizona breweries and then finally we're gonna add our custom map markers I'm also gonna add this really nice functionality when you hover over a brewery it's specific marker increases in size so let's get that done in the next section okay so we want a way we're gonna filter out the breweries that we get back from the API so they just include those breweries that are in Arizona now as we're using this component type architecture it's very easy for us to do this and what's more is these changes will update throughout our application so the Maps M will receive a filtered list of breweries and the breweries list will also receive a filtered list of breweries I'm just going to show you how we do this so down here we are getting data from the API and we can use this at my script six filter function and it looks like this and it takes in a nother function which is going to set the filtering criteria so this is in effect going to iterate through every element in our array and it allows us to make a comparison based on some condition in here and I'm going to use atmosphere up six function and I'm going to use it on a single line so this is an arrow function I'm going to use it on a single line so it immediately returns whatever value.i place to the right of the arrow and we're gonna save our state equals Arizona and this is just a shorthand function that you can look up so we're saying our dot state equals Arizona and that should filter our breweries list as you can see now we only have breweries in Arizona so to see how quick that is and that updates across our application and so our map at the moment is currently hovering over France we do not want then of course so we need some way of reporting latitude and longitude displaying it to the screen and then having a decent starting position so I'll show you how we do that now in maps so we're gonna go to brew map and you can see here we have a center and we have a zoom and we want to chat track when that changes and what we can use is we can use the update event in view so we can say this at update zoom and then we can run a method on our controller which we haven't defined yet or on our component even that we haven't defined yet called zoom update and then we're gonna have at update and you've probably guessed center equals Center update we don't need that and then we can display up here in an h2 center is and I'm gonna create a property called current center and zoom is current current zoom so what this will do here is whenever this changes so whenever the zoom property changes on this component it will fire this callback and the callback is linked to a function called zoom update and Center update so we just need to define those and we also need to define the data attributes current center and current zoom so I'll do that down here first so current center start with it's going to be obviously the same as a default center current zoom is to start with going to be the 20 which is the same as the existing zoom okay so we let's define our methods so current current Center in fact it's actually called center Center update and it's gonna take in function wave Center in it so this actually passes in Center Art of Manliness updates that's interesting and it's gonna set this current Center equal to Center and we need to do the same thing for zoom update and this is gonna pass in the zoom and we just simply need to set this to this current zoom equal to zoom so this is really cool so this has application beyond what I'm showing you now that probably simpler ways of doing this but this has application because if you think about it being able to react to events and update the state of our controller based on those events is quite powerful so you could do things like if someone zooms over a certain area on a map you could show him further bits of information you could grab the weather about that area some news about that area so you can kind of pull in different bits of data based on actions that happen so that in itself is very powerful so I think we've done everything we need to do now so we should be able to see where the current center and current zoom is so let's check out our map cool this seems to be working so you can see that updates as I move across my latitude and longitude also changes so let's just zoom to the position that we want the map in so we want it over Arizona that's about fine so about there looks good to me so we have last year longitude which we can now grab from here and let's place it into here and I'm also gonna update current Center and zoom is gonna be six excellent so we can get rid of this now we only had it there for testing purposes and I also wanted to introduce to you the power of these event listeners so we can look at properties changing on components and we can react based on those components so let's check out this looks like looks like the wrong location to me hello stuff we just need to adjust the zoom out a little bit I think I don't know what that is let's make that 10 okay and let's pull the zoom back up up here and just see what's going on remind me tomorrow okay so zoom is 18 that interesting zoom out so it looks like we're on the right latitude and longitude zoom is six it looks right to me so current zoom let's just check what we're doing so zoom zoom is here so that's that's okay so current zoom I know what I've done I haven't set it there I said current soon but I haven't set the zoom so zoom is a property that gets passed into the map and I should be okay now since Trevor it's okay aha it's now working so you probably saw me make that mistake and you've already corrected it by now so now we can get rid of this okay so I'll save that I'm now gonna do our very final thing which is change the map marker and finally do the hover over and change the map marker size based on that so the final few things we're gonna do so we're nearly there well done if you've got this far okay so we're now ready to create our custom map markers so the first thing that I have done when this video wasn't running is I search from the internet and I found this rather touching beer dot PNG icon so you can find your own icon and I just placed it in this assets folder here the next thing I want to do is I want to up the update the map with my custom markers so in order to do that I am going to import the l ike on class sorry component even so the L icon component from the view to leaflet library I need to make sure that I tell this existing component that it is indeed gonna be using the L icon component otherwise it will not work so I'm just gonna do that there neck Sakai need to do is I need to import my beer I'm going to do that now and it's going to look like this so import and I gotta call it beer because I'm using webpack I can import non JavaScript assets into my application which is very nice so I'm gonna import beer from assets and it is called beer dot PNG and they're going to attach a few properties to my data object here the first one is gonna be my icon which is going to be beer that we just imported and I'm gonna have an icon size and to start with we're gonna give it an array of 15 by 15 pixels excellent now we just need to use the L icon component within our marker here and it looks like this L icon you can see it's available to us and we need to bind to it the icon size which is gonna be ICANN which is going to icon size which is going to equal icon size and also we need to bind to it the icon URL which is going to equal okay and that should be URL there and if we describe down here again just to remind you we have the icon which is beer which gets bound to the icon URL and then we have the icon size which is just this array so that should work so let's refresh our browser and have a look boom so as you can see we now have our beers instead of our standard map markers so that's pretty nice that's a really nice touch the final thing we want to do is when we hover over this when we hover over a brewery corresponding to a specific location we want the beer to become bigger so we want the icon size to adjust based on an event happening in another component so the final part that's what we do and then we finish this tutorial okay so we finally come to the part where we need to enlarge these markers based on a hover event occurring on a brewery here so let's think about what we've got here so on the outside of our component here and here we have the Bruges component and the Bruges component is a parent component of Bruges list and also brew map which is this component here so so far you've seen the parent component passing data down to brew list and brew map so you have this one-way flow of data however we have not looked at how child components interact with parent components and the best way to do this is to omit an event so we don't directly bind data from our child to a parent component instead we broadcast an event and our parent component could hook onto that event but the child component doesn't necessarily know the state of the parent component all really care all it cares about is a hover event has occurred I'm just gonna broadcast that and anyone who wants to can then subscribe to that event so it's quite a nice programming pattern so I'm gonna show you how we do that in view so we need to come to our bruise list here and we need to add an event which will fire a function so we're going to do this so on each list item I'm going to have a apt mouse-over event and I am going to run a method on the control under the component called mouse over and I'm going to pass into it my index so I know which brewery I have the mouse over so I know which parts are not index index Ernest so I haven't defined this method yet so I'm gonna get this this error at the moment and I also have an @ mouse leave event that viewed lets me bind to and i'm going to call you guessed it Mouse leave and I'm also going to pass in the index so all we need to do is come down to our component and we need to define some methods and the first one is mouse over and this is a function which takes in an ID which is the ID not of the brewery but of the array position and so this is gonna take in and in fact it's probably better to call it index so it's gonna take in an array index position and to omit an event all we're gonna do is say this dot emit and then we're gonna name the event which is going to be called mouse over brew and I gotta send the index with that event okay next I am going to define the mouse leave method so I'm just going to do that now and this is gonna be a function and it's also gonna take in an index and I'm just gonna say this dot emit Mouse left and I need to put semicolons in there let's do that now and save that okay so within my parent component which is Brewer you are going to bind to this event so remember what the events are called mouse over brew and mouse left brew so within brewed up view where I cool the component which is here I can bind to the event at mouse over brew and I can run a method and I'm gonna run the method mouse over brew which I'm yet to the firing and I'm just gonna copy this and I'm gonna say Mouse left so they're my two events I now need to set up some methods are gonna run which I shall do down here after our mounted function so methods methods so I'm going to say mouse over brew remember it'll it's the index which I can grab for now I'm just gonna log the index to the screen console dot log index to the screen and I'm just gonna add to this and then Mouse left through function well again I'm just gonna console dot log the index and mouse left now so we could do something a little bit more interesting later on and so let's just check that this actually works okay so let's come back to brewery's list okay that's interesting so we can see the mouse over works but the mouse left is undefined so let's come back to our brew list I think I know why this is so you can see I'm not actually passing the index into this event here so let's do that now this should not be undefined so we're gonna come back and there we go those working now excellent so the final thing we need to do is react to this event and we need to pass down to the map component a different icon size when it happens and that's what we do when we wrap up to this tutorial in the next section okay so what I want to happen now is whenever these events get fired so hooked on to these events whenever they get fired we want to change the icon size of our breweries or our breweries icons if if if that's a better way to describe it okay so what I'm gonna do is I'm gonna set up a data function on my brews sorry I'm on the brews list I need to be on brew not view or I can assume it so I could Xu Ming the event here and what I need to do is I've already got a date function set up there so I need to set up a normal icon size somewhere normal icon is going to be 15 15 and my large icon for now is going to be 50 50 so the first thing I need to do is I need to somehow attach the normal icons to my brewery's list so what I can do is I can use the map function when we grab the data so let me just zoom out a little bit so you can see what's going on here so we're already filtering the data just for breweries exist in Arizona what we can then do is run a further atmosphere up 6 function on this called a map which is gonna do this so it's going to map through our breweries it's then going to add a attribute called icon size it doesn't currently exist and it's gonna add this normal icon to it so this normal icon is our normal icon size and then we want to return the entire record so all we're doing here is we're iterating through our breweries and we're adding an icon size to our brewery record so let's just double check that that does indeed do that so let's go to my view browser plugin and app and check brew hair so I've got my breweries here to have 11 breweries I'm just gonna fullscreen this so you can see it a little bit better yeah you can see now I have this icon size here okay so instead of hard coding in brewed map dot view so setup hard coding my icon size into the icon I am going to do it dynamically so icon size is now going to become brew dot icon size and that shouldn't change anything here so everything's still working okay now let's see how we can react to our mouse going over a brewery so recall we actually get a index through so what I could do is something like this so I can say this dot breweries so this dot brews I can pass the index in to my array position here and then I can say dot icon size is going to equal so when the mouse is over it it's going to equal this dot large icon okay so when the mouse is over it it's gonna equal this large icon and I'm gonna do the opposite of this when the mouse leaves it so I'm gonna say let's place this on here and this is gonna be this dot okay so just watch how amazing this is so hopefully this works and you'll notice that all of my components update when the master component the part that is passing the data down amends its data so that change propagates across all of my components as you can see it is working so I just close up so you can see as we scroll over those breweries the right one enlarges which is excellent that's really nice so this pretty much ties up our application so let's just very quickly go over the finer points of this so brewery's is pulling in information it's pulling in data from the Bruges API we're then running a filter on that to filter just for breweries in Arizona we then run a map on those filter results and we add to it this icon size so we add to each brewery and icon size so this is what this does here and that feeds down to two components which are child components that we can see here where are our components brew so our two components that were using are here so brew map and brew list and brew map dynamically updates when we update the icon size within this component here and brew list communicates back up to us via these callback functions here not called that function sorry event listeners and we bind the event listener functions here as you can see I'm saying when this event fires run this method on this component so that pretty much ties up the tutorial we've covered quite a lot of stuff there's a lot to learn I imagine you're gonna have to go back and forth and change things around also I just want to guide you in the direction of the view to leaflet website for you to leaflet so this is the plugin that we were using for maps for mapping so you can go obviously to their website to gets going with their tutorial but I found the most useful learning that I did was within their git repository if you go to source components there's a number of here we go to back if you go to source examples even and then we go to source within here opponents there's a number of different examples here that are actually demonstrated on their website so you can look at them on their website and then come here and you can find out how to implement them within your application so definitely do do that so I wish you the best of luck and hopefully you found this tutorial useful

Channel: joe Appleton

Views: 15,468

Rating: 4.952569 out of 5

Keywords: Vue, Bootstrap, Leaflet, Mapping

Id: 7RfteeSQZxo

Length: 113min 7sec (6787 seconds)

Published: Fri Feb 08 2019