open modal inside Jquery

Question

I have inherited a project and it needs some amendments but i can't work out everything that has been done an why.

Basically it is a map that is split into regions. When you mouse over a region a the region changes colour and a tooltip pops up.

This is fine for now. But i would also like to add a click functionality to it but for the life of me i can't figure out how. Most of the data seems to be stored in a JS file:

jQuery(function($) {
      $(function() {
            debugger;
            $("#unmaskUKMap").mapael({
                  map: {
                    // Set the name of the map to display
                    name: "uk_new",
                    defaultArea: {
                      attrs: {
                        stroke: "#fff",
                        "stroke-width": 1,
                        "fill": "#D0D0D0"
                      },
                      attrsHover: {
                        "stroke-width": 2,
                        "fill": "#0065AE"
                      }
                    }
                  },
                  areas: {
                    "wales": {
                      href: "#",
                      tooltip: {
                        content: "<h3>Wales</h3>" +
                          "Number of insolvencies" +
                          "<ul>" +
                          "<li><span class='quarter'>Q1 2014: </span><span>134</span></li>" +
                          "<li><span class='quarter'>Q1 2015: </span><span>137</span></li>" +
                          "</ul>" +
                          "<ul>" +
                          "High Risk Sectors" +
                          "<li>Services</li>" +
                          "<li>Construction</li>" +
                          "<li>Retail</li>" +
                          "</ul>"
                      }
                    },

So as you can see you mouse over the tooltip pops up and it colours the area.

What i would like to do it somehow be able to trigger a modal to open on click.

Normally I would use:

<a href="#myModalBigDataSearching" role="button" data-toggle="modal"</a>

Although in this case I don't need a button so i guess i remove the role part.

I can't add this to any of the areas as it breaks the rest of the code and i can't find how to add it to the href : section either of if this is even possible?

Answer 1

looks like you are using the jQuery Mapael plugin to handle your maps. I got this code snippet from their documentation; it adds functions to handle events in your map (such as 'click' as per the example). You should add it to your code right after the attrsHover: { ...... }, portion.

Hope this helps.

eventHandlers: {
    click: function (e, id, mapElem, textElem) {
       // YOUR CODE HERE
    }
},