MEAN.JS is one of the “Open-Source Full-Stack solutions” for developing MEAN applications freely available. There’s other equally acceptable solutions out there, each of them with their particularities.
MEAN applications are those that integrates MongoDB, ExpressJS, AngularJS and Node.js, and it’s a configuration that it’s being used more and more frequently in the last years. There are many options available, sometimes with very similar names (MEAN.io from Linnovate, and MEAN.JS as a community-governed project from the same creator: Amos Haviv) or technologies still in development (Angular2 is used in some generators even when it’s still in beta at the moment of writing this article). The speed in which a stack solution, generator, framework, or any other starting point for MEAN development, is released and became outdated is astonishing fast. Sometimes, even updates implies a new approach that requires the change of the structure of the code. This makes very confusing for any coder willing to start learning with the tools available.
So, getting to the point. What’s the easiest way to integrate MEAN.JS and Leaflet? In around 5 minutes, and with a little help of copy-paste, we can have a working example.
You will require a working installation of node.js. That’s out of the scope in this article, but in treehouse is easily explained. You’ll need a reboot in your machine in order to be sure that the folders are properly added to the path.
Then, we need to create a fresh copy of MEAN.JS. In this example, I will be using MEAN 0.4.2. That’s the version you should initiate if you want to be sure that my tutorial is working. I’ll ask the generator to create all the available examples. They are quite convenient in order to understand how the code should be structured.
Let’s say you create a project folder named mean-leaf. Then, you’ll need to get into that folder.
You will need a working global installation of Grunt and Bower. So, if you need to install them:
npm install -g grunt-cli
npm install -g bower
We add the angular-leaflet-directive:
bower install angular-leaflet-directive --save
And now, we use Grunt to run the application:
If you have the error “You need to have Ruby and Sass installed and in your PATH for this task to work”, just execute the following and run grunt again:
sudo gem install sass
Adding the Leaflet maps
With the previous steps, MEAN.js should be up and running. Now, we are going to integrate the Leaflet map. More examples can be found in the angular-leaflet-directive Github page, but I found the “Center example” the most appropriate for having an initial taste.
Remember that you’ll need the angular-leaflet-directive installed as mentioned above.
But that’s is not enough. We need do some modifications to the code of the controller modules/core/client/controllers/home.client.controller.js(be very careful with the indentation here, WordPress is breaking the code and it’s important):
This should be enough. Just run grunt and visit your website. If you have errors with eslint and the indentation, just edit modules/core/client/controllers/home.client.controller.js and make the modifications displayed in the console.
The result should be something like the following screenshot:
The example used for this article, and many others, are available in the angular-leaflet-directive examples gallery, and also in their Github.