Adding a new page

cool

Thank you for your kind support, Pita.

Controllers.renderMapPage = function (req, res, next) {
//Render the templates/map.tpl
res.render('map', {});
};

Kindly help me solve it.

cool

I think admin.js is expecting a url something like this... /admin/plugin/map whereas in my case it is simply "/map" I may not be correct.

Kindly note that when I click the Map icon (whose route is /map) things work fine. But when I browse by entering this localhost/map in the browser and press Enter, it throws a client-side error in admin.js file.

PitaJ

Oh, sorry, I missed that issue. It should be hostMiddleware.buildHeader, not hostMiddleware.admin.buildHeader. Remove the admin part, as it tells the server to render map as part of the admin control panel.

cool

You are awesome. It worked. Thanks once again.

So I will place my third-party client-side JS libraries in static/lib (alngside main.js) And the system will minify/uglify them. Right?

cool

My map.tpl
<div id="mapid" class="map"></div>

My plugin.json
"scripts": [
"static/lib/main.js"
],

My main.js

  $(document).ready(function() {
requirejs(["leaflet"], function(L) {

		var map = L.map('mapid', {
			attributionControl: false
		}).setView(initialLocation, 12);

...

Error: leaflet Uncaught Error: Map container not found.

The <div id="mapid"> must be added to the DOM before calling L.map('mapid').

This jquery reaady function is called after the DOM and page (map.tpl) are loaded. But still getting error. Where am I wrong?

Kindly help me.

PitaJ

The way you have it there, it will run on every page. I'd suggest checking ajaxify.data.template.map (a boolean) before running those things.

You might try putting a debugger; statement in there before the require call and check that the map is actually in the DOM when you expect it to be.

cool

if(ajaxify.data.template.map == true) {

requirejs(["leaflet"], function(L) {

...
}

It returns undefined everytime including when I click the map icon. It returns true only when I enter this URL: localhost/map and press Enter. When it returns true, the "Error: leaflet Uncaught Error: Map container not found." is still there.

I will use the debugger; and see what it reports.

cool

Using the debugger statement indicated that the map is not in the DOM

cool

Any answers?

PitaJ

So if the map element isn't in the DOM, there's probably something wrong with your template. Check it, make sure it is correct. Check the built template in nodebb/build/public/templates to make sure it is correct.

cool

The map.tpl has just one line. And the map.tpl in the build directory is simply a replica of my map.tpl.

PitaJ

Ok, and when you go to /map directly, that is, not from another link on your site, is the map element in the source for the page?

cool

I am working on my local machine. the map div element is never there in any of the cases.

cool

Today I spent more time trying to find out the solution, mostly were hit and trials, I don't know what happened but "Error: Map Container not found" vanished somehow. And the map was in the dom.

During debugging, I found the original copy of the main.js that I copied from the demo plugin (the one suggested by Pita in the above-mentioned posts) was residing in the node_modules/map-plugin directory. I can't understand why .. it was overwritten umpteen number of times.

Anyhow so far so good. Now I have to address two issues:
a. Map is still not displayed. This is something beyond the scope of NodeBB and I have to do it of my own.

b. And when I browse the localhost/map from the URL and press enter, the boolean (the one PitaJ hinted at yesterday) is set to true and the map functionality is getting invoked. But when I click on the map icon, the map functionality is not executed. Do you have any ideas how to fix this?

Thank you for your kind support

PitaJ

So, in order to support both cold load and ajaxify, I use a pattern like the following to run scripts that need to run on a certain page:

function onLoad() {
  // in your case 'map'
  if (ajaxify.data.template.map) {
    // do stuff here
  }
}

$(document).ready(onLoad);
$(window).on('action:ajaxify.end', onLoad);

cool

Thank you. Looks like this is the right approach. I am writing map-related functionality and then only I'd be able to confirm.

I need your further guidance. In my map.tpl, I have three links, let's say, A, B, and C. In all the three cases, I want to display the map and display an input field, Search for Location. What is the right and efficient way to do this?

This piece of code is not working ... the map is not getting displayed properly, probably a css issue. I will keep you informed.

Thanks

cool

Hi

Just an update.. It is working now. Few CSS errors are there. And of course, all map-related functionality neds to be implemented.

Thanks for your kind cooperation.

cool

I have a link on a map which when clicked checks whether the user is logged in or not.

If yes, the system displays the contents of the map.

If not, it displays the message: "You don't seem to be logged in"

When the user logs in, he is taken to the Register/Login screen after successful login, the system displays the contents of the map.

How can I implement this? Could you pl. write the code outline for this?

Thanks

cool

How can I set the browser title for my map page to "Map | NodeBB"? Pl. guide.