0

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"
Improve this question
3
  • Please upload code, on how you have added the popover in .html and .ts Commented Aug 24, 2018 at 9:09
  • Done. Post edited. Commented Aug 24, 2018 at 9:17
  • Hi any idea where could be the issue? Commented Aug 27, 2018 at 10:07
Related questions
12
Build error 'Module not found' when importing local library in Angular
1
SVG component in Angular library project gives 'Unknown word' error
2
Can't link my library Angular in another library Angular
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.