after adding mapsvg jQuery library to Angular (4) project and add popover functionality to map, I receiving an error in Console and popover functionality doesn't work.
I added references to all js files into Angular project.
Error:
core.js:1673 ERROR TypeError: this.contentWrap.nanoScroller is not a function
at MapSVG.PopoverController.MapSVG.Controller.updateScroll (mapsvg.js:296)
at MapSVG.PopoverController.MapSVG.Controller.redraw (mapsvg.js:377)
at MapSVG.PopoverController.MapSVG.Controller.render (mapsvg.js:354)
at MapSVG.PopoverController.MapSVG.Controller._init (mapsvg.js:305)
at MapSVG.PopoverController.MapSVG.Controller (mapsvg.js:285)
at new MapSVG.PopoverController (mapsvg.js:859)
at Object.showPopover (mapsvg.js:4624)
at Object.regionClickHandler (mapsvg.js:4389)
at SVGEllipseElement.<anonymous> (mapsvg.js:4830)
at HTMLDivElement.dispatch (jquery.js:5183)
Probably I missed something but I cannot debug it.
app.component.ts -> onInit() :
$('#mapsvg').mapSvg({
source: '/src/assets/mapsvg/maps/user-uploads/3rdFloor_Area_3.svg',
tooltips: {mode: "id",on: false,priority: "local",position: "top"},
popovers: {
mode:
function (jQueryPopoverObj, mapObject, mapsvgInstance
) {
//return '<label id="' + this.id + '" style=" font-weight: bold;font-size: 0.8rem;">Desk ID: ' + this.id + '</label><p style=" font-weight: bold;font-size: 0.8rem;">This desk is booked and checked in</p><button type="button" class="btn-sm btn-primary mt-1" onclick="ClosePopup(\'' + this.id + '\')">Close</button>';
//this.id;
return '<b>' + this.id + '</b>' + this.title
}
}
,on: true, priority: "local", position: "top", centerOn: false, width: 200, maxWidth: 50
});
angular.json
"node_modules/jquery/dist/jquery.js",
"src/assets/mapsvg/js/mapsvg.js",
"src/assets/mapsvg/js/admin.js",
"src/assets/mapsvg/js/bootstrap-colorpicker.min.js",
"src/assets/mapsvg/js/bootstrap.min.js",
"src/assets/mapsvg/js/build.js",
"src/assets/mapsvg/js/codemirror.colorize.js",
"src/assets/mapsvg/js/codemirror.javascript.js",
"src/assets/mapsvg/js/codemirror.js",
"src/assets/mapsvg/js/css.js",
"src/assets/mapsvg/js/formatting.js",
"src/assets/mapsvg/js/handlebars.js",
"src/assets/mapsvg/js/htmlmixed.js",
"src/assets/mapsvg/js/ion.rangeSlider.min.js",
"src/assets/mapsvg/js/jquery.message.js",
"src/assets/mapsvg/js/jquery.message.min.js",
"src/assets/mapsvg/js/jquery.mousewheel.min.js",
"src/assets/mapsvg/js/jquery.nanoscroller.min.js",
"src/assets/mapsvg/js/mapsvg.min.js",
"src/assets/mapsvg/js/runmode.js",
"src/assets/mapsvg/js/select2.min.js",
"src/assets/mapsvg/js/settings.js",
"src/assets/mapsvg/js/typeahead.bundle.min.js",
"src/assets/mapsvg/js/xml.js"