FREELessons: 19Length: 1.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.5 Advanced Marker Organization

Previously you were able to create functions to keep track of your markers. In this lesson you’ll learn how to abstract this out to its own separate collection.

Related Links

3.5 Advanced Marker Organization

Creating all the marker managing functionality, within the Mapster library, can really clutter things up. And it also muddies the responsibility of the library, the library is really a resource of common functionality that we do with the Google Maps API. If we wanna manage a collection of objects, we should have our own construct, that knows to do that. And this is known as the single responsibility principle, and a responsibility is anything that has the tendency to change. So if you isolate the responsibility to their respective places, it makes your code much easier to maintain. So in this lesson, we're gonna focus on creating a module, that knows how to manage any type of object, and in this case we're gonna use it to manage the markers. So previously we created this add marker, remove marker, and find marker by lat function. And placing all these functions within the Mapster library, can really clutter things up. So let's go and create a new file, and we're gonna call it List.js. After our self-invoking anonymous function, we'll start declaring our module. And if you remember, we start by declaring a self-invoking anonymous function, and we store that to a variable. And then within that variable, we declare a constructor function. We'll set the prototype for the constructor function. [SOUND] And then we'll return the constructor function itself. So, now this list variable holds the constructor function, not the results of the constructor function. Then we'll create our factoring method. And now we have the boiler plate for our list module. So, using this list, we'll be able to add and remove, and find any object of any type within it. So, the list will have items within it. So, we'll create a property for that and set it to an empty array. And then we're gonna need our functions. So, we'll just create stubs for those. And we'll have one for adding. We'll have one for removing. And we'll have one for finding. [SOUND] And the adding is simple enough, it's just this.items.push, and then we push on the item. And the remove isn't much more complicated as well. We just need to get the index of the item we're trying to find, and we need to make sure that that index is not equal to negative one. And if it's not equal to negative one, then we can splice the items array. So let's go and include this script to our index.html. And back on our list, we need to set the list to the window down at the bottom. And then within Mapster, we'll import the list. So, rather than setting this.markers to an empty array, we'll create a new list. So, now down in our add marker function, rather than saying this._addMarker, we'll say, this.markers.add, and then add the marker. And then down here we can get rid of this _addMarker, and as far as the removeMarker goes, we have the same code in our list, so we can get rid of this as well. So let's go to our script.js, and then down here, let's console.log map.markers, just to see what we get after we've added the two markers. So, in our console, we see we have a list. And it has an items property with two markers in it. And if we come down here and check the prototype, we can see we have our add, find, and remove functions as well. So, in our Mapster Library, we have this function called Find Marker By Lat. And this function, would loop through all the markers, and it would return one that matched the lat we passed through as the parameter. And writing functions like this becomes a problem, because every time we wanna find a marker by a specific property, we have to create another function, so rather than doing that, we wanna create a function that can dynamically find an object by its property. So let's get rid of this function, and then we'll go into our list.js, and we'll start working on our find. So ideally we'd call find like this. [SOUND] So essentially we pass through a callback function, that returns an item as a parameter. And we check to see if that item's property, is equal to anything we want it to be. So inside our callback function, this is where we can evaluate what we want to find our object by. So we don't wanna pass through an item for find, we want to pass through a callback. So we're gonna create a variable, and we're gonna call it callbackReturn. Cuz we want to be able to store the results of the callback. And we're just going to alias the items, and then get their length, and then we're gonna create an empty array for any potential matches we may find, because we won't just find one item in certain cases, we can find multiple items that satisfy the condition. And since we're gonna be looping, we're gonna set i equal to 0 up here. So we'll begin our loop, and the first thing we'll do inside this loop, is get the results of the callback. The first parameter, is the first item that we're at in the iteration, and the second parameter, will just be that item's index. We don't need that item's index currently, but we might need it in the future. And right now there's no harm through passing it. So since the callback function evaluates a condition, it should always return a true or a false. So we'll do an if statement to see if the callback return is true. And if it's true, then we're going to push it on to our matches array. And then once we're done iterating, we're going to return the matches array. So now let's go to our mapster.js. And now we'll create a function called findby, and then we'll just call this.markers.find, and we'll pass through the callback. And then we need to make sure that we're actually going to return the value. So, we'll create a variable to store the found marker, and then we'll call map.findby, and then we'll pass through our callback function that returns the marker as the parameter, and then what we'll do is we'll go into the second marker, and provide it with an ID, and we'll set it to two. And then what we'll do, is we'll return marker down ID, is it triple, equal to two? And then we'll log found the console. So you can see that we have an array of just one marker, and if we open up that marker, it has the ID of two. So we've created our function that allows us to find a marker by any property, but what if we wanna delete that marker from that map? Well, if we go back into List, we can do the same thing. If you remember, if you need to delete something from a map, not only do you have to remove it from the array, but you have to set the map to null for that marker. And we don't wanna write that into our list, because our list is agnostic of any objects that's been passed to it. But what we can do, is we can fire off a custom function, once we've found all the matches inside the find function. So, below the loop, we could check to see if there's some type of callback, and we'll just call it action. And if there's an action, we can say action.call, we'll pass through this, and the matches. So we'll make sure to pass through this action as a parameter. And now on our Mapster, we'll create a method called removeby. And removeby will just take in a callback. So we can call find, just like how we are above. We'll pass through the callback. And then right here is where we can pass through our own custom action. So this action will return us all the matches. And in this case, those matches are markers. So we can take this markers array, and we can call for each function on it. In this for each function, is just like doing a loop, except this callback function executes for every single item, inside of the array. So for each marker inside the markers array, we can then set the marker's map to null. So, now if we go to our script,js, we can call map.removeby, and then we can pass through our callback function. And then we can return the marker that has an ID that's equal to two. And you can see on our map that, that marker was removed. And something you may have noticed, is that there's a similarity of how we're passing through callback functions, and how JavaScript passes through callback functions for the for each iterator. So if we create a random array, if we wanna iterate through this random array, we call the for each method, and this for each method, takes in a callback. And we can alert out each one of these items. [SOUND] So this concept of being able to pass through functions as parameters, is extremely powerful, because we can delay the invocation of this function, until we actually need to fire it off. So in the case of removeby and findby, rather than having to create all of these methods to find a marker by a property, you only had to create one function. And that was the find function. And once we implemented that function, we were able to use it in multiple places. We were able to find all the markers you wanted to remove, and then set them off of the map. So, in this lesson, we created our own list collection. This provided us a way to do more advanced adding, removing, and finding of our objects. And even though we're working with map markers, we created this module to work with any type of item. We pass through callback functions, so we could delay the invocation of them, and fire them off when they're needed. And as time goes on, you'll notice that we'll get more markers, added to our collection. As you can see right here, I created a loop that created random markers onto the map. And when we zoom out, they start overlapping on each other. And this amount of markers, isn't particularly useful. What would be more useful, is if we could cluster up all the markers together, when we got out to a higher zoom. So in the next lesson, we'll focus on creating these clusters.

Back to the top