www.webdeveloper.com
Results 1 to 2 of 2

Thread: Check mark button controlling map

  1. #1
    Join Date
    Feb 2014
    Posts
    1

    Question Check mark button controlling map

    SEE HERE: http://jsfiddle.net/Vh79z/10/

    As you can see there is a map and a checkmark box. I want the check mark box to control the color of the countries.

    For example: when checked (checked on load) I want it to highlight certain countries on the map. And when unchecked to display them in a different color.

    Code:
     new jvm.WorldMap({
            map: 'world_mill_en',
            container: $('#mymap'),
            backgroundColor: '#314F73',
            zoomMax: 40,
            markers: markers,
            markerStyle: {
                initial: {
                    fill: '#ffffff'
                }
            },
            series: {
                regions: [{
                    scale: {
                        '1': '#B1C9C0',
                            '2': '#41a62a'
                    },
                    attribute: 'fill',
                    values: data1['countriesvisited']
                }]
            }
        });
    });
    $(document).ready(function () {
        $('#myForm').fancyfields();
        var mapObject = $('#mymap').jvm.WorldMap('get', 'mapObject');
        $("#Checkbox1").fancyfields("bind", "onCheckboxChange", function (input, isChecked) {
            if (isChecked) {
                console.log(mapObject.series.regions[0]);
                mapObject.series.regions[0].setScale({
                    '1': '#ffffff',
                        '2': '#000000'
                });
            } else {
                mapObject.series.regions[0].setScale({
                    '1': '#000000',
                        '2': '#ffffff'
                });
            }
        });
    });
    So using the above code:

    On load it would load WITH all the: '1' parameter countries with COLOR #B1C9C0 '2' parameter countries with COLOR #41A62A

    on checkmark: '1' parameter countries with COLOR #ffffff '2' parameter countries with COLOR #000000

    on uncheck: '1' parameter countries with COLOR #000000 '2' parameter countries with COLOR #ffffff

    Well that's what I want it to do. I am not sure I am getting the info from the map correctly though.

    please help !

  2. #2
    Join Date
    Sep 2007
    Posts
    315
    As far as I know:
    Code:
      
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>Whole World</title>
    <!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    
    <link rel="stylesheet" media="all" href="http://jvectormap.com/css/jquery-jvectormap-1.2.2.css"/>
    <style type="text/css">
    .jvectormap-container { border:8px solid #489;}
    </style>
    <script type="text/javascript" src="http://jvectormap.com/js/jquery-1.8.2.min.js"></script>
    <script src="http://jvectormap.com/js/jquery-jvectormap-1.2.2.min.js"></script>
    <script type="text/javascript" src="http://jvectormap.com/js/jquery-jvectormap-world-mill-en.js"></script>
    </head>
    <body>
    <div style="height:445px; width:900px;" id="map"></div>
    <pre id="metin"></pre>
    
    <script type="text/javascript">
    // http://www.webdeveloper.com/forum/showthread.php?290157-Check-mark-button-controlling-map
    // http://jvectormap.com/maps/world/world/
    // http://www.w3schools.com/jquery/jquery_syntax.asp
    
     $('#map').vectorMap({map: 'world_mill_en'});
    
    // div elemanının innerHTML sinde ne olduğunu görmek için onu başka bir alana yazdırayım.
    /*
    var el = document.getElementById('metin');
    var pano = document.getElementById('map');
    el.innerHTML = pano.innerHTML;
    */
    /*
    <div class="jvectormap-container" style="width: 100%; height: 100%; position: relative; overflow: hidden; background-color: rgb(80, 80, 80);">
    <svg height="445" width="900">
     <g transform="scale(1) translate(0, 2.14684)">
     <path class="jvectormap-region jvectormap-element" fill-rule="evenodd" stroke-opacity="1" stroke-width="0" stroke="none" fill-opacity="1" fill="white" data-code="BD" d="M652.71,228.85l-0.04,1.38l-0.46,-0.21l-0.42,0.3l0.05,0.65l-0.17,-1.37l-0.48,-1.26l-1.08,-1.6l-0.23,-0.13l-2.31,-0.11l-0.31,0.36l0.21,0.98l-0.6,1.11l-0.8,-0.4l-0.37,0.09l-0.23,0.3l-0.54,-0.21l-0.78,-0.19l-0.38,-2.04l-0.83,-1.89l0.4,-1.5l-0.16,-0.35l-1.24,-0.57l0.36,-0.62l1.5,-0.95l0.02,-0.49l-1.62,-1.26l0.64,-1.31l1.7,1.0l0.12,0.04l0.96,0.11l0.19,1.62l0.25,0.26l2.38,0.37l2.32,-0.04l1.06,0.33l-0.92,1.79l-0.97,0.13l-0.23,0.16l-0.77,1.51l0.05,0.35l1.37,1.37l0.5,-0.14l0.35,-1.46l0.24,-0.0l1.24,3.92Z"></path>
    */
    // ulke kodları: 'AE','AF','AL','AM','AO','AR','AT','AU','AZ','BA','BD','BE','BF','BG','BI','BJ','BN','BO','BR','BS','BT','BW','BY','BZ','CA','CD','CF','CG','CH','CI','CL','CM','CN','CO','CR','CU','CY','CZ','DE','DJ','DK','DO','DZ','EC','EE','EG','ER','ES','ET','FK','FI','FJ','FR','GA','GB','GE','GF','GH','GL','GM','GN','GQ','GR','GT','GW','GY','HN','HR','HT','HU','ID','IE','IL','IN','IQ','IR','IS','IT','JM','JO','JP','KE','KG','KH','KP','KR','XK','KW','KZ','LA','LB','LK','LR','LS','LT','LU','LV','LY','MA','MD','ME','MG','MK','ML','MM','MN','MR','MW','MX','MY','MZ','NA','NC','NE','NG','NI','NL','NO','NP','NZ','OM','PA','PE','PG','PH','PK','PL','PR','PS','PT','PY','QA','RO','RS','RU','RW','SA','SB','SD','SE','SI','SJ','SK','SL','SN','SO','SR','SS','SV','SY','SZ','TD','TF','TG','TH','TJ','TL','TM','TN','TR','TT','TW','TZ','UA','UG','US','UY','UZ','VE','VN','VU','YE','ZA','ZM','ZW'
    
    var dizi = ['US','AU','BR'];
    
    
    function boya(bu) {
    
    var harita = document.getElementById('map');
    var pat = harita.getElementsByTagName('path');
    var onay= document.getElementById(bu.id);
    var kod;
    var i, say; 
    if(onay.checked==true) { 
    
     for(say =0; say<pat.length; say++) {
       kod = pat[say].getAttribute('data-code')
       if(dizi.indexOf(kod) != -1)  {  pat[say].setAttribute('fill','#786');}  // http://www.w3schools.com/jsref/jsref_indexof_array.asp
       if(dizi.indexOf(kod) == -1)  {  pat[say].setAttribute('fill','#129');}
    }
    }
    if(onay.checked==false) { 
    
    for(say =0; say<pat.length; say++) {
      kod = pat[say].getAttribute('data-code')
       if(dizi.indexOf(kod) != -1)  {  pat[say].setAttribute('fill','#129');}
       if(dizi.indexOf(kod) == -1)  {  pat[say].setAttribute('fill','#786');}
    }
    }
    }
    
    </script>
    <div id="kutular">
    <input type="checkbox" value="" id="mb" name="" onclick="boya(this)" >
    </div>
    </body>
    </html>
    Last edited by Ayşe; 02-13-2014 at 05:30 PM.
    The Time Through Ages
    1. By the Time,
    2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles