Destroy Map? #12

Closed
sonicparke opened this Issue Jun 7, 2012 · 4 comments

Comments

Projects
None yet
5 participants
@sonicparke

Is there a way to destroy a map using and event handler? I'd like to be able to dynamically load a map based on user click.

@ferengi

This comment has been minimized.

Show comment
Hide comment
@ferengi

ferengi Jul 25, 2012

I need this too, i want to reload a new map with ajax.

is this possible ?

ferengi commented Jul 25, 2012

I need this too, i want to reload a new map with ajax.

is this possible ?

@ferengi

This comment has been minimized.

Show comment
Hide comment
@ferengi

ferengi Jul 25, 2012

my first solution...

first reload wirh ajax
jQuery.ajax({
data: {'elid': el, 'typ':'getmap'},
success: function(data){
jQuery('#vmap').html(data);
}
})

after this you have a new map....but the lable text is the old. Too fix this i have change

var mapData = WorldMap.maps[params.map]; ---> mapData = WorldMap.maps[params.map];

....now i have the problem that after hover the color don't switch back.

ferengi commented Jul 25, 2012

my first solution...

first reload wirh ajax
jQuery.ajax({
data: {'elid': el, 'typ':'getmap'},
success: function(data){
jQuery('#vmap').html(data);
}
})

after this you have a new map....but the lable text is the old. Too fix this i have change

var mapData = WorldMap.maps[params.map]; ---> mapData = WorldMap.maps[params.map];

....now i have the problem that after hover the color don't switch back.

@okendoken

This comment has been minimized.

Show comment
Hide comment
@okendoken

okendoken Mar 12, 2013

Everytime you need to update you map you can replace your element hard way :)

$('#vector-map').replaceWith("<div id='vector-map'></div>");
        var $map = $('#vector-map');
        $map.width("100%").height("100%").vectorMap();

Everytime you need to update you map you can replace your element hard way :)

$('#vector-map').replaceWith("<div id='vector-map'></div>");
        var $map = $('#vector-map');
        $map.width("100%").height("100%").vectorMap();
@chrisNom

This comment has been minimized.

Show comment
Hide comment
@chrisNom

chrisNom Oct 5, 2016

I also needed to update the map, based on user interaction and none of the solutions above helped me.
Instead I just "remove" the map's parent div before calling the vectorMap():

           `// This is a hack, as the .empty() did not do the work
            $('#vmap').remove();

            // we recreate (after removing it) the container div, to reset all the data of the map
            $('#test')
                .append('<div id="vmap" style="height: 320px; position: relative; overflow: hidden; background-color: transparent;"></div>');

            // and then render map
            $('#vmap').vectorMap({
                map: 'world_en',
                backgroundColor: null,
                color: '#ffffff',
                hoverOpacity: 0.7,
                selectedColor: '#666666',
                enableZoom: true,
                showTooltip: true,
                values: sample_data,
                scaleColors: ['#C8EEFF', '#006491'],
                normalizeFunction: 'polynomial',
                onLabelShow: function (event, label, code) {
                    if (sample_data[code] > 0)
                        label.append(': ' + sample_data[code]);
                }
            });`

chrisNom commented Oct 5, 2016

I also needed to update the map, based on user interaction and none of the solutions above helped me.
Instead I just "remove" the map's parent div before calling the vectorMap():

           `// This is a hack, as the .empty() did not do the work
            $('#vmap').remove();

            // we recreate (after removing it) the container div, to reset all the data of the map
            $('#test')
                .append('<div id="vmap" style="height: 320px; position: relative; overflow: hidden; background-color: transparent;"></div>');

            // and then render map
            $('#vmap').vectorMap({
                map: 'world_en',
                backgroundColor: null,
                color: '#ffffff',
                hoverOpacity: 0.7,
                selectedColor: '#666666',
                enableZoom: true,
                showTooltip: true,
                values: sample_data,
                scaleColors: ['#C8EEFF', '#006491'],
                normalizeFunction: 'polynomial',
                onLabelShow: function (event, label, code) {
                    if (sample_data[code] > 0)
                        label.append(': ' + sample_data[code]);
                }
            });`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment