Html image map not rendering properly

[DarkKnight1992]

Hi, In our application we are using Html image maps, for rendering world map but since totaljs is handling all the css, js, html its messing up the coordinates

<area shape="circle" class="maphilighted masterTooltip" title="Faroe Islands" coords="NaN,NaN,NaN">

I have tried disabling css, js, html compression and handling but its not working properly. Our config file looks like this but total is still handling all the static files.

directory-public : ../../public directory-views : ../../public allow-compile-css : false allow-compile-html : false allow-compile-js : false static-url : ../../public static-url-css : ../../public static-url-download : ../../public static-url-font : ../../public static-url-image : ../../public static-url-js : ../../public static-url-video : ../../public

Any help we will really appreciated.

[petersirka]

Hi @DarkKnight1992, can you show me your implementation of area in view?

[DarkKnight1992]

i would love to but what do you need exactly ?

[DarkKnight1992]

this is one map area all the coords are converted to NaN

[petersirka]

I need to see code before rendering. Otherwise: can you create a simple example?

[DarkKnight1992]

`

`

[DarkKnight1992]

hope this helps

[DarkKnight1992]

lemme know if this is enough, or you would need something else

[petersirka]

• download empty-project
• add your code with a problematic part
• compress it to zip
• send me it petersirka@gmail.com

BTW: I have tested <map in views and it has been rendered correctly.

[DarkKnight1992]

its happening maybe because we are using angular for front end instead total view engine ?

[petersirka]

The problem can be in Angular.... Try to look into the source-code directly whether contains NaN. Open Network tab in Web Developer Tools and check the response.

[petersirka]

BTW: recover Total.js config to default because your paths are bad.

[DarkKnight1992]

the response is correct. What do you mean the paths are bad ?

[petersirka]

Remove all bad records:

directory-public : ../../public --> BAD
directory-views : ../../public --> BAD
allow-compile-css : false
allow-compile-html : false
allow-compile-js : false
static-url : ../../public --> BAD
static-url-css : ../../public --> BAD
static-url-download : ../../public --> BAD
static-url-font : ../../public --> BAD
static-url-image : ../../public --> BAD
static-url-js : ../../public --> BAD
static-url-video : ../../public --> BAD

directory-* + static-* can't contain this phrase ../ or ./

[petersirka]

So if the response is correct the problem will be on client-side scripting.

[DarkKnight1992]

so do you mean the pubic directory has to be relative to the controller and can't be anywhere else ? But that doesn't make much sense it doesn't give the freedom to structure the application well and use babel for es6 support either. Do you mean trying to structure the backend and frontend in the different directories is a bad way to stucture the application in total js ?

[DarkKnight1992]

we are migrating the site from php to node js and everything was working fine up until now

[petersirka]

You can use own structure, but you need to keep rules. All directories start from app root so you can't use ../ or ./ because you will be outside of app root. The problem is in different OS.

// Default
directory-public    : /public/
// means --> /some/path/yourapp/public/

// If you want to use another directory in APP ROOT then use:
directory-public    : /shared/
// means --> /some/path/yourapp/shared/

// If you want to use another directory outside of APP ROOT then use:
directory-public    : ~/absolute/path/on/your/server/
// means --> /absolute/path/on/your/server/
// I don't recommend it because this paths will use packages and modules

So my recommendation:

• don't change directory structure on the server-side
• customize client-side by your needs in public directory or in virtualized app directory

[DarkKnight1992]

that's make a lot of sense lemme try that

[DarkKnight1992]

well there is another problem our backend is in src/server/debug.js and will compile to server/release.js after transpiling with babel and providing directory-public /public is considered to be at the root of debug or release is there a way to get the server root in the config file ?

[petersirka]

root is according to the location of debug.js or release.js. In other words: root is process.cwd() --> current working directory.

root can't be defined in config file because Total.js reads config from app root. I need more info for thinking.

[petersirka]

Look here maybe you'll find info:

• https://github.com/qarmazi-labs/totaljs-angular2-starter-kit
• http://maxprog.net.pl/node-js/total-js-angular2-typescript/

[DarkKnight1992]

the problem is because to the directory structure, when i implemented the code according to totaljs structure in the image maps worked fine

[DarkKnight1992]

in these examples again server can't be transpiled from es6 to es5 since node doesn't support all features of es6 as it is. This makes the use to es6 next to impossible then

[DarkKnight1992]

directory structure for development public src/server/controllers src/server/definitons src/server/views

debug.js `const options = {};

options.directory = process.cwd() + "/src/server/";

require('total.js').http('debug', options);`

config directory-public : ../../public/ allow-compile-css : false allow-compile-html : false allow-compile-js : false static-url : ../../public static-url-css : ../../public static-url-download : ../../public static-url-font : ../../public static-url-image : ../../public static-url-js : ../../public static-url-video : ../../public

[petersirka]

I don't use ES6, but if it works then OK 👍 and if no, then I don't know...

[DarkKnight1992]

total js is fine and not causing any problem it the map resize, i have fixed it now everything works great with babel and es6. Thanks for the great framework 👍

[petersirka]

Great! 👍 💯