Adding a new page

[cool]

No.. not only simple display but with lots of additional functionality.. When the icon is clicked, I need to show a map and allow the user to place a marker on it and then save the corresponding latitude/longitude in the db.

[cool]

Thanks I am able to add a custom icon including the route. Now could you pl. let me know where (in which files) in the associated plugin I am supposed to write the logic for this route?

[cool]

//My Map Plugin: library.js
plugin.init = function(params, callback) {
	var router = params.router,
		hostMiddleware = params.middleware,
		hostControllers = params.controllers;
		
	router.get('/map', hostMiddleware.admin.buildHeader, controllers.renderMapPage);
	router.get('/api/map', controllers.renderMapPage);
	callback();
};

When I browse this URL: localhost/map

I get the error in /public/src/admin/admin.js
Line Number: 122 -- Cannot read matches property of null I debugged it and the undefined is the matches variable.

Are these routes correct?
router.get('/map', hostMiddleware.admin.buildHeader, controllers.renderMapPage);
router.get('/api/map', controllers.renderMapPage);

[PitaJ]

Yeah those should work. What is inside renderMapPage? The error you mentioned is a client-side error in the ACP, I can't think of any reason that would occur because of something you did, it's probably unrelated.

[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.

<div class="map">
<div class="row">
<div class="col-lg-9">
<ul class="nav nav-pills">
<li><a href="{config.relative_path}/map?section=a">A</a></li>
<li><a href="{config.relative_path}/map?section=b">B</a></li>
<li><a href="{config.relative_path}/map?section=c">C</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12"">
<div id="mapid" class="map"></div>
</div>
</div>
</div>

Thanks