raphael + mapSvg fadeout

Question

I need some help,I'm using mapSVG in this code that creates a map of my country, where every region has its own path, with its own id, so this is what I want:

When I click on a region, I need it to fade out(1000 ms) together with the whole map of the country,and then I need a delay of for example 500ms, after which only the region on which I clicked fades in (1000 ms).

And I need this to work for every region respectively.

<div id="italy" style="margin-left:135px;margin-right:135px;">
            <!-- Here comes map code-->
            <script type="text/javascript">
            $('#italy').mapSvg({
                source: 'maps/italy.svg',
                colors: {
                        base: "#E1F1F1",
                        stroke: "#646464",
                        hover: "#548eac",
                        selected: "#548eac",
                        disabled: "#ffffff",
                    },
                tooltipsMode: 'custom',   
                popover : {width: 300, height: 300},
                cursor: 'pointer',
                zoom: false,
                pan: false,
                responsive: true,
                width: 900,
                height: 600,
                responsive: true,  
                zoomButtons: {'show': false, 
                },
                regions : {
                  'Sicilia'  : {tooltip: 'This is Sicilia'},
                },
                onClick : function(e,m){
                this.animate({opacity: 0}, 1000 );
                }
            });
            </script>
        </div>

Put your js in a file and add a class of country to each one. Then have a function to fade them all out, after that call a fade in passing in the id of the clicked country and fade that in. — Neil, Mar 09 '13 at 22:05

score 0 · Accepted Answer · answered Mar 12 '13 at 12:38

0

I'm developer of mapSVG :) Try this:

onClick: function (e, m) {
    var rmap = m.getData().RMap;
    var region = this;
    var fadeBack = function () {region.animate({opacity: 1}, 500);};
    rmap.animate({opacity: 0}, 500, fadeBack);
}

answered Mar 12 '13 at 12:38

Roman

3,799
4
30
41

onClick: function (e, m) { var rmap = m.getData().RMap; var region = this; var fadeBack = function () {region.animate({opacity: 1}, 500);}; rmap.animate({opacity: 0}, 500, fadeBack); } This works great, but is it possible to load a new svg which would be only a region that I clicked on? Tnx – boska0712 Mar 15 '13 at 00:38

raphael + mapSvg fadeout

1 Answers1