Map & Leaflet


  1. Finished refactoring airports
  2. Render airports
  3. Map.


So we started the session with a couple of doubts I had from the book JS The good parts like recursion, so I am now starting chapter 5, really condensed. I want to understand every example, so I am testing and writing everyone of them.

Following I showed him how I have implemented the cluster option and the search functionality with Lunr, my mentor liked it but suggested a little CSS, like Cursor Pointer when passing over the results.

1. finished refactoring airports

We finished with the asynchronous function making the data from the airports file to load in an asynchronous way, so the map keeps going and you can interact with it really quick, and also if the data doesn’t load, the code doesn’t break, as it was happening before.

Now we are returning a data array with all the data from the airports inside the actual scope on the map. Before we were returning the markers.

As a result we have now a function that return us all the points from a data that are within the actual scope, the possibilities were we can use it are wider than returning only markers.

2. render airports

So we have divided every process, the map is generated in one file called map.js , the airports within the scope are generated from a file called locate_airports.js and finally to add markers to an array of points given, we are doing it in a separate file called render_airports.js.

So we were having an small problem because to generate the control, we were calling it every time this was being generated.

So the trick came when we established a variable within the scope of render_airports established to false and when we were calling the function to create layers, the first time it generates it, it was setting the value to true, so the next time, this function would exit without generating the control layers.

Here is the code:

var layersIncluded = false;

function createLayers (baseLayers) {
  if (layersIncluded) {return;};// here is the trick
  var airportsLayerGroup = L.layerGroup([markers]);
  var overAirports = {
    "Airports": airportsLayerGroup
  layersIncluded = true;
  L.control.layers(baseLayers, overAirports).addTo(map);

it seems really obvious but I think it is a cool trick.

3. Map.

So this is how we call now the asynchronous functions and we generate the airports layer with its control.

function showAirports() {
  locateAirports(map, function(error, airports) {
    // this returns an array called airports,
    // specified on the callback function.
    if (error) { // this will show the error if it brakes.
      throw error;
    //we need the previous function to have callback with the airports
    //so we can pass it to the next function to generate the markers.
    renderAirports(map, airports, baseLayers, function(error) {
      //here there is no callback returned,
      //we just want the layer to be updated.
      if (error) {
        throw error;
map.on('moveend overlayadd', showAirports);


  • Always reduce each function to the simplest .
  • Async works really great. in fact AirCrewMentor use it in almost every project.
  • AirCrewMentor uses Lodash in every project.

Common Convention

  • Files are named with words and underscore to divide them.


  • Merge the branch Locate Airports with the master
  • Async (Try examples and read the Documentation)
  • Cursor Pointer (CSS)
  • Script generate files for each airport.
  • Weight based on routes
  • Read Alex’s blog.
Thanks for your time @AirCrewMentor and your compliment.

So, I started with the bash course end of October and it’s been from December when we installed RescueTime that I have dedicated 288 h to Develop, research and learning. Probably more since the pdf application at work isn’t categorized as learning, because I don’t use it only for learning.

Our goal to become a developer is 1000 hours, and now I am somewhere between the 300 and the 400 hours and you gave me a big compliment, telling me that you were impressed by my progress and that with a project like the map, I am electable for a junior position.

So I am really pleased, because I know how difficult is to impress you, so now we have to get ready my portfolio and start looking for a junior position.

Again, thanks for all @AirCrewMentor


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s