jQuery MapSvg binding data to regions parameter

Question

In my MVC application, I am trying to create a SVG Map with data that comes from a database. Using jQuery, I call an action in the controller which returns data in the format that is expected in the MapSvg region's parameter.

The format that is expected goes as follows:

regions :       {
              'Yemen': {disabled: true},
              'USA':   {tooltip: 'USA: Click to go to Google.com', attr: {fill: '#ff0000', href: 'http://google.com', 'cursor': 'help'}}},
              'France': {tooltip: 'This is France!', attr: {'cursor': 'help'}},
              'Kazakhstan': {tooltip: 'Kazakhstan  - the ninth largest country in the world.'}
            },

In my controller, I have an action that will be called in the view by a jQuery ajax request

    public ActionResult GetCountries()
    {           
            List<ScratchMap> allitems = this.Worker.GetAllItems();
            var allItemsAsArray = allitems.Select(x => string.Format("'{0}': {{ tooltip: 'Test', attr: {{ fill: '{1}' }} }}", x.PluginCountryName, x.Color)).ToArray();
            return Json(allItemsAsArray, JsonRequestBehavior.AllowGet);

    }

In the View, the following code is executed after the jQuery plugins and the MapSvg plugins are loaded:

$.get('/ScratchMap/GetCountries', {},
        function (data) {           
            var regionsData = '{' + data + '}';         

            $('#map').mapSvg(
                {
                    source: '@Url.Content("~/Content/Maps/world_high.svg")',
                    loadingText: 'Loading map...',
                    tooltipsMode: 'names',
                    responsive: true,
                    zoom: true,
                    pan: true,
                    zoomButtons: {
                        'show': true,
                        'location': 'right'
                    },
                    regions: regionsData                            
                });
        }), 'json';

When the page is rendered, the map does not fill any countries that were retrieved from the database. However, when I copy and assign the output of the regionsData variable directly to the regions parameter, the map loads everything correctly.

The following article teaches me that this could have something to do with the input data type. However, if I parse the regionsData to JSON, it tells me it is in a wrong format. But the given example by the creators of MapSvg is also in a wrong format.

Does anybody have any ideas for a workaround?

Thanks.

JgCoder · Answer 1 · 2015-10-03T00:42:09.407

The problem is that even if the regions variable is edited the map plugin doesnt watch the change in its object contents so you must either wait till the data is returned before graphing the contents. Or re-graph with the method below.

If you wish to wait to graph till the data has been returned from your database call you can use a promise to delay the graphing of the object. Also important to know is the format in which the OPTS variables needs to have here is a sample.

var OPTS = {

  source: sourcepath,    // Path to SVG map
  colors: {background: '#fff',base: '#0066FF', stroke: '#fff', selected: 10, disabled: '#ff0000'},
  tooltipsMode: 'combined',
  zoom: true,
  pan: true,
  responsive: true,
  width: 1170,
  zoomLimit: [0,100], 
  onClick: function (e, m) {
    //do something here on each map click
  },
  regions:{
     id_of_svg_path(the actual region you want to add data for):{
       disabled:true,/*or whatever you need*/
       tooltip:'<h4>Something to say</h4>'
     }
  }

}

In-order to re-graph I used the return object:

OPTS are just your specific chart options.
A variable javascript object that contains a regions variable.
var chartObj = $('#chart_container').mapSvg(OPTS);

chartObj.destroy();
This call will destroy then you re-graph it with OPTS that you have passed in.

Once you have destroyed it and passed in the new data you can just call.
var chartObj = $('#chart_container').mapSvg(OPTS);

Re-graphing it with the new data.

I have my doubts with your suggested solution. I have looked into this issue and I noticed that there's an issue with the way I construct the regions variable. As you see in my question, the declarative creation of the variable results into a list of objects, whereas the data that comes from the AJAX call is just a JSON string. I'll need to figure how to create the same kind of javascript variable. — hbulens, Oct 03 '15 at 09:52

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

It turns out that it was an issue with the way I created the javascript output. The answer to this question can be found in this article.

edited May 23 '17 at 11:44

Community

1
1

answered Oct 03 '15 at 09:59

hbulens

1,872
3
24
45

jQuery MapSvg binding data to regions parameter

2 Answers2