I'm trying to create a solution for rentable lockers for my local swimming club. The data for each locker (roughly 1800) is generated from an SQL database and i mapped each locker room seperately. The Problem occurs, when i try to rebind my image map. I want the user to be able to flip through the years and see which locker is rented in a specific year.
To let the user have a better overview, i filled in each locker area with either red or green color, with a low opacity since the background image shows the number (name) of each locker. The tooltips show the locker room and number, the full name of the member, the last payment date, if the locker is usable and a comment field.
But when the user changes the year, and i try to set up new tooltips and possibly new colorization for each individual locker, i get the following error: "TypeError: Cannot read property '0' of null"
This error only prevents the tooltips from showing. Clicking on the area still brings the user to the correct locker, and the click event has the right data, correct year, correct member, correct payment dates and so on.
I tried several combinations of "unbind", "rebind", "set_options" but haven't been lucky.
Either i manage to update the ToolTips to the correct value, but the colors simply get applied again, which results in a bunch of black or red squares after a couple of switches (no errors thrown), or i completely reaplied the coloring and the tooltips are gone. Trying to reaply the via .attr("usemap" , "#mapId") oder .useMap = "mapId" didn't work either.
Some HTML
<img id="room0img" src="\assets\LockerLayouts\female1.PNG" usemap="#room0map" [hidden]="!visibility[0]" width="1230px">
<map name="room0map" id="room0map" [hidden]="!visibility[0]">
<area alt="365" name="365" coords="22,167,105,193" shape="rect" href="#">
<area alt="364" name="364" coords="22,196,105,221" shape="rect" href="#">
<area alt="363" name="363" coords="22,224,105,250" shape="rect" href="#">
And my .ts function which tries to reapply/rebind/whatever, in it's current form which results in displaying the correct colors, but kills the tooltips. it gets calle onInit and when the user changes the year he wants to see/edit. the variables are set up before each call and use the correct data for the respectice year
if (this.initialLoad === true){
$('#room' + this.roomId + 'img').mapster(this.basic_opts);
} else {
$('#room' + this.roomId + 'img').mapster();
$('#room' + this.roomId + 'img').attr("usemap", '#room' + this.roomId + 'map');
$('#room' + this.roomId + 'img').mapster( "rebind" ,this.basic_opts);
}
$('#room' + this.roomId + 'img').mapster('set', this.rented, this.unrentedLockers , this.unrented_opts);
$('#room' + this.roomId + 'img').mapster('set', this.rented, this.unrentedBrokenLockers , this.unrentedBroken_opts);
$('#room' + this.roomId + 'img').mapster('set', this.rented, this.rentedPaidLockers , this.rentedPaid_opts);
$('#room' + this.roomId + 'img').mapster('set', this.rented, this.rentedPaidBrokenLockers , this.rentedPaidBroken_opts);
$('#room' + this.roomId + 'img').mapster('set', this.rented, this.rentedUnpaidLockers , this.rentedUnpaid_opts);
$('#room' + this.roomId + 'img').mapster('set', this.rented, this.rentedUnpaidBrokenLockers , this.rentedUnpaidBroken_opts);
the tooltips themselves are created in a different function which is called onConfigured. if i simply reapply the options, they get updated correctly, but the colors get layered on top of each other. i console.log() 'ed basically everything. the data is there, it's just not linked to the image map. the areas id's are set according to the name of the locker. when i rebind the .mapster, the data is lost and i can't reapply it. But as i said, only the tooltips lose their link, the onClick() event still produces the correct result, which is linking to a different page which lets the user edit the locker.
Full Error:
TypeError: Cannot read property '0' of null
core.js:7187
message:"Cannot read property '0' of null"
stack:"TypeError: Cannot read property '0' of null\n
at u.MapData.getAllDataForArea (http://localhost:4200/scripts.js:18:25591)\n
at HTMLAreaElement.r (http://localhost:4200/scripts.js:18:22656)\n
at HTMLAreaElement.n.mouseover (http://localhost:4200/scripts.js:18:24547)\n
at HTMLAreaElement.dispatch (http://localhost:4200/scripts.js:2:42571)\n
at HTMLAreaElement.v.handle (http://localhost:4200/scripts.js:2:40572)\n
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3240:31)\n
at Object.onInvokeTask (http://localhost:4200/vendor.js:68456:33)\n
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3239:60)\n
at Zone.runTask (http://localhost:4200/polyfills.js:3017:47)\n
at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:3314:34)"
the property changes depending on the areai hover over, but it is not the "correct" number. If i hover over the locker 365 after the initial page load, and it shows the correct number, i hover over it after the year change and it is showing 0, i assume this is because it is the first in my html file.
after reading the documentary again (...and again, and again...) i finally manged to achieve, what i was looking for!
i think i used imagemapster "wrong": I colored the areas by selecting them
I simply had to deselect them all, then I was able to rebind them with the correct colors and tooltips. Also i had to remove "setToolTips()" from the "onConfigured" attribute of my options, and call it after applying/rebinding