Where do I inizialize and load a map using Sails.js?

Question

I am using Sails.js to create a website that shows a Leaflet map at the /map route, should I put the code that creates the map, sets the markers, initializes Firebase in the view or in some other file?

Right now I have a GET route at /map which loads a view:

module.exports = function(req, res) {
     res.view('pages/map/home')
};

This piece of code is currently in home.ejs in a <script> tag, but is that the right location?

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    accessToken: 'my_access_code'
}).addTo(mymap);

I'd like to separate that code and I'm not sure how. I'm also not sure how to import the npm modules since I can't do that inside the script tags?

Should I load Firebase/the map inside the request and then pass the results (the map?) to the view? It seems a little wasteful to initialize Firebase every time users make the request, is there any other way?

Answer 1

the code that creates the map, sets the markers, initializes Firebase

These go in the view, at least some of it. The client (browser) surely will need to initialize some libraries to display the map and markers, but if the library is designed for back-end use as well, you might be able to do prep on the server side using a persistent instance of whatever objects Firebase provides.

how to import the npm modules

Personally I just copy the individual files or folders I need into /assets/js, and then include them in my layout the old-fashioned way. Most node_modules that are meant for the front-end will have a dist/ folder in them containing the actual front-end files.

Should I load Firebase/the map inside the request and then pass the results (the map?) to the view? It seems a little wasteful to initialize Firebase every time users make the request, is there any other way?

If the module is designed to be used in the back end, you could initialize it in app.js. Sails is a server, not just a script -- if you initialize something and it doesn't complete its lifecycle and you don't destroy it somehow, it'll remain available. eg in your app.js:

try {
  const Firebase = require('firebase');
  Firebase.some.init.stuff();
} catch (e) { console.log(e); }

And then in your actions:

var result;
try {
  result = Firebase.usage();
} catch (e) { console.log(e); }

// and then pass result to your template