How to Change states color on jqvmap based on a Json response?

Question

i have this map of the us and i'm

I have implemented this map of the us in a server but i'm trying to change the color of some states based on a mysql response, but i haven't been able to do it

Here's the code i have

<script type="text/javascript" src="includes/js/jquery-2.1.0.min.js">

</script>
<script src="includes/js/jquery.vmap.js"></script>
<script src="includes/js/jquery.vmap.canada.js"></script>
<script src="includes/js/jquery.vmap.usa.js"></script>

<script>
$(document).ready(function(){
    var states_colors = {};
    var states = {};
    $.post("state_service.php", function(data) {
        var states_data = data.split(',');
        for (var i = 0; i < states_data.length; i++) {
            states[i] = states_data[i].replace(/[""\[\]]+/g, '');
            states_colors[i] = states[i]+': #8EE5EE,';
        };
        console.log(states_colors);
        $('#vmap').vectorMap('set', 'colors', states_colors);
    });

    $('#vmap').vectorMap({
        map: 'usa_en',
        backgroundColor: null,
        color: '#F58025',
        hoverColor: '#754200',
        selectedColor: '#754200',
        enableZoom: false,
        showTooltip: false,
        onRegionClick: function(element, code)
        {
            var arr = [];
            arr = code.split('-');
            var url = 'search.php?';
            var query = 'keywords=&city=&state='+arr[1];
            window.location.href = url + query;
        }
    });
});
</script>

<div id="vmap" style="width: 600px; height: 600px;"></div>

And this is what the Json response brings me which are the states that i want to highlight

["AB","CO","UT"]

it prints out UT: #8EE5EE so its pretty much the state name : #anycolor — Cesar Mtz, Jun 24 '15 at 19:03

score 3 · Accepted Answer · answered Jun 24 '15 at 20:08

3

According to the docs following function is correct

$('#vmap').vectorMap('set', 'colors', states_colors);

but setColors function which takes key and color as arguments. so i changed to following, it started working

$('#vmap').vectorMap('set', 'colors', states[i], '#8EE5EE');

example : http://codepen.io/anon/pen/RPjJYb

used following libraries for the site

http://jqvmap.com/js/vmap/jquery.vmap.js?v=1.0
http://jqvmap.com/js/vmap/jquery.vmap.usa.js?v=1.0

answered Jun 24 '15 at 20:08

Pavan Kumar Jorrigala

3,085
16
27

so in here should i just place the $post() method to read the data? – Cesar Mtz Jun 24 '15 at 20:47
yes, you can put $.post("state_service.php", highlightState(data) ); or you can replace highlightState(data) with entire function(data){...} – Pavan Kumar Jorrigala Jun 24 '15 at 21:02

Vaibs_Cool · Answer 2 · 2015-06-24T19:20:39.217

Just change the sequence of scripts

First initialise the vectormap and then call for state colors..

2nd Guess

Initialise the vectormap in the document.ready

3rd Attempt

Make the state_color array global and then call the array in vectormap initalisation

for eg

states_colors = {};

states_colors ['AB'] = '#A4D886';
states_colors ['UT'] = '#FCECA2';
states_colors ['CO'] = '#8EE5EE ';

$('#vmap').vectorMap({
    colors: states_colors,
    map: 'usa_en',
    backgroundColor: null,
    hoverColor: '#754200',
    selectedColor: '#754200',
    enableZoom: false,
    showTooltip: false,
    onRegionClick: function(element, code)
    {
        var arr = [];
        arr = code.split('-');
        var url = 'search.php?';
        var query = 'keywords=&city=&state='+arr[1];
        window.location.href = url + query;
    }
});

if you can replicate the situation in the FIDDLE below

http://jsfiddle.net/8yp2u9bh/2/

How to Change states color on jqvmap based on a Json response?

2 Answers2